/*3d_transform.css*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h1 {
    font-size: 45px;
    padding: 10px;
}

main p {
    margin-top: 20px;
    margin-left: 10px;
}

nav,
header{
    padding: 20px;
        text-align: center;
        background: #341171;
}
nav,
a {
    color: rgb(112, 75, 165);
    opacity: 0.6;
    padding-top: 7px;
    padding-left: 10px;
    font-size: 30px;
}

nav,
a:hover {
    color: white;
    opacity: 1;
}

body {
    background: #b29dd2e3;
}
#platform {
    width: 200px;
    height: 350px;
    background-color: rgb(125, 87, 203);
    transform: translate(100px) rotateX(55deg) rotateZ(45deg);
    border-radius: 16px;
    box-shadow: 1px 2px 10px rgba(59, 27, 91, 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) rotateX(55deg) rotateZ(45deg);
    box-shadow: 1px 2px 10px rgba(139, 115, 188, 0.95), 
    60px 60px 24px rgba(54, 53, 54, 0.25);
}

@media screen and (max-width: 768px) {
    #platform {
        width: 180px;
        height: 255px;
    }
    h1{
        font-size: 25px;
    }
}