@charset "UTF-8";
/* CSS Document */
body {
 background-image: url("https://bgfons.com/uploads/bamboo/bamboo_texture3113.jpg");
 background-size: 600px 600px;
}
/* Hidden elements activated by respective buttons: Webdev, Digital art, Photo, Video Editing */
#content1 {
margin-left: 5%;
margin-right: 5% ;
text-align: center;
}
#content2 {
margin-left: 5%;
margin-right: 5% ;
text-align: center;
}
#content3 {
margin-left: 5%;
margin-right: 5% ;
text-align: center;
}
#content4 {
margin-left: 5%;
margin-right: 5% ;
text-align: center;
}
/* First box with name, photo & description */
.bio {
background-color: #C2FF8C;
padding: 5px;
max-width: 84%;
border: 2px solid green;
text-align: center;
margin-left: 5%;
margin-right: 5% ;

}
.ProPic {
display:flex;
flex-direction: column;
}

.Name {
transition: 2s;
width: 50%;
margin-left: 10px;
	margin-right: 10px;	
}
.Name:hover {
transition: 2s;
transform: scale(1.2);	
	
}
.profile {
transition: 2s;
width: 20%;
margin-left: auto;
	margin-right: auto;
}
.profile:hover {
transition: 2s;
transform: scale(1.1);	
	
}
/* Makes boxes line up neatly */
.row1{
display: flex;	
flex-direction: row;
}
.row2 {
display: flex;	
flex-direction: row;
}
/* Each invidual website box */
.quiz {
width: 30%;
background-color: #C2FF8C;
padding: 5px;
margin-top: 5px;
margin-right: 5px;
border: 2px solid green;
}
.beetle {
width: 30%;
background-color: #C2FF8C;
padding: 5px;
margin-top: 5px;
margin-right: 5px;
border: 2px solid green;
}
.Rico {
width: 30%;
background-color: #C2FF8C;
padding: 5px;
margin-top: 5px;
margin-right: 5px;
border: 2px solid green;
}
.MIW {
width: 30%;
background-color: #C2FF8C;
padding: 5px;
margin-top: 5px;
margin-right: 5px;
border: 2px solid green;
}
/* Art boxes */
.set1 {
width: 30%;
background-color: #C2FF8C;
padding: 5px;
margin-top: 5px;
margin-right: 5px;
border: 2px solid green;
}
.set2 {
width: 30%;
background-color: #C2FF8C;
padding: 5px;
margin-top: 5px;
margin-right: 5px;
border: 2px solid green;
}
.set3 {
width: 45%;
background-color: #C2FF8C;
padding: 5px;
margin-top: 5px;
margin-right: 5px;
border: 2px solid green;
}
/* Art images with hover */
.pict {
width: 100%;
}
.pict1 {
width: 65%;
}
.pict:hover {
transition: 2s;
transform: scale(1.25);
}
.pict1:hover {
transition: 2s;
transform: scale(1.5);
}
/* Navigation with buttons */
.nav{
display: flex;	
flex-direction: row;	
margin-left: 5%;
}
button {
width: 22.3%;	
height: 75px;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
font-size:24px;
background-color: #C2FF8C;
padding: 5px;
margin-top: 5px;
border: 2px solid green;
}
button:hover { 
transition: .1s;
  background-color: green;
}
/* All fonts */
.textsmall {
width: 70%;
margin-left: auto;
margin-right: auto;
}
p {
font-family: 	"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"	
}
a {
font-family: 	"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"	
}
h1 {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
}
/* Videos */
.videocontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}