* {
    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: 24px;
    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 {

    grid-template-columns: 20% auto;
    border-radius: 10px;
    padding: 30px;
    margin: 150px;
    margin-top: 230px;
    cursor: pointer;
    transform: rotateY(-35deg) rotateX(15deg);
    position: absolute;
    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;


}



.section1 {
    margin: 5px;
    margin-right: 650px;
    border: solid 2px;
    border-color: #a58c04;
    border-radius: 15px;
    /*background-image: radial-gradient(circle at top center, rgb(247, 242, 175), rgb(255, 198, 118), rgb(229, 160, 144), rgb(203, 150, 162), rgb(235, 137, 182));
    */
    background-image: url(../images/bitcoin%20dark%20gold%203.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    color: #ffffff;
    font-size: 20px;
    padding: 60px;
    text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;

}

h2 {
    text-align: center;

    ;
}

p {
    margin: 14%;
}

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