body{
  background-color: #101010;
  color: white;

  text-align: center;
  font-size: 300%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

header{
  background-color: #0a0a0a;

  img{
    width: 304px;
    height: 304px;
  }
}

h1,h2,h3,h4,h5,h6,p{
  margin: 0;

  text-shadow: 0px 2px 0px #ff0033;
}

h1{
  font-size: 300%;
}

h2{
  color: #ff0033;

  text-shadow: none;
}

a{
  color: white;
  text-decoration: none;
}

#imath{
  background-color: #00000000;
  border-radius: 48px;

  transition: 0.2s ease;
}

#imath:hover{
  background-color: #ff005190;
  scale: 110%;
}

ul{
  display: flex;
  flex-wrap: wrap;
  gap: 72px;
  padding: 0;
  justify-content: center;
  align-items: center;

  h4{
    margin: 12px;
  }
}

li{
  background-color: #202020;

  width: 30%;
  height: 30%;

  display: flex;
  flex-direction: column;

  border-radius: 48px;
  border: 4px solid #ff0033;
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8);

  transition: 0.2s ease;

  img{
    width: 80%;
    height: 80%;
    
    border-radius: 48px;
    border: 4px solid rgba(0,0,0,0.5);
  }
}

li:hover{
  border: 8px solid #1eff00;
  scale: 110%;
}

.box{
  padding: 72px;
}

.socials a{
  width: 408px;
  height: 408px;

  img{
    width: 8%;
    height: 8%;
    border-radius: 100%;
    border: 4px solid #ff0059;

    transition: 0.2s ease;
  }
}

.socials a:hover img{
  scale: 125%;

  border: 8px solid #00ff44;
}