/* ------ WEBMASTER CSS ------ */

#webmaster:before { content: 'the weblord'; }
#formative:before { content: 'formative media'; }
#autism:before { content: 'autism?'; }
#queer_flags:before { content: 'my queer flags'; }
#profic:before {
  content: 'that special interest I hate';
  letter-spacing: -1px;
}

#webmaster {
  padding-top: 10;
}

#me_drawing {
  position: absolute;
  right: 20px;
  top: 0;
  width: 175px;
  height: auto;
}

      #webmaster_scrolling {
        height: 422px;
        overflow-y: auto;
        padding-right: 10px;
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--scrollbar-color);
        scrollbar-gutter: var(--scrollbar-gutter);
      }
      
      #intro_tease {
        width: 80%;
        float: left;
      }
      
      #the_rest {
        clear: both;
      }

#formative, #profic {
  float: left;
  width: 590px;
  height: 225px;
  margin-top: 75px;
}
      #formative_list {
        border-collapse: separate;
        border-spacing: 10px 20px;
      }
      
      .poster {
        height: 150px;
      }
      
      .media_title { text-align: center; }
      
      #profic { position: relative; }
      
      #mcfreakin {
        position: absolute;
        right: -60px;
        bottom: -15px;
        z-index: 2;
        width: 90px;
        height: auto;
      }

#autism, #queer_flags {
  float: right;
  width: var(--first-layer);
  height: 225px;
  margin-top: 75px;
  margin-right: 2.35%;
  font-family: 'Inria Sans', sans-serif;
}

        .flags {
          border: 1px white solid;
          width: 98%;
          table-layout: auto;
        }
        
        .flags td {
          text-align: center;
          vertical-align: middle;
          border: 1px white solid;
          padding: 3px;
          image-rendering: pixelated;
          image-rendering: crisp-edges;
        }
        
        .flags img {
          margin-top: 3px;
        }
        
        .pf {
          display: inline-block;
          margin: 7px 0 3px;
        }

.emote { height: 1rem; }






/* ---------- MOBILE ---------- */

@media (max-width: 400px) {
  
  .emote { height: 0.8rem; }
  
  #webmaster {
    float: inline_start;
    clear: both;
    margin-right: 0;
  }
  
  #webmaster_scrolling {
    height: 300px;
  }
  
  #me_drawing {
    width: 120px;
    height: auto;
    right: 10px;
  }
  
  #intro_tease {
    width: 70%;
  }
  
  #formative, #queer_flags, #profic, #autism {
    clear: both;
    width: 95%;
    height: 300px;
    margin-right: 0;
    margin-top: 50px;
  }
  
  .small_scroll {
    height: 168px;
  }
  
  .flags {
    table-layout: fixed;
  }
  
  #1st {
    width: 50%;
  }
  
  #mcfreakin {
    right: -10px;
    bottom: -20px;
  }
}