/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


:root {
 --main-bg-color: #2e4a72;
 --website-bg:#305683;
 --buttons:#4f80ba;
 --buttons-highlight:#386199;
 --border:#bd933d;
 --font:white;
 --highlight:#00668f;
 --highlight-color:#f2e396;
 
}


body {
  background-image: url('https://astrantia.neocities.org/website-resources/starpattern.png');
  background-color: #0f4684;
  color: var(--font);
  font-family: Verdana;
  
      margin: 0;
    padding: 0;
     scrollbar-color: white #386199;
     
     
     
     
     
        scrollbar-face-color: #EEC800;
   scrollbar-shadow-color: #006cb4;
   scrollbar-highlight-color:#006cb4;
   scrollbar-3dlight-color: #006cb4;
   scrollbar-darkshadow-color: #006cb4;
   scrollbar-track-color: #006cb4;
   scrollbar-arrow-color: #C1C1D1;

}
/* Holder here that lets mobile exist*/
.container{
  height:100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  
 


  }
ul {
  list-style-image: url('https://astrantia.neocities.org/website-resources/star-list.png');
    
}
   
  
  
@media screen and (min-width:1114px) {
  .m-menu {
    display:none;
  }
}


.footer-{    width:57.6%;
    
margin: auto;  display: flex;
  justify-content: center;
  align-items: center;}
  
  .banner{
    width:60%;height:100%;
    
    background:var(--main-bg-color);margin: auto
    }
    
      @media screen and (max-width: 1114px) {
        
          .banner{
            width:80%;
        
            
            }
        }
  
  /* main cards*/

.main-blocks{
width:60%;
background: var( --website-bg);


    display: flex;


  
  }
  
.mini-blocks{
  
  background-color:var(--main-bg-color); margin: 10px; padding:20px;height:300px;  border: 4px double var(--border);
  }
  
  @media screen and (max-width: 1548px) {
    
    .mini-blocks{
  max-width:100%;
 width:100%;
 
  }
    }
  
  
  
  
  
  
    /* main cards mobile*/
@media screen and (max-width: 1115px) {
  .main-blocks{
    width: 80%;
  }
}

  
  
  
  
      /* buttons*/
.button{
  

  padding:20px;
  background: var(--buttons);
    display: flex;
  justify-content: center;
  align-items: center;
  border-top: 4px double var(--border);
  
  
  }
  
  .button:hover{
    background:var(--buttons-highlight);
    cursor: pointer;
    }
    
    
    @media screen and (max-width: 1115px) {
      
      .nav-bar{
       display: none;
        
        }
      }
    
  

a:link {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}


/* highlighting*/
::selection {
    background-color: var(--highlight);
    color:var(--highlight-color);
}


::-moz-selection {
    background-color: var(--highlight);
    color: var(--highlight-color);
}


::-o-selection {
    background-color: var(--highlight);
    color: var(--highlight-color);
}

::-ms-selection {
    background-color: var(--highlight);
    color: var(--highlight-color);
}


::-webkit-selection {
    background-color:var(--highlight);
    color: var(--highlight-color);
}