*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a:link{
    transition: color 1.2s;
}


#subtitle h3{
        margin: auto;
    }

.grid{
     position: relative;
    display: grid;
    gap: 0.482rem;
    grid-template-columns: 1fr;
    padding: 0.482rem;
    z-index: 2;
}    

.exercises img{
    opacity: 0.25;
    transition: opacity 700ms;
}

img:hover{
    opacity: 1;
}

#platform {
    width: 400px;
    height: 400px;
    background-color: black;
    transform: translate(100px) rotateX(50deg) rotateZ(55deg) scale(0.7);
    border-radius: 16px;
    box-shadow: 1px 2px 10px rgba(204 204 204 /0.95), 44px 44px 24px rgba(204 204 204/ 0.25);
    transition: 1s ease-in-out transform, 0.5s ease-in-out box-shadow;
}

#platform:hover {
    transform: translateX(100px) translateY(-24px);
    box-shadow: 1px 2px 10px rgba(204 204 204 / 0.95), 60px 60px 24px rgba(204 204 204/ 0);
}

.cls-1 {
        fill: #000000;
      }

      .cls-2 {
        fill: #29cfec;
      }

      .cls-3 {
        fill: #29adec;
      }

      .cls-4 {
        fill: #298aec;
      }



.keyframes{
    width: 30vw;

}      

    #bottom{
    animation: rotate 30s ease-in-out infinite alternate;
    }

    #mid{
    animation: rotate 25s ease-in-out infinite alternate-reverse;
    }

    #top1{
    animation: rotate 20s ease-in-out infinite alternate;    
    }

    #monogram{
    animation: scale 4s ease-in-out infinite alternate;        
    }


    




    @keyframes scale{
        from {
            transform-origin: center center;
            transform: scale(0.9);
        }
        to {
            transform-origin: center center;
            transform: scale(1);
        }
    }

    @keyframes rotate {
        from {
            transform-origin: center center;
            transform: rotate(0deg);
        }
        to {
            transform-origin: center center;
            transform: rotate(720deg);
        }
    }

@media screen and (min-width:500px) {
    
    #title {
    width: 214px;
    height: 54px;
    font-size: 0.85rem;
    right: 5vw;
    top: 3vh;
    }
    #subtitle {
        top: 10.2vh;
        right: 10vw;
        height: 34px;
        width: 129px;
        font-size: 0.6rem;
    }
    .linku{
        top: 38px;
        left: -159px;
        width: 500px;
        height: 120px;
    }
    /* header {
    margin-bottom: vh;
    } */

    .grid{
    grid-template-columns:1fr;

}  
}

@media screen and (min-width:700px) {
    
     #title {
    width: 320px;
    height: 80px;
    font-size: 1.3rem;
    }
    #subtitle{
        top: 13.2vh;
        right: 9vw;
        height: 51px;
        width: 193.5px;
        font-size: 1rem;
    }
    
    .linku{
        top: 38px;
        left: -159px;
        width: 500px;
        height: 120px;
    }
    /* header {
    margin-bottom: vh;
    } */
    
    .grid{
    grid-template-columns:1fr 1fr;

}  

}

@media screen and (min-width:1100px) {
    #title {
    width: 534px;
    height: 134px;
    font-size: 2.2rem;
    }
    #subtitle{
        top: 19.2vh;
        right: 10vw;
        height: 85px;
        width: 322.5px;
        font-size: 1.7rem;
    }
    .linku{
        top: 38px;
        left: -159px;
        width: 500px;
        height: 120px;
    }
    header {
    margin-bottom:40vh;
    }

    .grid{
    grid-template-columns:1fr 1fr;

} 
}