* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;

}

body {
    display: flex;
    flex-direction: column;
    align-items: centr;
    position: relative;
    min-height: 100vh;
    background-image: radial-gradient(circle at center center, transparent 0%, rgb(0, 0, 0) 85%), linear-gradient(78deg, rgba(192, 192, 192, 0.05) 0%, rgba(192, 192, 192, 0.05) 50%, rgba(60, 60, 60, 0.05) 50%, rgba(60, 60, 60, 0.05) 100%), linear-gradient(227deg, rgba(97, 97, 97, 0.05) 0%, rgba(97, 97, 97, 0.05) 50%, rgba(52, 52, 52, 0.05) 50%, rgba(52, 52, 52, 0.05) 100%), linear-gradient(240deg, rgba(98, 98, 98, 0.05) 0%, rgba(98, 98, 98, 0.05) 50%, rgba(249, 249, 249, 0.05) 50%, rgba(249, 249, 249, 0.05) 100%), linear-gradient(187deg, rgba(1, 1, 1, 0.05) 0%, rgba(1, 1, 1, 0.05) 50%, rgba(202, 202, 202, 0.05) 50%, rgba(202, 202, 202, 0.05) 100%), linear-gradient(101deg, rgba(61, 61, 61, 0.05) 0%, rgba(61, 61, 61, 0.05) 50%, rgba(254, 254, 254, 0.05) 50%, rgba(254, 254, 254, 0.05) 100%), linear-gradient(176deg, rgba(237, 237, 237, 0.05) 0%, rgba(237, 237, 237, 0.05) 50%, rgba(147, 147, 147, 0.05) 50%, rgba(147, 147, 147, 0.05) 100%), linear-gradient(304deg, rgba(183, 183, 183, 0.05) 0%, rgba(183, 183, 183, 0.05) 50%, rgba(57, 57, 57, 0.05) 50%, rgba(57, 57, 57, 0.05) 100%), radial-gradient(circle at center center, hsl(351, 4%, 12%), hsl(351, 4%, 12%));

}

nav {
    margin: 25px;
    padding: 10px;
}

.menuItems {
    list-style: none;
    display: flex;
}


a {
    text-decoration: none;
    color: white;
    font-size: 20px;
    position: relative;
}

.menuItems li a:hover {
    color: rgb(245, 14, 85);
    transition: all 0.4s ease-in-out;
}

h1 {
    font-size: 40px;
    color: white;
    text-align: center;

}

h1:hover {
    color: #e0d811;
    transition: all 0.4s ease-in-out;
}


ul li {

    border-radius: 10px;
    padding: 30px;
    margin-left: 4%;
    text-align: center;
    cursor: pointer;
    transform: rotateY(-35deg) rotateX(15deg);
    border-bottom: 4px solid rgba(0, 0, 0, .2);
    border-right: 4px solid rgba(0, 0, 0, .2);

    transition: 0.4s;

}

ul li:nth-child(1) {
    color: #fff;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    top: -120px;
    left: 62%;
    z-index: 2;
}

ul li:nth-child(1) a:hover {
    color: #e0d811;
}

ul li:nth-child(2) {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    z-index: 1;
    top: 10px;
    left: 60.5%;
    color: white;
}

ul li:nth-child(2) a:hover {
    color: #e0d811;
}

ul li:nth-child(3) {
    color: #fff;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    top: 140px;
    left: 59%;
    z-index: 2;

}

ul li:nth-child(3) a:hover {
    color: #e0d811;
}

ul li:nth-child(4) {
    color: #fff;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    top: 270px;
    left: 57.5%;
    z-index: 1;

}

ul li:nth-child(4) a:hover {
    color: #e0d811;
}

ul li:nth-child(5) {
    color: #fff;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    top: 400px;
    left: 56%;
    z-index: 1;

}

ul li:nth-child(5) a:hover {
    color: #e0d811;
}

ul li:hover {
    transform: translateY(20px) rotateY(-35deg) rotateX(10deg) scale(1.2);
    z-index: 3;


}


footer {
    color: gray;
    text-align: center;
    border-top: solid;
    border-color: gray;
    margin-top: 59px;
    padding: 10px;
    font-style: italic;
}