*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 1.44rem;
    line-height: 1.44;
    height: 100%;
}
h1{
    font-size: 4.209rem;
}
h2{
    font-size: 3.157rem;
}
h3{
    font-size: 1.777rem;
}
h4{
    font-size: 1.777rem;
}
pre, code {
    font-size: 1.2rem;
}

a:link{
    transition: color 0.5s;
}

body{
    background-color: darkslategray;
}
figure #css_img{
    opacity: 0;
    position: absolute 0;
}
figure:hover #css_img{
    opacity: 1;
}

figure #html_img{
    opacity: 1 ;
    position: absolute;
}
figure:hover #html_img{
    opacity: 0;
}

#platform{
    width: 200px;
    height: 350px;
    background-color: brown;
    transform:  translate(100px)  rotateX(55deg) rotateZ(45deg);
    transform-style: preserve-3d;
    border-radius: 16px;
    box-shadow: 1px 2px 10px rgba(204, 204, 204, 0.95), 44px 44px 24px rgba(204, 204, 204, 0.25);
    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 rgba(204, 204, 204, 0.95),
        70px 70px 24px rgba(204, 204, 204, 0.15);
}

#platform p{
    transform-style: preserve-3d;
    transform: translateY(120px) translateZ(40px) rotateX(-90deg) rotateY(92deg);
    opacity: 0;
    transition: 0.35s ease-in-out opacity;
}

#platform:hover p{
    opacity: 0.9;
    text-shadow: 2px 5px 6px rgba(204, 204, 204, 0.5);
}

#svg img{
    transform: translateX(400px);
        animation-name: truckmove;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
}

@keyframes truckmove{
    0% {
        transform: translateX(250px)
    }

    50% {
        transform: translateX(700px)
    }

    75%{
        transform: translateX(-450px);
    }

    83%{
        transform: translateX(900px);
    }

    100% {
        transform: translateX(250px);
    }
}

footer {
    width: 100vw;
    background-color: #2b356a;
    color: rgb(240 240 240 / 1);
    text-align: center;
}
