@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&family=Space+Mono&display=swap');

/*Are we really rebuilding the entire website again for the 3rd time within the next 48 hours of the due date?*/
/*You bet your bottom dollar we are!*/

/*We're gonna put everything into box! All Boxes! Everything's in a box now!*/

/*Modified the body into boxes so hopefully everythign should compress nicely*/
html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Space Gortesk';
    font-size: 16px;
    color: aqua;
    background-color: black;
    margin: 0;
    padding: 0;
}

/*Styling the font of the headers*/
header{
    font-family: 'Space Mono';
    font-size: clamp(20px, 3vw, 50px);
    font-weight: bold;
    color: mediumspringgreen;
    line-height: 60px;
    background-color: black;
    height: 35px;
    margin-left: 15px;
    margin-top: 40px;
}

/*Here is the font stylings of the characters within the main*/
h1{
    color: mediumspringgreen;
    font-size: 200%;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
}

.Bigboi h1{
    padding-left: 20px;
}

/*Honestly I don't think I'm going to be using h2 or h3's but better safe than sorry.*/
h2, h3{
    margin: 10px; 
}

/*Update: I now understand why there's an h2 and h3 but I've gone too far to turn back*/

p{
    line-height: 1.5; 
    margin-bottom: 12px;
    padding-right: 40px;
    position: relative;
    left: 10px;
    text-align: justify;
}

#javaJavaCode{
    text-align: right;
    background-color: white;
}

/*Default hyperlink text colors made be blind as a bat*/
/*Google showed us that you can actually change the hyperlink text colors with the code below*/
#blogLink{
    a:link {color: salmon;}
    a:visited {color: #060235}
    a:hover {color: #FCFC0C}
    a:active {color: #C0F0FC}
}

/*General img behavior. Don't mess with it like last time!!!*/
#imgMain{
    max-width: 25%;
    margin-left: 0;
}
  
.left{
    float: left;
    margin-right: 10px;
    margin-top: 5px;
}

#imgAside{
    max-width: 100%;
}

.right{
    float: right;
    margin-left: 10px;
    margin-top: 5px;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    size: 0;
}

#imgMainBlog{
    max-width: 25%;
    margin-left: 0;
    align-items: center;
}

/*Here are the settings for the lists*/  
ul, ol{
    list-style: none; 
    line-height: 2;
    padding: 0;
    margin: 0;
}
    
li{
    margin-bottom: 5px;
}

/*This is where the magic happens.*/
/*Modified from the first two CSS styles. I want everything in boxes so it will actually stack nicely this time.*/
/*Wait... how am I going to do the pictures...?*/
.container{
    display: flex;
    height: 100%;
    align-items: center;
    gap: 3px;
    flex-grow: 1;
    padding: 0px 40px;
}

.container-contact{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 3px;
    flex-grow: 1;
    padding: 0px 40px;
}

.container-photo{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 3px;
    flex-grow: 1;
    padding: 0px 40px;
    margin-left: 22%;
}

/*Ask me again when I get my next cup of coffee tonight.*/

/*I don't know if I need this or the clearfix hack*/
/*I also decided to not use the content id because it kept killing my webpage design*/
/*.container{
    overflow: auto;
}*/
/*I lied, I commented it out because why burn the extra ram for something not utlized?*/

/*Here we get the divs into boxes. Hopefully it'll look relatively nice.*/
.div1, .div2, .div3, .div4, .div5, .div2-blog1, .div6, .div7, .div2-blog2{
    background-color: darkslategrey;
    box-shadow: 5px 5px 25px mediumspringgreen;
    padding: 10px 30px;
    border-radius: 10px;
}

/*The divs need social distancing.*/
.div1{
    width: 70%;
    height: 700px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 200px;
}

.div2{
    width: 30%;
    height: 700px;
    margin-right: 25px;
    margin-left: 25px;
    margin-bottom: 200px;
}

/*Contacts Div*/
.div3{
    align-items: center;
    width: 20%;
    height: fit-content;
    margin-top: 10%;
    margin-left: 35%;
    margin-right: 75%;
    margin-bottom: 18%;
}

/*Photo Gallery Div*/
.div4{
    align-items: center;
    width: 50%;
    height: fit-content;
    padding-bottom: 20px;
    margin-top: 10%;
    margin-left: 35%;
    margin-right: 75%;
    margin-bottom: 20%;
}

/*Blog Page Div*/
.div5{
    width: 70%;
    max-height: fit-content;
    height: 700px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 200px;
}

/*The aside for the Blog page Div*/
.div2-blog1{
    width: 30%;
    height: 650px;
    margin-right: 25px;
    margin-left: 25px;
    margin-bottom: 200px;
}

.div2-blog2{
    width: 30%;
    height: 700px;
    margin-right: 25px;
    margin-left: 25px;
    margin-bottom: 200px;
}

.div6{
    width: 70%;
    height: 650px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 200px;
}

.div7{
    width: 70%;
    height: 850px;
    margin-top: 150px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 200px;
}

/*The list*/
#blogList{
    text-align: right;
    margin-top: 0;
}

#blogDetails{
    text-align: right;
}

/*Hopefully the footer isn't goofy*/
footer{
    clear: both;
    padding: 10px;
    background-color: darkslategray;
    text-align: left;
    margin-top: auto;
    font-size: 85%;
}

/*Here is the details for how the Nav behaves.*/
nav{
    background-color: black;
    font-size: 18px;
    padding: 20px;
    margin-top: 30px;
}

nav li{
    display: inline;
    list-style: none;
}

nav a{
    display: inline-block;
    padding: 27px;
    color: aqua;
    font-size: 22px;
}

/*DO NOT EVER LOSE THIS AGAIN!!! WE WILL NOT WASTE ANOTHER HOUR AND A HALF TRYING TO FIND THIS! AGAIN!!!*/
/*Anyways; mobile nav button.*/
#mobile-nav-button{
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    font-weight: bold;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    display: none;
  }

/*Webpage's behavior when on mobile.*/
@media all and (max-width: 800px){
    .container{
        margin-top: 50px;
        min-height: 100%;
        flex-direction: column;
    }

    .div1, .div2, .div5, .div2-blog, .div6, .div7 .div2-blog2{
        max-width: 85%;
        max-height: fit-content;
        padding: 30px;
    }

    /*Added these two div codes to modify the behavior of the boxes once it goes into mobile*/
    .div1{
        margin-top: 100px;
        width: 80%;
        margin-bottom: 50px;
        height: fit-content;
    }

    .div2{
        margin-top: 20px;
    /*Modified width so that way div2 stretches out to fit mobile screens*/
        width: 80%;
        height: fit-content;
    }

    .div3{
        margin-top: 100px;
        width: 80%;
        margin-bottom: 50px;
        margin-left: 3%;
        margin-right: 0%;
        height: fit-content;
    }

    .div4{
        margin-top: 100px;
        width: 155%;
        margin-bottom: 50px;
        margin-left: 0%;
        margin-right: 50%;
        height: fit-content;
    }

    .div5{
        margin-top: 100px;
        width: 80%;
        margin-bottom: 50px;
        height: fit-content;
    }

    .div2-blog1{
        margin-top: 20px;
    /*Modified width so that way div2 stretches out to fit mobile screens*/
        width: 80%;
        height: fit-content;
    }

    .div2-blog2{
        margin-top: 20px;
    /*Modified width so that way div2 stretches out to fit mobile screens*/
        width: 80%;
        height: fit-content;
    }

    .div5{
        margin-top: 100px;
        width: 80%;
        margin-bottom: 50px;
        height: fit-content;
    }

    .div6{
        margin-top: 100px;
        width: 80%;
        margin-bottom: 50px;
        height: fit-content;
    }

    .div7{
        margin-top: 100px;
        width: 80%;
        margin-bottom: 50px;
        height: fit-content;
    }

	header{
		height:44px;
        padding-bottom: 30px;
	}

	main, aside{
		width: 100%;
		float: none;
	}

    /*Giving the main section some breathing space from the aside*/
    main{
        margin-left: 10px;
    }

    /*Vice versa with the main. It's not a restraining order. It's social distancing*/
    aside{
        margin-left: 10px;
    }

    /*We're modifying the header h1 because it's looking too silly goofy on mobile*/
    #Bigboi{
        margin-top: 0px;
    }

    /*We gotta fix those photos, they're killing me Smalls!*/
    img{
        flex-direction: column;
    }

    /*Why won't you work with me?!!*/
    /*We're gonna push you all the way down!*/
    #footerHome{
        margin-top: 300%;
    }

    #footerPhotos{
        margin-top: 30%;
    }

    #footerContact{
        margin-top: 110%;
    }

    #footerBlog{
        margin-top: 70%;
    }

    #footerBlog1{
        margin-top: 370%;
    }

    #footerBlog2{
        margin-top: 350%;
    }

    /*This is the navigation bar that pops out on the side and how it behaves*/
    /*REMINDER! THANK KEVIN FOR HELPING ME REMEMBER OPACITY EXISTS!!*/
    #main-nav{
        position: absolute;
        top:72px;
        height: 50%;
        width: 0;
        transition: width .5s;
        z-index: 100;
        margin-top: 120px;
        opacity: 0;
    }
    
    #main-nav li{
        overflow: hidden;
    }

    /*Reminder: Tell Keven that you're not crazy and that the nav bar really did "Houdini" because **WE NEED TO RETURN OPACITY BACK TO 1!!***/
    #main-nav.show{
        width: 250px;
        opacity: 1;
    }
    
    #main-nav ul li{
        display: block;
    }
    
    #mobile-nav-button{
        display: block;
    }
}

/*I was going to do something with you... Something regarding how you behave in the contacts...?*/
/*@media(max-width: 1200px){
    .container-contact{
        height: 100%;
        flex-direction: column;
    }
}*/

/*Here is the CSS for the Image Gallery*/
input[type=button]{
    border:2px solid gray;
    background-color: #333333;
    border-radius: 4px;
    padding:10px;
    color:gray;
    font-weight: bold;
}
  
#image-gallery{
    width: 380px;
}
  
#image-gallery #mainImg{
    width:100%;
    border: 2px solid #333333;
}
  
label{
    width: 150px;
    display: inline-block;
    padding: 10px;
}
  
  /*We gotta shift over the photo to fit on mobile*/
@media all and (max-width: 800px){
    input[type=button]{
        border:2px solid gray;
        background-color: #333333;
        border-radius: 4px;
        padding:10px;
        color:gray;
        font-weight: bold;
    }
      
    #image-gallery{
        width:380px;
    }
      
    #image-gallery #mainImg{
        width: 100%;
        border: 2px solid #333333;
    }
      
    label{
        width: 150px;
        display: inline-block;
        padding: 10px;
    }
}