*
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
}

::-moz-selection
{
  color: #FFF;
  background: #ff2525;
}

::selection
{
  color: #FFF;
  background: #ff2525;
}

@media screen and (orientation: portrait)
{

  html
  {
      font-size:20vw;
      width:100vw;
      height:100vh;
      overflow: hidden;
      overflow-y:scroll;
      zoom: reset;
  }

  body
  {
      margin:0;
      padding:0;
      width:100vw;
      height:100vh;
      overflow: hidden;
      overflow-y:scroll;
      background: rgb(255,255,255);
      zoom: reset;
      font-family: 'Rubik', sans-serif;
      font-weight:400;
      letter-spacing: -0.1vw;
      line-height:85%;
      color:#000;
  }

  b
  {
      color:#000;
      font-weight:500;
      letter-spacing:-0.05vw;
  }

  h4
  {
    padding:0;
    margin:0;
    margin-bottom:1vh;
    font-size:4vw;
  }

  .page
  {
      margin:0;
      padding:0;
      align-items:center;
      justify-content: center;
      display:flex;
      height:100vh;
      width:100vw;
      transform:TranslateY(-36vh);
  }

  .col
  {
    width:100vw;
    padding:0;
    margin:0;
  }

  .title
  {
    margin:0;
    padding:0;
    width:100%;
    line-height:0vw;
    font-weight:700;
    letter-spacing: 0.025rem;
    cursor:default;
    z-index:-999;
    margin-top:50vh;
    margin-bottom:7vh;
    font-size: 0.75rem;
    text-align: center;
    align-content: space-evenly;
    justify-content: space-evenly;
  }

  .navitem
  {
    font-size:4vw;
    width:fit-content;
    height:fit-content;
    display:inline;
    letter-spacing: 0.1vw;
    color:#fff;
    margin-left:2.25vw;
    margin-right:2.25vw;
    cursor:pointer;
    z-index:52;
    transition:0.2s;
    border-radius:2vw;
    background:#000;
    padding:5vw;
  }

  .navitem:hover
  {
    color:#ff2525;100vw
    transition:0.2s;
  }

  .navarea
  {
    background:transparent;
    width:75vw;
    height:fit-content;
    line-height:1.5vw;
    padding:5vw;
    margin:0;
    box-sizing:border-box;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:1.5vw;
    z-index:50;
  }

  .content
  {
      z-index:995;
      padding-bottom:0;
      text-align:center;
      opacity:100%;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
      line-height:0;
      transition:0s;
  }

  .section
  {
    font-size:4vw;
    line-height:3vh;
    color:#FFF;
    background:#000;
    padding:5vw;
    width:83vw;
    height:fit-content;
    border-radius:2vw;
    position:absolute;
    top:85%;
    letter-spacing:0.08vw;
    font-weight:300;
    box-sizing:border-box;
    transition:0.3s;
  }

  .section-content
  {
    height:fit-content;
    max-height:88vh;
    overflow-y:auto;
    box-sizing:border-box;
  }

  .section-title
  {
    color:#000;
    font-weight:500;
    font-size:5vw;
    padding:0px;
    margin:0px;
    display:block;
    margin-bottom:5vw;
    background:#fff;
    box-sizing:border-box;
    padding:2vw;
    border-radius:2vw;
  }

  .section-title::after
  {
    color:#ff2525;
    font-weight:700;
    content: ".";
  }
  
  .highlight
  {
      color: #f00;
  }

  #chatting
  {
    display:none;
    transition:0.2s;
    animation:none;
  }

  #gaming
  {
    display:none;
    transition:0.2s;
    animation:none;
  }

  #coding
  {
    display:none;
    transition:0.2s;
    animation:none;
  }

  a
  {
    color:#7d4ffc;
    transition:0.2s;
  }

  a:hover
  {
    color:#ff2525;
    transition:0.2s;
  }

  #main-nav
  {
    animation:none;
  }

  @keyframes fadein {
    from {
      top:150%;
      opacity: 0%;
    }

    to {
      top:85%;
      opacity: 100%;
    }
  }

  @keyframes fadeout {
    from {
      top:85%;
      opacity: 100%;
    }

    to {
      top:150%;
      opacity: 0%;
    }
  }

  @keyframes scootup {
    from {
      margin-top:50vh;
    }

    to {
      margin-top:0vw;
    }
  }

  @keyframes scootdown {
    from {
      margin-top:0vw;
    }

    to {
      margin-top:50vh;
    }
  }

}

@media screen and (orientation: landscape)
{

  html
  {
      font-size:8vw;
      width:100vw;
      height:100vh;
      overflow: hidden;
      overflow-y:auto;
      zoom: reset;
  }

  body
  {
      margin:0;
      padding:0;
      width:100vw;
      height:100vh;
      overflow: hidden;
      overflow-y:auto;
      background: rgb(255,255,255);
      zoom: reset;
      font-family: 'Rubik', sans-serif;
      font-weight:400;
      letter-spacing: -0.1vw;
      line-height:85%;
      color:#000;
  }

  b
  {
      color:#000;
      font-weight:500;
      letter-spacing:-0.05vw;
  }

  h4
  {
    padding:0;
    margin:0;
    margin-bottom:1vh;
    font-size:1.45vw;
  }

  .page
  {
      margin:0;
      padding:0;
      align-items:center;
      justify-content: center;
      display:flex;
      height:100vh;
      width:100vw;
      transform:TranslateY(-23vh);
  }

  .col
  {
    width:33vw;
    padding:0;
    margin:0;
  }

  .title
  {
    margin:0;
    padding:0;
    width:100vw;
    line-height:0vw;
    font-weight:500;
    letter-spacing: 0.25vw;
    cursor:default;
    z-index:-999;
    margin-bottom:15vh;
    align-items:space-evenly;
    justify-content: space-evenly;
  }

  .navitem
  {
    font-size:1.5vw;
    width:fit-content;
    height:fit-content;
    display:inline;
    letter-spacing: 0.1vw;
    color:#fff;
    margin-left:0.5vw;
    margin-right:0.5vw;
    padding:0vw;
    cursor:pointer;
    z-index:52;
    transition:0.2s;
    background:#000;
    padding:1.5vw;
    padding-left:2vw;
    padding-right:2vw;
    border-radius:1vw;
  }

  .navitem:hover
  {
    color:#ff2525;
    transition:0.2s;
  }

  .navarea
  {
    background:transparent;
    width:32vw;
    height:fit-content;
    line-height:1.5vw;
    padding:0.8vw;
    margin:0;
    box-sizing:border-box;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:1vw;
    z-index:50;
  }

  .content
  {
      z-index:995;
      padding-bottom:0;
      text-align:center;
      opacity:100%;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
      line-height:0;
      transition:0s;
  }

  .section
  {
    font-size:1.5vw;
    line-height:5vh;
    color:#FFF;
    background:#000;
    padding:1.5vw;
    width:32vw;
    height:fit-content;
    border-radius:1.5vw;
    position:absolute;
    top:66%;
    letter-spacing:0.08vw;
    font-weight:300;
    box-sizing:border-box;
    transition:0.3s;
    margin-bottom:10vh;
  }

  .section-content
  {
    height:fit-content;
    max-height:88vh;
    overflow-y:auto;
    box-sizing:border-box;
  }

  .section-title
  {
    color:#000;
    font-weight:500;
    font-size:3vw;
    padding:0px;
    margin:0px;
    display:block;
    margin-bottom:1.5vw;
    margin-top:0.5vw;
    background:#fff;
    box-sizing:border-box;
    padding:1.5vw;
    border-radius:1vw;
  }

  .section-title::after
  {
    color:#ff2525;
    font-weight:700;
    content: ".";
  }

  #chatting
  {
    display:none;
    transition:0.2s;
    animation:none;
  }

  #gaming
  {
    display:none;
    transition:0.2s;
    animation:none;
  }

  #coding
  {
    display:none;
    transition:0.2s;
    animation:none;
  }

  a
  {
    color:#7d4ffc;
    transition:0.2s;
  }

  a:hover
  {
    color:#ff2525;
    transition:0.2s;
  }

  #main-nav
  {
    animation:none;
  }

  @keyframes fadein {
    from {
      top:150%;
      opacity: 0%;
    }

    to {
      top:66%;
      opacity: 100%;
    }
  }

  @keyframes fadeout {
    from {
      top:66%;
      opacity: 100%;
    }

    to {
      top:150%;
      opacity: 0%;
    }
  }

  @keyframes scootup {
    from {
      margin-top:10vw;
    }

    to {
      margin-top:0vw;
    }
  }

  @keyframes scootdown {
    from {
      margin-top:0vw;
    }

    to {
      margin-top:10vw;
    }
  }

}

#available
{
  display:none;
  transition:0.2s;
  animation:none;
}