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

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

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

::-webkit-scrollbar
{
  width: 1vw;
  transition:0.2s;
}

::-webkit-scrollbar-track
{
  box-shadow: inset 0px 0px 0px 0.1vw #fff; 
  background-color:#000; 
  border-radius: 0.3vw;
}
 
 
::-webkit-scrollbar-thumb
{
  background: rgb(255,255,255);
  border-radius: 0px 0px 0px 0px;
  border-radius: 0.3vw;
}

::-webkit-scrollbar-thumb:hover
{
  background: #ff2525;
}

h4
{
  padding:0;
  margin:0;
  margin-bottom:1vh;
}

html
{
    font-size:6vw;
    width:100vw;
    height:100vw;
    overflow: hidden;
    zoom: reset;
}

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

.bgstripes
{
  opacity: 0.1;
  background-image:  linear-gradient(#000000 0.1vw, transparent 0.1vw), linear-gradient(to right, #000000 0.1vw, #ffffff00 0.1vw);
  background-size: 2vw 2vw;
  zoom: reset;
  position:absolute;
  top: 0;
  left: 0;
  z-index:-1;
  width:100vw;
  height:100vh;
  mix-blend-mode: overlay;
  pointer-events:none;
}

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

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

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

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

.title:hover .opacity_fade_in
{
  transition: 0.2s;
}

.opacity_fade_in
{
  color:#ff2525;
  transition:0.2s;
  display:inline;
}

.navitem
{
  font-size:0.8vw;
  width:fit-content;
  height:fit-content;
  display:inline;
  letter-spacing: 0.1vw;
  color:#fff;
  margin-left:0.25vw;
  margin-right:0.25vw;
  cursor:pointer;
  z-index:52;
  transition:0.2s;
  background:#000;
  border-radius:0.5vw;
  padding: 0.5vw;
  padding-left:1.85vw;
  padding-right:1.85vw;
  box-sizing:Border-box;
}

.navitem:hover
{
  color:#000;
  transition:0.2s;
  padding: 0.5vw;
  padding-left:3.25vw;
  padding-right:3.25vw;
  box-sizing:Border-box;
  background:#fff;
}

.navitem:hover::after
{
  color:#ff2525;
  font-weight:700;
  content: ".";
}

.navarea
{
  background:transparent;
  width: fit-content;
  height:fit-content;
  line-height:1.5vw;
  padding:0.5vw;
  margin:0;
  box-sizing:border-box;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border-radius:0.5vw;
  z-index:-990;
  box-shadow:0 0 1vw 0 #00000045;
  transition:0.2s;
}

.navarea:hover
{
  transition: 0.2s;
}

.content
{
    z-index:995;
    padding-bottom:0;
    margin-top:10vw;
    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;
}

.opacity_fade_in
{
    animation:opacity_fade_in 0.5s;
}

.section
{
  font-size:0.8vw;
  line-height:1.25vw;
  color:#FFF;
  background:#000;
  padding:1vw;
  width:27vw;
  height:fit-content;
  border-radius:0.5vw;
  position:absolute;
  top:62%;
  letter-spacing:0.08vw;
  font-weight:300;
  box-sizing:border-box;
  transition:0.3s;
  box-shadow:0 0 1vw 0 #00000045;
}

.section-content
{
  height:fit-content;
  max-height:17.5vh;
  overflow-y:auto;
  padding:0.5vw;
  scrollbar-color:white black;
  scrollbar-width:auto;
  scrollbar-gutter: stable;
}

.section-title
{
  color:#000;
  font-weight:500;
  font-size:1.25vw;
  padding:0px;
  margin:0px;
  display:block;
  margin-top:0.25vw;
  margin-bottom:1.35vw;
  border-radius:0.5vw;
  background:#fff;
  box-sizing:border-box;
  padding:1.5vw;
  pointer-events:none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

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

 .highlight
  {
      color: #f00;
  }

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

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

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

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

a
{
  color:#7d4ffc;
  transition:0.2s;
  text-underline-offset: 0.5vh;
  text-decoration: none;
  filter:brightness(1);
  font-weight:500;
}

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

#main-nav
{
  animation:none;
  margin-top: 10vw;
}

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

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

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

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

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

  to {
    margin-top:0vw;
  }
}

@keyframes opacity_fade_in {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

@keyframes opacity_fade_out {
  from {
    opacity: 100%;
  }

  to {
    opacity: 0%;
  }
}