Menu Buttons Around Earth
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.earth {
background-image: url('earth.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.menu-button {
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
font-size: 16px;
font-weight: bold;
}
#btn1 { top: 10%; left: 50%; }
#btn2 { top: 50%; left: 80%; }
#btn3 { top: 90%; left: 50%; }
#btn4 { top: 50%; left: 20%; }
#btn5 { top: 20%; left: 80%; }
#btn6 { top: 80%; left: 20%; }
#btn7 { top: 80%; left: 80%; }