:root {
  --orange: #fa7d00f0;
  --light-gray: rgb(228, 228, 228);
  --pink: #ff8a0b;
  --light-green: #485348;
}

#heading{
  margin-left: 0.5vh;
}

#flowerImg:hover{
  background-color: white;
}

#core{
  background-image: url("../pictures/nordwood-themes-wt4gUtdv1-U-unsplash.jpg");
  margin-right: 0;
  margin-left: 0.5vh;
  background-size: cover;
}
#ducky{
  background-image: url("../pictures/problem-solving/nick-fewings-d5sK_-sVFSA-unsplash.jpg");
  margin-right: 0;
  margin-left: 0.5vh;
  background-size: cover;
}
#tech{
  background-image: url("../pictures/kobu-agency-ipARHaxETRk-unsplash.jpg");
  margin-left: 0.5vh;
  margin-right: 0;
  background-size: cover;
}

#tech1{
  background-image: url("../pictures/jj-ying-WmnsGyaFnCQ-unsplash.jpg");
  background-size: cover;
}

#jsImage{
  background-image: url("../pictures/claudio-schwarz-i25aqE_YUZs-unsplash.jpg");
  background-size: cover;
  margin-left: 0.5vh;
}

#eQ{
  all:initial;
  justify-content: center;
  font-size: 0.5em;
}

a{
  text-decoration: none;
  color: var(--light-gray);
  font-size: 0.75em;
  text-align: center;
}


html {
  box-sizing: border-box;
}
body {
  background-color: #fa7d00f0;
  background-size: 100vw;
  display: flex;
  min-height: 100vh;
  width: 100vw;
}
li{
  background-color: white;
  border-radius: 10px;
  padding: 10px 10px;
  font-family: 'Saira Condensed', sans-serif;
  font-size: 5vh;
  width: 50%;
  color: var(--light-gray);
  text-align: justify;
  align-content: center;
  object-fit: cover;
  transition: 1s;
}
li:hover{
  background-color: var(--orange);
  color:white;
}

span{
  color: var(--orange);
}
span:hover{
  color:white;
}

.code{
  background-color: #b5b5b5d1;
  color:white;
  border-radius: 10px;
}
.code:hover{
  background-color: var(--orange);
}

.h1{
  display: flex;
  margin:0;
  color:white;
  justify-content: flex-end;
  font-family: 'Saira Condensed', sans-serif;
  font-size: 0.75em;
  padding: o;
  line-height: 0.3em;
  
}



.divider{
  display: flex;
  width:100vw;
  background-color: var(--light-gray);
  border-radius: 10px;
  font-family: 'Saira Condensed', sans-serif;
  font-size: 3vw;
  color: white;
  align-content:center;
  justify-content: center;

  padding: 2vh 0;
}


.initial{
  all:initial;
  list-style: none;
  font-size: 0.5em;
}
.threeSpaces{
  display: flex;
  flex-direction: row;
  background-color: white;
  border-radius: 10px;
  padding: 30px 30px;
  height: 40vh;
  width:33%;
  justify-content: center;
  align-content: center;
  margin-right: 0.5vh;
  
}

.threeSpaces:nth-of-type(1){
  font-size: 13vh;
  color: var(--orange);
  background-color: #a3a19f;
}


.threeSpaces:nth-of-type(2){
  font-family:sans-serif; 
  color:rgb(118, 117, 117);
  font-size: 2.5vh;

}
.threeSpaces:nth-of-type(3){
  background-image: url("../pictures/kobu-agency-ipARHaxETRk-unsplash.jpg");
  margin-right: 0;
  background-size: cover;
  
}
/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  width:100vw;
  height: 10vh;
  background-color: transparent;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding: 0 0; 
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  transition: transform 0s;
  background-color: #fa7d0072;
}

/* The navigation menu links */
.sidenav a {
  font-family: 'Saira Condensed', sans-serif;
  padding: 0 0;
  margin: 0;
  text-decoration: none;
  font-size: 5vw;
  color: white;
  display: inline;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: rgb(136, 136, 136);
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */


.image-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 300px;
  justify-content: space-evenly;
  margin: 0.5vh 0;
}
.image {
  background-color: white;
  border-radius: 10px;
  width: 15vw;
  height: auto;
  transition: all 2s;
  padding: 0 80px;
}

.image:nth-of-type(1):hover {
  background-size: 100px;
  background-color: var(--orange);
}


.main-container{
  display: flex;
  flex-direction: column;
justify-self:center;
margin: 10vh 0;}

.main-info {

  
  display: flex;
  flex-direction:column;
  background-color: white;
  text-align: justify;
  font-family: 'Saira Condenses', sans-serif;
  font-size: 1.5em;
  color:grey;
  border-radius: 10px;
  padding: 5em 5em;
  margin: 0.5vh 0;
}




.main-table{
  display:flex;
  flex-direction: row;
  list-style: none;
  margin: 0.5vh 0;
  padding: 0;
}

.margin-images{
  display: flex;
  flex-direction: row;
}

.quotes{
  display: flexbox;
  flex-direction:row;
  background-color: rgb(250 132 15 / 57%);
  text-align: justify;
  font-family: 'Saira Condenses', sans-serif;
  font-size: 20px;
  border-radius: 15px;
  color:rgb(255, 255, 255);
  padding: 10px;
  margin: 0.5vh 0;

}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
    height:5vh
  }
  .sidenav a {
    font-size: 1.5vw;
  }
 
  li{
    font-size:2.5vh;
    color:rgb(153, 152, 152)
  }
  .main-info li{
    width:100%;
  }
  .main-info{
    width:90vw;
  }
}
@media (max-width: 575.98px) {
  .sidenav a{
    font-size: 5vw;
  }
  .threeSpaces{
    display:block;
  }

  .main-table{
    display: flex;
    flex-wrap: wrap;
    width:100vw;
  }
  li{
    width: 100vw;
    font-size:2vh;
    color:rgb(136, 136, 136)
  }
  .main-info li{
    width:100%;
  }
  .main-info{
    width:90vw;
  }
  
  #heading{
    margin-left: 0;
  }
  #flowerImg{
    margin-bottom: 0.5vh;
  }
  
  #core, #ducky, #tech, #tech1, #jsImage{
    margin-top: 0.5vh;
    margin-left: 0;
  }
  
  
}
@media (max-width: 767.98px) {
  
  .sidenav a{
    font-size: 3vw;
  }
 
  .main-table{
    display: flex;
    flex-wrap: wrap;
    width:100vw;
  }
  li{
    width: 100vw;
    font-size:3vh;
    color:rgb(136, 136, 136)

  }
  .main-info li{
    width:100%;
  }
  .main-info{
    width:90vw;
  }
  
  #heading{
    margin-left: 0;
  }
  #flowerImg{
    margin-bottom: 0.5vh;
  }
  
  #core, #ducky, #tech, #tech1, #jsImage{
    margin-top: 0.5vh;
    margin-left: 0;
  }
  
}

@media (max-width: 991.98px) {
  

  .sidenav a{
    font-size: 5vw;
  }
  
  .main-table{
    display: flex;
    flex-wrap: wrap;
    width:100vw;
  }
  li{
    width: 100vw;
    font-size:3vh;
    color:rgb(136, 136, 136)
  }
  .main-info li{
    width:100%;
  }
  .main-info{
    width:90vw;
  }
  
  #heading{
    margin-left: 0;
  }
  #flowerImg{
    margin-bottom: 0.5vh;
  }
  
  #core, #ducky, #tech, #tech1, #jsImage{
    margin-top: 0.5vh;
    margin-left: 0;
  }
  
}

@media (max-width: 1199.98px) {

  .sidenav a{
    font-size: 6vw;
  }
 
  
}