/*Main css styling for everything*/
body { 
    /*affects everything you see on the website (css below this can overide the body css*/
    background-color: #008ff6;
    padding-top: 0%;
    padding: 0%;
    margin:0;
}
.picOfMe{
    padding: 30px;
    background-color: #008ff6;
    border-radius: 7px;
    width: 300px;
    max-width: 100%;
    justify-self: center;
    padding-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
}
.picOfMe img{
    /*The picture that is by itself on the top this css adds the darker blue around it and curves the border of it and sizes the image appropiatly*/ 
    padding: auto;
    border-radius: 7px;
    width: 300px;
    max-width: 100%;

}
iframe{
    /*resizes and centers the video so it wont look weird on mobile*/
    width: 450px;
    max-width: 100%;
    height: 290px;
    max-height: 100%;
    margin: auto;
}
/*next 6 lines goes over the font type for the website*/ 
h1, h2, h3, h4, h5, h6, figcaption{
    font-family:"DM Serif Text";
}
p{
    font-family: "Tinos";
}
main, footer { /*goes over centering everything*/
    text-align:center;
}
h1{ /*only sets font size as if 11:49 May 8, 2025*/
    font-size: 50px;
}
footer { /*creates the footer that we all know and love by creating the thick black line at the bottem and added the copyrights and socials*/
    border: none;
    position: relative;
    background-color: black;
    color:white;
    text-decoration-color: #ffff;
}
footer h4 { /*add reasonable space below text for the buttons instead of leaving it up to the browsers to decide*/
    margin:3px;
}
[type="button"]{ /*creates the buttons in the footer for the socials*/
    padding: 1px;
    background-color: white;
    text-decoration: none;
    align-self: center;
    justify-self:center;
    color: black;
    border-radius: 3px;
    margin: 2px;
}

main {/*Sets BG Color for the main part of the website and adds padding to the bottem of the page*/
    background-color: #48b0Fa;
    padding-bottom:20px;
}

figure img { /*Sizes images appropiatly*/
    width:640px;
    max-width: 100%;
    height: 100%;
}

figcaption{ /*Sets the style of the caption*/
    padding: 10px;
    background-color: #008ff6;
    border-radius: 7px;
    width:400px;
    max-width: 40%;
    margin-left:auto;
    margin-right:auto;
}
#Hobbies{ /*Makes the list fully centered with the bulletpoints*/
    display: flex; 
    flex-direction: column; 
    align-items: center;
}
#list li{
    /*spaces out the list out a bit in hobbies*/
    margin: 5px;
}
#contact form /*Creates the style for the contact form*/{
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-self: center;
    background-color: rgb(0,153,255);
    
    border-radius: 10px;
    margin: auto;
    min-width: 300px;
    width:100%;
    max-width:500px;
    margin-bottom: 0px;
    margin-top: 10px;   
}
/*Media queries*/
@media (min-width: 60em){ /*For smaller screens*/
    figure{
        display:grid; /*To set the direction of the photo gallery*/
        grid-template-columns: 2fr 1fr;
        align-items: center;
        justify-items: center;
    }

    figcaption{/*creates the font and position*/
        font-size: 2rem;
        margin-left: 1rem; 
        width:inherit;
        max-width: inherit;
    }
    #blog div{ /*sizex the blog accordingly*/
        max-width:100%;
        columns: 40rem;
    }
    
}
@media (min-width: 1200px){ /*creates css for larger screen (all mostly similar w/ different values than above)*/
    #gallery {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    #gallery h4 {
        grid-column: 1 / -1;
    }
    #gallery figure {
        display:block;
    }
    figure img {
        max-height:280px;
        object-fit:cover;
    }
    figure{
        max-height: 600px;
        max-width: 100%;
        align-items: center;
        justify-content: center;
    }
    #contact form{
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        justify-self: center;
        background-color: rgb(0,153,255);
        border-radius: 10px;
        margin: auto;
        min-width: 300px;
        width:100%;
        max-width:500px;
        margin-bottom: 0px;
        margin-top: 10px;   
    }
    
}





.inputs{ /*sets the inputs css for the contact form */
    border-radius: 10px;
    border-color: rgb(0,153,255);
    margin-top: 3px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
#btn{ /*sets the submit button css for the contact form */
    margin-top: 3px;
    margin-bottom: 5px;
    border-radius: 10px;
    background-color: #48b0Fa;
    grid-column:1/-1;
    width:50%;
    margin:auto;
    margin-bottom: 3px;
}