html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'Roboto', serif;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.top{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(macdark.jpeg);
  background-size: cover;
  height: 100vh;
  color: white;
  text-align: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;

}

.proj{
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url(projectmain.png);
  background-size: cover;
  color: white;
  text-align: center;
  padding-bottom: 2%;
  
}

h1{
  font-family: 'Aboreto', serif;
  font-size: 300%;
  line-height: 0;
  text-shadow: 0 0 7px white;

}

h3{
  font-family: 'Source Code Pro', monospace;
}


.middle{
  padding: 2%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.footer{
  background: #330066;
  padding: 3%;
  color: white;
  text-align: center;
  height: 20%;
  border-top: 4px solid white;
  
  
}

.link{
  color: #E5CCFF; 
  text-decoration: none;
  font-weight: bold;
  
}

.link:hover{
  opacity: 0.7;

}

.nav{
  padding: 3%;
  margin-bottom: 15%;
  text-align: center;
}

ul{
  list-style-type: none;
  font-size: 110%;
  font-weight: bold;
  text-align: center;
  


}

li a{
  text-decoration: none;
  color: white;
  font-weight: bold;
  border-color: white;
  border-radius: 3px;
  border-style: solid;
  border-width: thin;
  padding: 8px;
  
}

li a:hover{
  background: white;
  transition: .6s;
  color: black;
}

/*#home{
  background: #F3E5ED;
  color: pink;
}*/

.inner{
  margin: 100px auto 150px auto;
  text-align: left;
  line-height: 1.7;
  width: 70%;
}

hr{
  width: 30%;
}

h2{
  font-size: 230%;
  font-weight: bolder;
}

.leftbox p{
  font-size: 130%;
  text-align: center;
}

.projectype{
  color: white;
}

.pbox{
  background-color: white;
  width: 95vmin;
  min-width: 30em;
  color:  black;
  text-align: left;
  display: grid;
  grid-template-columns: 2fr 9fr;
  margin: 2% auto 2% auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

}

.tabs{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: pink;
  margin-right: 2%;
  width: 110%;

}

.pbox h3{
  display: grid;
  place-items: center;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 10% 2% 10% 2%;
  font-family: 'Roboto', serif;
}

.tab-content{
  background-color: white;
  padding: 1em 1.5em;
  margin-left: 2%;


}

.tab-content h4{
  font-size: 1.8em;
  margin-bottom: 0.5em;
  color: black;
  font-weight: 600;

}

.tab-content p{
  text-align: justify;
  line-height: 1.5;
  color: black;
}

.tab-content div{
  display: none;
}



.tab-content .active{
  display: block;
}

.tabs .active{
  font-weight: bolder;
  text-shadow: 0 0 30px #e75480;
  background-color: white;
  opacity: 0.6;
  transition: 0.5s;
  
}

.tabs h3:hover{
  background-color: white;
  opacity: 0.8;
}

.tab-content a{
  text-decoration-style: dotted;
}

.tab-content hr{
  width: 10%;
  text-align: left;
}