body {
overflow-x: hidden;
overflow-y: visible;
background-image: linear-gradient(to right, black, blue, purple);
}

.mainbar {
position: fixed;
background-color: #0202d4;
width: 100%;
height: 54px;
top: -8px;
left: 0px;
}

img:not([class]):not([id]) {
position: relative;  
height: 250px;
width: 250px;  
top: 0vh;
left: 0vw;
}

.mainbar2 {
position: fixed;
top: 46px;
left: 0px;
background-color: #c9eeff;
width: 100%;
height: 27px;
}

.search {
position: absolute;
left: 180px;
width: 180px;
height: 30px;
top: 15px;
}

h1 {
position: absolute;
font-family: arial;
left: 10px;
top: -10px;
}

.content {
background-color: transparent;
display: flex;
position: absolute;
top: 28px;
left: 0px;
width: 100vw;
height: 100vh;
}

.CD {
opacity: 0.2;
position: fixed;
z-index: 0;
left: 80vw;
height: 800px;
top: 10vh;
animation: rotation 3s linear infinite;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ND {
position: relative;
display: block;
height: 250px;
width: 250px;
left: 2%;
top: 10%;
border-radius: 5px;
}

.F {
position: relative;
display: block;
height: 250px;
width: 250px;
left: 4%;
top: 10%;
border-radius: 5px;
}

.M {
position: relative;
display: block;
left: 6%;
width: 250px;
height: 250px;
background-color: grey;
top: 10%;
border-radius: 5px;
}

.content .NDh1 {
position: absolute;
top: 240px;
left: 0%;
}

.content .Fh1 {
position: absolute;
top: 580px;
left: 18.5%;
}

.content .Mh1 {
position: absolute;
top: 570px;
left: 17.5px;
}

#back {
width: 100px;
height: 25px;
background-color: white;
color: black;
font-family: arial;
border-radius: 35px;
border: none;
text-decoration: none;
}

.content .area {
position: absolute;
width: 250px;
left: 18.5%;
}