@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');

p, h1,  h2, h3, h4, h5, h6{
  color: #252525;
}

/* MENU STYLINGS */
.sidebar{
    height: 100%; 
    width: 0; /* changed w/JS */
    position: fixed; 
    z-index: 1; 
    top: 0;
    left: 0;
    background-color: #111; 
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; 
    transition: 0.5s; 
}

  .sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

  /* When you mouse over the navigation links, change their color */
  .sidebar a:hover {
    color: #f1f1f1;
  }

  /* Position and style the close button (top right corner) */
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

  /* The button used to open the sidebar */
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
  }

  .openbtn:hover {
    background-color: #444;
  }

  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main {
    transition: margin-left .5s; /* If you want a transition effect */
    padding: 20px;
  }

  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }


/* USED TUTORIAL: https://youtu.be/1TZjgQ0Osic?si=5nkqBtrg11tdUq_7  */
/* MENU STYLINGS */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.menu{
  height: 100%; 
  width: 180px; 
  position: absolute;
  background-color:#d9d9d9;
  transition: 0.5s ease;
  transform: translateX(-180px);
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:"slnt" 0;
}
.menu h1{
  text-align:right;
  padding: 10px 0;
  padding-right: 25px;
  pointer-events: none;
  padding-top:15px;
}
.menuTitle{
  color: black;
  font-weight: 800;
}
ul li{
  list-style: none;
} 

ul li a{
  color: black; 
  font-weight: 500;
  padding: 15px 0;
  display:block; 
  text-transform: capitalize; 
  text-decoration: none;
  transition: 0.2s ease-out;
}
ul li:hover a{
  background-color: black;
  color: #d6d6d6;
}

ul li a i{
  width: 40px;
  text-align: center;

}

input{
  display:none;
  visibility: hidden;
  -webkit-appearance: none;
}
.toggle{
  position: absolute;
  height: 37px;
  width: 37px;
  top: 20px;
  left: 15px;
  z-index: 1;
  cursor: pointer;
  border-radius: 2px;
  background-color:#d6d6d6;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);

}
.toggle .common{
  position: absolute;
  height: 2px;
  width:25px;
  background-color:black;
  border-radius:50px;
  transition: 0.3s ease;
}
.toggle .t-line{
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toggle .m-line{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toggle .b-line{
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input:checked ~ .toggle .t-line{
  left: 2px;
  top:14px;
  width:31px;
  transform: rotate(45deg);
}
input:checked ~ .toggle .m-line{
  opacity:0;
  transform: translateX(20px);
}
input:checked ~ .toggle .b-line{
  left: 2px;
  top:14px;
  width:31px;
  transform: rotate(-45deg);
}
input:checked ~ .menu{
  transform: translateX(0);
  box-shadow: 0 0 10px rgba(0,0,0,0.5); 
}
/* https://www.w3schools.com/css/css3_box-sizing.asp */
/* END MENU STYLINGS */

.line{
  display: flex; 
  flex-direction: row;
  margin-top: 35px;
  justify-content: space-around;
}
/* BORDER FOR DEVELOPMENTAL PURPOSES - WILL REMOVE*/
.picAndp{
  
  display:flex; 
  flex-direction:row;
  margin: 10px;
  padding: 7px;
  align-items:center;
}

.picAndp img,p{
  width: 210px;
}

.picAndp img{
  padding-right: 10px;
}

/* not working  */
p{
  font-family: "Afacad", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#full{
  margin: 0px auto;
  max-width: 60%;
}

.picAndp:hover{
  box-shadow: 0 0 8px rgba(0,0,0,0.3); 
  /* background-color:white; */
}



/*  */
#footer{
  background-color: #47557F;
  padding: 3%;
}

#footer button{
  border-radius: 100px;
  font-family: "Bebas Neue", sans-serif;
  background-color: #F0E29B;
  border: none;
  padding: 1% 2% 1% 2%;
  /* text property */
  color:white;
  text-shadow: 1px 1px black;
  font-size: 150%;
  text-align: center;
  /* positioning */
  margin-left: 1%;
  margin-right: 1%;

}

/* dynamics*/

#footer button:hover{
  /* transition time */
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  /*  */
  cursor: pointer;
  font-size: 170%;
  box-shadow: 0px 0px 10px #F8F6F0;

}

#footer button:not(:hover){
  /* transition time */
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  /*  */
}
/*  */

ion-icon{
  color: #252525; 
  width: 35px; 
  height: 35px;
  margin-left: 10px;
  margin-right: 10px;
}

@media (min-width: 285px) and (max-width:540px){

  #footer button{
    border-radius: 100px;
    border: none;
    padding: 3% 5% 3% 5%;
    /* text property */
    font-size: 120%;
    text-align: center;
    /* positioning */
    margin-left: 1%;
    margin-right: 1%;

  }

  /* dynamics*/

  #footer button:hover{
    /* transition time */
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    /*  */
    cursor: pointer;
    font-size: 118%;
    box-shadow: 0px 0px 15px #ffffff;

  }

  #footer button:not(:hover){
    /* transition time */
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    /*  */
  }

  /*  */

  ion-icon{
    color: #252525; 
    width: 25px; 
    height: 25px;
    margin-left: 5px;
    margin-right: 5px;
  }

}

/* SPECIAL CASE FOR THE GALAXY FOLD // THE PHONES TOO SKINNY */
@media (min-width: 280px) and (max-width:284px){

#footer button{
  border-radius: 100px;
  border: none;
  padding: 3% 5% 3% 5%;
  /* text property */
  font-size: 95%;
  text-align: center;
  /* positioning */
  margin-left: 1%;
  margin-right: 1%;

}

/* dynamics*/

#footer button:hover{
  /* transition time */
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  /*  */
  cursor: pointer;
  font-size: 98%;
  box-shadow: 0px 0px 15px #ffffff;

}

#footer button:not(:hover){
  /* transition time */
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  /*  */
}

/*  */
  ion-icon{
    color: #252525; 
    width: 20px; 
    height: 20px;
    margin-left: 5px;
    margin-right: 5px;
  }

}

/* end of media  */
.img_fill{
  overflow: hidden;
  min-height: 100%;
  min-width: 100%;
  margin: auto !important;
  object-fit: cover;
}