/* FONT SHIT */ 
    @font-face {
      font-family: 'handwritefont';
      src: url('/Assets/fonts/C2_handwritefont-Regular.woff');
    } 
    @font-face {
      font-family: 'thickhandwrite';
      src: url('/Assets/fonts/Handwriting-Regular.woff');
    }  
   
   h1{
    font-size:90px;
    font-family: handwritefont;
     
   }
   p {
     font-family: handwritefont;
   }
   
   
/*HEADING*/

  body {
  background-image: url('/Assets/Backround.png');
  background-repeat: repeat; /* Prevents image tiling */
  background-position: center; /* Centers the image within the container */
  background-size: auto; /* Scales the image to cover the entire container without distortion, though some cropping may occur */
  position:absolute;
} 
  a {
  text-decoration: none;}
  #allsections{
  display:flex; 
  min-width: 0px;
  justify-content:center;
    flex-direction:row;
    flex-wrap: wrap;
    height:auto;
    margin:5px;
  }
  #header{
     display:flex;
    order:-1;
    flex-direction:column;
    }
  #logobox img {
  display:flex;
  order:1;
  min-width: 0px;
  width: 30%; 
  height: auto;
  flex-wrap:wrap;
  justify-content:center;
  align-self:center;
 
  z-index:-1;
  }
  #logobox {
  display:flex;
  order:1;
  justify-content:center;
  align-self:center;
   min-width: 0px;

  }
  .navbar {
  display:flex;
  order:2;
  justify-content:center;
  align-self:center;
  position:relative;
   flex-wrap:nowrap;
  flex-direction:row;
  }
  .navbar  ul{
      list-style-type: none;
      display:flex;
  flex-wrap:nowrap;
  flex-direction:row;
  text-decoration:none;
  align-self:baseline;
  white-space: nowrap;
  justify-content:space-evenly;
  text-align: center;
  font-weight: bold;  
  font-size: 20px;
  font-style: italic;
  font-family: monospace;
   background-color: #ffe268;
    background-repeat: repeat; 
    background-position: center; 
    background-size: auto; 
  margin:0px;
  padding:5px;
  gap:20px;
      }     
  .navbar li::before {
  /* look up 'css code symbols' for more symbols */
  content: "\2605"; 
}
  .navbarl:hover {
  transform:translateY(5px);
  }
/*END OF HEADING*/

  /*FOOTER*/
#footer-box {
  display:flex;
  order:10;
  width:100%;
  height:30%;
   border: 100px solid transparent;
    border-image-slice: fill;
    border-image-source: url('/Assets/smallboarder2.png');
    border-image-slice: 660; 
    border-image-repeat: round;
}
#pfp img{
  width:20%;
  align-self:flex-start;
}
#pfp {
  display:flex;
  width:20%;
  align-self:flex-start;
  margin-bottom:-10px;
  margin-right:3px;
}
#contact-list  ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  justify-content:space-between;
  align-self:baseline;
  position:relative;
  left:-7%;
}

 #contact-list li::before {
  /* look up 'css code symbols' for more symbols */
  content: "\2605"; 
  margin:3px;
}
#contact-list  {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin:5%;
  justify-content:space-evenl;
  position:relative;
  left:-34%;
  color: #ffe268;
  margin-top:10%;
  font-size:30px;
  margin-bottom:0px; 
}
.footer-img img{
  display:flex;
  width:10%;
  margin:2px;
}
#footer-txt  {
  position:relative;
  left:5%;
  display:flex;
  width:auto;
  white-space: nowrap;
} 

 @media ( max-width: 550px) {
 
   #logobox  {
    width:350%;
  }
  .navbar ul{
    font-size:14px;
    gap:5px;
  }
  #main-content{
    display:flex;
    width:auto;
  }
  


  /*FOOTER*/
  #footer-box {
    display:flex;
    width:200%;
    border:none;
    background-color: #ffe268;
  }
  
  #pfp {
  display:flex;
  width:30%;
  align-self:flex-start;
  margin-bottom:-10px;
  margin-right:3px;
  }

  h1 {
  display:flex;
  display:relative;
  flex-shrink:2;
  font-size:40px;
  margin:0px;
  width:0px;
  } 
  #footer-txt  {
  display:flex;
  width:auto;
  display:relative;
  margin-top:7%;
  margin-left:0%;
 white-space: nowrap;
  } 
  .footer-img img{
  width:10%;
  margin:0px;
  }
    .footer-img {
      width:15%;
  }
  #contact-list {
  display:flex;
  flex-direction:column;
  width:100%; 
  margin-top:15%;
  left:-15%;
  color:black;
  font-size:90%;
  }
}