@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
  font-family: DooM;
  src: url(DooM.ttf);
}

@keyframes pfpanim {
  0% {transform: translate(-100px,0px);}
  100% {transform: translate(100px,0px);}
}

@keyframes freakfield {
  0% {transform: translate(-0px,0px);}
  100% {transform: translate(300px,0px);}
}

.pfp {
  background-image: url("icon.png");
  background-size: cover;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  border-style: solid;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation-name: pfpanim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  color: black;
}



.zoom {
    padding: 50px;
    background-image: linear-gradient(-50deg,#24ffa8,#00ddff);
    transition: transform .2s; /* Animation */
    width: 500px;
    height: 140px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border-style: outset;
    border-width: 5px;
    color: black;
  }
  
  .zoom:hover {
    transform: scale(1.05); 
  }

  .zoom h2{
    transition: transform .5s, text-shadow .5s; /* Animation */
    position: absolute;
    transform: translate(0px,-95px);
    text-shadow: 0px 0px 0px ;
    text-wrap: nowrap;
  }

  .zoom:hover h2 {
    transform: scale(1.2) translate(0px,-80px);
    text-shadow: 2px 2px 2px #00000082;

  }

.subzoom {
    background-color: white;
    padding: 0px;
    width: 140px;
    height: 140px;
    margin: 23px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border-style: inset;
    border-width: 4px;
  }

  .subzoom img{
    transition: transform 0.5s, filter 0.5s; /* Animation */
    transform: perspective(150px);
    width: inherit;
    height: inherit;
    transform-style: preserve-3d;
    transition-timing-function: ease-in-out;
  }
  
  .subzoom:hover img{
    transform: translate(0px,-140px);
    filter:brightness(60%)
  }


  .subzoom p{
    transition: filter 0.5s, transform 0.5s, text-shadow 0.5s;
    width: inherit;
    height: inherit;
    position: absolute;
    text-wrap: wrap;
    transition-timing-function: linear;
    filter: blur(3px);
    font-size: small;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    transform: scale(0.95);
    text-shadow: 0px 0px 0px #ababab;
    font-weight: bold;
    flex-direction: column;
  }

  .subzoom:hover p {
    filter: blur(0px);
    transform: scale(1.1);
    text-shadow: 5px 5px 5px #ababab;

  }

.burgerboy {
  z-index: 500;
  position:fixed;
  left: 10px;
  bottom: -1px;
}

.burgerboy a {
  visibility: hidden;
}
.burgerboy:hover a {
  visibility: visible;
}

a.profbutton {
  transition: transform .2s, box-shadow .2s;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0px 0px 0px #00000052;
}

a.profbutton:hover {
  transform: scale(1.2);
  box-shadow: 3px 3px 3px #00000052;
}

a.profbutton img {
  width: 20px;
  position: absolute;
  border-radius: 7px;
}

.buttons {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width:600px;
}

body {
  font-family: "Shantell sans";
  color: white;
  }
h1 {
  font-family: "DooM";
}
h2 {
  font-family: "DooM";
}

.bg {
  background-image: linear-gradient(50deg,green,#004cff);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1000000;
}

.svg-container {
  display: flex;
  align-items: center; /* Vertically center content */
  gap: 5px
}

button {

    background-color: #659165; 
    color: white; 
    padding: 3px 7px; 
    border: 0 solid black;
    border-radius: 100px;
    cursor: pointer;
    font-family: Arial, sans-serif; 

    transition: background-color 0.2s ease;
}

button:hover {
  background-color: #7bb87b;
}

button:active {
  background-color: #4c614c;
}

button.negative {

    background-color: #916565; 
}

button.negative:hover {
  background-color: #b87b7b;
}

button.negative:active {
  background-color: #614c4c;
}

.controls-inline {
  display: inline-block;
}

input[type="text"].speechbubble {
  border: 0px solid;
  outline: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  padding: 3px 7px; 
  border-radius: 100px;
  width: 400px;
  color: #575E75;
}

input[type="checkbox"]:checked {
  accent-color: #659165;
}