html {
    width: 100dvw;
    height: 100dvh;
}


body {
    color: #fafafa;
    background-size: 100% 100%;
    background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    background-image: radial-gradient(18% 28% at 24% 50%, #BC8FFDAD 6%, #FF4FD200 83%, #073AFF00 100%), radial-gradient(18% 28% at 18% 71%, #E0A8F2F5 6%, #073AFF00 100%), radial-gradient(70% 53% at 36% 76%, #D966D7FF 0%, #073AFF00 100%), radial-gradient(42% 53% at 15% 94%, #E0A8F2F5 7%, #073AFF00 100%), radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%, #073AFF00 100%), radial-gradient(18% 28% at 35% 87%, #9342DDFF 7%, #073AFF00 100%), radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%), radial-gradient(21% 37% at 72% 23%, #BA9EFFF5 24%, #073AFF00 100%), radial-gradient(35% 56% at 91% 74%, #FF4FD2F5 9%, #073AFF00 100%), radial-gradient(74% 86% at 67% 38%, #D6C6E6F5 24%, #073AFF00 100%), linear-gradient(127deg, #8A4FFFF5 1%, #4C00FCFF 100%);
    font-family: 'Signika';
    text-align: center;
}

h1 {
    font-size: 6rem;
}

h2 {
    font-size: 2rem;
    margin: -2%;
}

h3 {
    font-size: 1.5rem;
}

.cards {
    margin: 2%;
    padding: 4%;
    padding-bottom: 10%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10.5px);
    backdrop-filter: blur(10.5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow-wrap: normal;
    transition: all 400ms;
    overflow: hidden;
}

.cards:hover {
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.1);

}

#container {
    width: 74dvw;
    justify-content: center;
    align-content: center;
    margin: 5%;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36vmin, 4fr));
    gap: 20px;
    padding: 1em;
    max-width: 70rem;
}

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



.cards>img {
    border-radius: 16px;
    width: 90%;
    height: 90%;
    margin-top: 5%;
}


#skating>img {
    background-color: #915aff;
}

.centre>img {
    margin-top: 40%;
    width: 80%;
}

.centre {
    margin-left: 5%;
    border-radius: 16px;
    width: 90%;
    aspect-ratio: 1/1;
    margin-top: 5%;
}

#moustage>.centre {
    background-color: #8c6a4b;
}



#meaty>.centre {
    background-color: #FFFFFFFF;
}

#render>img {
    background-color: #dac9ad;
}

#sorry>.centre {
  background-color: rgb(173, 70, 99);
}

#sorry>.centre>img {

  border-radius: 16px;
  width: 60%;
  height: 90%;
  margin-top: 5%;
  aspect-ratio: 1/1;
}