/* 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." */

/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

dark blue      bbg              #1B2847

*/

@font-face {
    font-family: 'Pixel-Reg'; 
    src: url(' Fonts/DePixelBreit.ttf'); 
}
@font-face {
    font-family: 'Header'; 
    src: url('Fonts/BMSTA___.TTF'); 
}




body {
  background-image: url(Images/background_Clouds2.png);
  background-size: 100%;
  background-repeat:repeat;
  background-position: center;
  background-color: #DEEEFF;
  color: #133A9E;
  font-family: "Pixel-Reg";
  padding:8%;
}

body:hover{
 cursor:url('Images/Cursor_02.png'),pointer;
}

.Main {
  background-color: #DEEEFF;
  color: #133A9E;
  font-family: "Pixel-Reg";
  border-style:solid;
  border-radius:10px;
  
  
  margin:auto;
  padding:2%;
  max-width:1000px;
  max-height:600px;
  display:grid;
  grid-template-columns:3fr 7fr;
  grid-template-rows:100%;
  box-shadow:2px 3px #133A9E;
}

.Main:hover{
  cursor: url(Images/Cursor.png),pointer;
}

.Meat{
  border-style:solid;
  overflow:scroll;
  display:flex;
  flex-direction:column;
  align-content:flex-start;
  justify-content:center;
  padding:5px;
}

.Meat img{
 width:75%;
 margin:auto;
}


.Navigation{
  padding:5px;
  display:flex;
  flex-direction:column;
  align-content:flex-start;
  justify-content:flex-start;
  overflow:hidden;
  }
  
  .Navigation p{
    font-family:"Header",Arial, sans-serif;
    font-size:20px;
    text-align:center;
  }
  
.Navigation ul{
   list-style:none;
   max-width:200px;
   text-align:center;
}

.Navigation li{
  background: linear-gradient(135deg, #9aebf4 10%,#e4f5fc 28%,#c0f1f7 48%,#9aebf4 57%,#e4f5fc 62%,#9aebf4 72%);
  margin:20px;
  border:solid;
  border-radius:10px;
  border-color:#133A9E;
  box-shadow:2px 3px #133A9E;
  padding:5px;
}

.Navigation li:hover{
background: linear-gradient(135deg, #9aebf4 14%,#c0f1f7 20%,#e4f5fc 22%,#c0f1f7 26%,#9aebf4 47%,#9aebf4 50%,#e4f5fc 54%,#9aebf4 58%,#9aebf4 58%);
translate: 1px 1px;
box-shadow:1px 1px #133A9E;
cursor:url('Images/pointer.png'),pointer;
}
.Navigation a{
 text-decoration:none;
 color: #133A9E;
}
  
.Navigation a:hover{
 cursor:url('Images/pointer.png'),pointer;
}


@media only screen and (max-width:1000px) {
  .Main {
 display:grid;
 grid-template-columns:100%;
 grid-template-rows:30% 70%;
 justify-content:space-around;
 flex-wrap:wrap;
 height:fit-content; 
}

.Navigation ul{
   list-style:none;
   max-width:500px;
   text-align:center;
}

}