@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;
}

h1{
    color: whitesmoke;
    position: fixed;
    left: 43%;
    
    font-size: 700%;
    font-family: "hoho";
    cursor: no-drop; 
   font-size: 600%;
  }

  .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: 39.8%;
  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{
  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: 57%;
    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.8%;
  font-size: 200%;
} 
.callsign3{
  width: 25px;
  height: 25px;
  position: absolute;
  top: 46.50%;
  left: 59.5%;
}
.socials3{
  position: absolute;
  top: 50%;
  left: 58.5%;
    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;
  }