@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;
}

html {
  height: 100%;
  width: 100%;
  min-width: 100%;
  background-color: #727482;
}


/* @media - use this as an indicator for the different screen sizes*/

/* for phones and other narrow screen sizes */
@media (min-width: 280px) and (max-width:540px){
  body{
    background-color: white;
  }
}

/* @media END */


.flex{
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexcol {
  flex-direction: column;
}

.flexrow {
  flex-direction: row;
}

.flexwrap{
  flex-wrap: wrap;
}

.center{
  margin: auto;
  text-align: center;
}
/*  */
@font-face {
  font-family: Inter;
  src: url(fonts/Inter-VariableFont_slnt\,wght.ttf);
}


/*  */
#header{
  background-color: white;
  padding: 15%;
}


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


.teams{
  justify-content: space-evenly;
  align-items: flex-start;
}

#imgW{
  /* min-width: 150px;
  height:200pt; */
  margin:10px;
  display: flex; 
  justify-content: center;
  align-items: center;
  background-color:#fffec6;
}

#img{
    opacity:1;
    z-index: 1;
    height: 300px;
    width: 300px;
    object-position: center 25%;
    object-fit: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#img:hover{
    opacity:0.2;
    transition: 500ms;
}

#text{
  color: #252525;
  z-index: 0;
  position: absolute;
  margin: 0;
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 100px;
} 
h3{
   font-family: 'Montserrat';font-size: 22px;
  margin-bottom: 10px;
}




/*  */
#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  */