/* keyframe.css*/

a:hover{
    color: orange;
}
a:link{
    transition: color 0.5s;
}

p{
    color: white;
}

#platform{
    width: 200px;
    height: 350px;
    background-color: rgb(124, 0, 0);
    transform: translate(100px) rotateX(55deg) rotateZ(45deg);
    transform-style: preserve-3d;
    border-radius: 16px;
    box-shadow: 1px 2px 10px rgb(78, 78, 78, 0.95), 
      44px 44px 24px rgba(78, 78, 78, 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;
}

#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;
}