/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&family=Montaga&family=Oldenburg&display=swap');




    
 /* LAYOUT */     
      header, footer{
        color:white;
        width:100%;
        text-align:center;
      }
      
      #page{
      width:1100px;
      margin:auto;  
      
      }
      
      #spage{
        width:700px;
        margin:auto;
      }
      
      #container {
      display:flex;
      flex-wrap: wrap;
      width:100%;
      }
      
      
      
      #left{
      display:flex; 
      flex-direction:column;
        width:15%;
        
        }
      
      #right{
        width:15%;
      }
      
      main {
      display: flex;
      flex-wrap:wrap;
      width:70%;
      justify-content: space-evenly;
      }
      
      .small {
        width:100%;
      }
      
      
      
      #mcol1 {
        height:600px;
        width:47%;
        display: flex;
        flex-direction:column;
        justify-content: flex-start
      }
      
      #mcol2 {
        width:50%;
        display: flex;
        flex-direction:column;
        justify-content: flex-start;

        
      }
      

  
      
      .textbox {
        background-color:#cbade0; 
        border-radius:10px;
        box-shadow: 3px 3px #785094;
        margin-bottom:10px;
        padding:15px;
        
      }
      
      .smallbox{
        width:90%;
        padding-left:25px;
        padding-right:25px;
      }

      
      #hello {
        height:auto;

      }
      
      #featured {
        height:460px;
        overflow:auto;

      }
      
      
      nav {

      text-align:center;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-evenly;
      margin:10px;
      }
      
      

  nav a {
  text-align:center;
  line-height: 1.5;
  background-color: #785094;
  padding:8px;
  width:14.215%;
  text-decoration:none;
  border-radius:10px;
  color: orange;
}

  nav a:hover {
  background-color:#5738a6;
}
      
      
      /* */
      
      a {
        color:#5738a6;
      }
      
      a:hover {
        text-decoration: none;
      }
      
      h1 {
        text-align:center;
        font-size:3em;
      }
      
      body {
    font-family: "gideon roman", sans-serif;
    font-weight: 400;
    font-style: normal;
      }
      
      .button{
        width:90%;
      }
      
      .blinkie{
        width:100%;
      }
      
      .foot{
        background-color:#785094;
        border-radius:10px;
        padding:10px;
      }
      
      a.foot {
        color:orange;
      }

.zoom:hover {
  transform: scale(2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  box-shadow: 0 0 10px black;

}


.smallzoom:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */


}



@media only screen and (max-width: 1100px) {
  #page{
   width:880px;
  }
  
  #mcol1 {
    width:45%;
  }
  
  #hello {
    height:auto;
  }
  
  #featured {
    height:390px;

  }
  
  #mcol2 {
    height:auto;

  }
  
}

@media only screen and (max-width:880px) {
  
  #page, main{
    width:100%;
  }
  
  #left {
    width:100%;
    flex-direction:row;
  }
  
      .button{
        width:20%;
      }
      
    
  #right {
    width:100%;
  }    
       .blinkie{
        width:50%;
      }
  
  #hello{
    height:auto;
  }
  

  
  #mcol1, #mcol2 {
    width:100%;
    flex-direction:row;
    height:auto;
    flex-wrap:wrap;
  }
  
  #featured{
    height:500px;
    width:100%;
  }
  
  .textbox{
    width:100%;
    margin:5px;
  }
  
  nav a{
    width:28%;
    margin:2px;
    font-size:.8em;
      line-height: 1.5;

  }
}


@media only screen and (max-width:700px) {

      #spage{
        width:100%;
        margin:auto;
        
      }
      
      #smallbox {
        padding-left:10px;
        padding-right:10px;
      }
}