@font-face{
    font-family: "lmao";
    src: url('fonts/regular.otf') format("truetype");
    font-weight: normal;
}
@font-face{
    font-family: "haha";
    src: url('fonts/haha.otf') format("truetype");
    font-weight: normal;
}
@font-face{
    font-family: "hehe";
    src: url('fonts/DEADLY\ KILLERS.ttf') format("truetype");
    font-weight: normal;
}
@font-face{
    font-family: "hihi";
    src: url('fonts/Insomnia\ 1.ttf') format("truetype");
    font-weight: normal;
}
@font-face{
  font-family: "hoho";
  src: url('fonts/Road_Rage.otf') format("truetype");
  font-weight: normal;
}
@font-face{
  font-family: "graf";
  src: url('fonts/Graf.ttf') format("truetype");
  font-weight: normal;
}
#enter {
  background-color: #000000;
  width: 100%;
  height: 100%;
  color: #fff;
  position: absolute;
  bottom: 10%;
  right: 1%;
  
  z-index: 5;
  
  transition: .3s ease-in;
  font-size: 24px;
}
#enter:hover{
  text-decoration: underline;
}
p{
  font-family: Georgia, 'Times New Roman', Times, serif;
}


  .pfp {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    box-shadow: 0px 0px 3px 5px #414141;
    position: absolute;
    top: 30%;
    left: 47.9%;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
}    
  
  .username{
    color: white;
    font-family: lmao;
    position: absolute;
    top: 42.50%;
    left: 48.1%;
    font-size: 200%;

  }
  .pfp:hover {
    transform : scale(1.1);
    -moz-transform : scale(1.1);
    -webkit-transform : scale(1.1);
    -o-transform : scale(1.1);
    -ms-transform : scale(1.1);
  }
  .callsign{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 46.50%;
    left: 50.3%;
  


  }
.socials{
  position: absolute;
  top: 50%;
  left: 49.3%;
  
    height: 5%;
    
  
}
.card {
  margin-bottom: 10px;
  width: 400px;
  min-width: 400px;

}
.card > .socials > a {
  color: rgb(255, 255, 255);
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}

.card > .socials > a:hover {
  color: #707070;
  }
  .card > .socials a + a {
    margin-left: 5px;
  }

  .pfp2 {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    position: absolute;
    top: 30%;
    left: 39.2%;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
}    
.username2{
  color: white;
  font-family: lmao;
  position: absolute;
  top: 42.50%;
  left: 41%;
  font-size: 200%;
 
}
.callsign2{
  width: 25px;
  height: 25px;
  position: absolute;
  top: 46.50%;
  left: 41.5%;
 
}
.socials2{
  position: absolute;
  top: 50%;
  left: 39.6%;
  
    height: 5%;

}
.card2 > .socials2 a + a {
  margin-left: 5px;
}

.card2 > .socials2 > a{
  color: white;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}

.card2 > .socials2 > a:hover {
  color: #707070;
  }
  
  .pfp2:hover{
    transform : scale(1.1);
    -moz-transform : scale(1.1);
    -webkit-transform : scale(1.1);
    -o-transform : scale(1.1);
    -ms-transform : scale(1.1);
  }
  audio {
    visibility: hidden;
  }
  .pfp3 {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    position: absolute;
    top: 30%;
    left: 56.6%;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
}   
.username3{
  color: white;
  font-family: lmao;
  position: absolute;
  top: 42.50%;
  left: 58.4%;
  font-size: 200%;
} 
.callsign3{
  width: 25px;
  height: 25px;
  position: absolute;
  top: 46.50%;
  left: 59%;
}
.socials3{
  position: absolute;
  top: 50%;
  left: 58%;
    height: 5%;
}
.card3 > .socials3 > a{
  color: white;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}
.card3 > .socials3 > a:hover {
  color: #707070;
  }
  .pfp3:hover{
    transform : scale(1.1);
    -moz-transform : scale(1.1);
    -webkit-transform : scale(1.1);
    -o-transform : scale(1.1);
    -ms-transform : scale(1.1);
  }
  .card3 {
    margin-bottom: 10px;
    width: 400px;
    min-width: 400px;
  }
  .card3 > .socials3 a + a {
    margin-left: 10px;
  }