body {
  
  background-image: url("https://i.postimg.cc/GpgYnFxt/f6fb9143ad8de461a8fe2c8d4e42de55.jpg");
  background-size: 100% 100%;
  color: black;
    background-attachment: fixed;
    background-position: center;

  
}


.container {
  
  
  max-width: 1200px;
  
}

aside {
  
  width: 250px;
  
}

header {
  
  background-image: url("https://i.postimg.cc/RhQj9S42/1c312beaf247b78619edda11d47dfa99.jpg");
  background-position: center;
  background-size: 100% 100%;
}

footer {
  
  margin-top: 10px;
  
}

main, .window active, .window-body has-space {
  
  border: none;
    order: 2;
    padding: 0;
    display: flex;
    flex: 1;
     margin: 0;
                }


  main p, main h1, main h2, main  h3 {
    
    padding: 5px;
    color: black;
  }

nav, nav a, nav a:hover {
  
  color: black;
  padding: 0;
  border: none;
  text-decoration: none;
  margin: 0;
  display: flex;
  flex-direction: column; 
    align-items: stretch;
  justify-content: center;

  
}



.button {
  position: relative;
  clip-path: inset(0 round 50px); 
  padding: 18px 45px;
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  color: white;
   display: block; 
   width: 100%;
  margin-bottom: 4px;
  text-decoration: none;
  text-align: center;
  border-radius: 50px;
  outline: none;
  background: linear-gradient(
    to bottom, 
    #7a7aff 0%,   
    #1919F7 50%,  
    #0d0dbd 51%,  
    #1111d4 75%,  
    #05057a 100%  
  );
    
  border: 2px solid #05054d;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -4px 6px rgba(0,0,0,0.4),
    0 4px 8px rgba(0,0,0,0.5);
    
  cursor: pointer;
  
  transition: none;
}

  
 
.button a {
  
  text-decoration: none;
  
}

aside, footer {
  
background: rgba(0, 210, 70, 0.65);    
  backdrop-filter: blur(12px);   
  -webkit-backdrop-filter: blur(12px);   
  border: 1px solid rgba(150, 255, 180, 0.4);   
  border-top: 2px solid rgba(255, 255, 255, 0.7);   
  box-shadow:      
    inset 0 1px 2px rgba(255, 255, 255, 0.6),       
    inset 0 -4px 10px rgba(0, 0, 0, 0.4),             
    0 4px 15px rgba(0, 0, 0, 0.3);                 
  background-image: linear-gradient(     
    to bottom,     
    rgba(255, 255, 255, 0.3) 0%,     
    rgba(255, 255, 255, 0.15) 50%,     
    rgba(0, 0, 0, 0.0) 50.1%,     
    rgba(0, 0, 0, 0.15) 100%   
  ); 
  
  
  
  
}



.title-bar {
margin-bottom: 8px;
    
}

.worldsimages img {
  
  max-width: 70%;
  width: 70%;
  
}


main ul {
  list-style: none;
  margin: 0;
}

main li {
  display: block;
  padding: 6px;
  font-size: 20px;
    

  
}
  


            @media only screen and (max-width: 800px) {
              
              body {
                
              background-size: cover;
              
              }
              
              
main, .window active, .window-body has-space {
     
max-width: 100%;
overflow: auto;
display: flex;
   -scroll-snap-align: start;
  -scroll-snap-stop: always;
                    flex: 0 0 100vw;
                }
                
header {
  
  background-size: cover;
 
}
}




#background-wrap {
    bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}


@-webkit-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}


.x1 {
    -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: -5%;
	top: 5%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x2 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 5%;
	top: 80%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x3 {
    -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 10%;
	top: 40%;
	
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	transform: scale(0.7);
}

.x4 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 20%;
	top: 0;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x5 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 30%;
	top: 50%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x6 {
    -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 0;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}

.x7 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 65%;
	top: 70%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x8 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 80%;
	top: 10%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x9 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 90%;
	top: 50%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x10 {
    -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 80%;
	top: 80%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}


.bubble {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	
    height: 200px;
	position: absolute;
	width: 200px;
}

.bubble:after {
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); 
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); 
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	
	content: "";
    height: 180px;
	left: 10px;
	position: absolute;
	width: 180px;
}