a:hover{
    color: rgb(22, 154, 95);
}
a:link{
    transition: color 0.5s;
}

/* perserve 3d is very very important and extremely necessary */
#platform{
    width: 200px;
    height: 200px;
    background-color: rgb(188, 142, 142);
    transform: translate(100px) rotateX(55deg) rotateZ(45deg);
    transform-style: preserve-3d;
    border-radius: 16px;
    box-shadow: 1px 2px 10px rgba(50, 50, 50, 0.95), 
      44px 44px 24px rgba(0, 0, 0, 0.75);
    transition: 0.5s ease-in-out  transform, 0.5s ease-in-out box-shadow;
}

#platform:hover{
    transform: translateX(100px) translateY(-24px) rotateX(55deg) rotateZ(45deg);
    box-shadow: 1px 2px  10px rgb(78, 78, 78, 0.95), 
      70px 70px 24px rgba(78, 78, 78, 0.65);
}

#platform p {
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(90px) translateZ(6px) rotateX(90deg) rotateY(90deg) rotateZ(180deg);
    transition: 0.6s ease-in-out opacity 20;
}

#platform:hover p{
    opacity: 1;
    text-shadow: rgb(78, 78, 78, 0.95);
}

footer{
    text-align: center;
    padding: 15px;
    bottom: 0;
    position: fixed;
    width: 100%;
    justify-content: end;
    gap: 2.074rem;
}