* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

h4 {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
}

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

nav {
    background-color: #002205;
    height: 80px;
    align-content: center;
}

nav,
a {
    color: white;
    opacity: 0.6;
    padding-top: 7px;
    padding-left: 10px;
    font-size: large;
}

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

body {
    background: #b0c8b3e3;
}

div{
    display: block;
    margin-left: 10px;
    margin-top: 20px;
}

#rectangle{
    width: 200px;
    height: 300px;
    background-color: #0f2b13; transform-style: preserve-3d;
    transform: translate(100px) rotateX(55deg) rotateZ(45deg);
    border-radius: 50px;
    box-shadow: 1px 2px 10px #000a02, 34px 34px 15px #000a027e;
    transition: 0.5s ease-in-out transform, 0.5s ease-in-out box-shadow;
    z-index: 0;
   
}

#rectangle:hover{
    transform: translateX(100px) translateY(-24px) rotateX(55deg) rotateZ(45deg);
    box-shadow: 1px 2px 10px #000a02, 70px 70px 25px #000a026b;
}

#rectangle p{
    color: white;
    transform-style: preserve-3d;
    transform: translateY(141px) translateZ(67px) translateX(53px) rotateX(-114deg) rotateY(46deg) rotateZ(-23deg); 
    z-index: 1;
    text-shadow: 1px 0px 14px #94ffa9;
}