/* 
Author: Mehki Walker
Current Date: 7/1/2025
File Name: style.css
*/

/* CSS Reset */

html {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

header {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

nav {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

main {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

footer {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

img {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

ul {
    margin: 0px;
    padding: 0px;
    border: 0px;
}



h1 {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

h3 {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

aside {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

figure {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

figcaption {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

/* Style rules for body and images */

html {
    margin: 0 auto;
    max-width: 1000px;
}


body {
    background-image: linear-gradient(to bottom right, black, darkgrey, black);
    background-attachment: fixed;
    position: relative;
}


.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%; 
    height: auto;
}

/* Style rules for mobile viewport */


/* Style rules to show mobile class and hide tab-desk class */



/* Style rules for header area */









/* Style rules for navigation area */





/* Style rules for main content */ 
main {
    padding: 2%;
    font-family: "Lora", serif;
      font-weight: 400;
      font-style: normal;
}

main p {
    font-size: 1.25em;
}

h1 {
    text-align: center;
}

figcaption {
    text-align: center;
}

.link {
    color: #4d3319;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
}

.textbox{
    background-color: black;
    color: white;
    width: 400px;
    height: 350px;
    overflow-y: scroll;
}

.youtube{
    background-color: black;
    color: white;
    margin: 5px;
    padding: 5px;
    width: 400px;
    height: 350px;
}






/* Style Rules for footer content */






/* Media Query for Tablet Viewport */

@media screen and (min-width: 620px), print {
    
    /* Tablet Viewport: Style rules for main area */
    
    .textbox{
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        width: 70%;
        background-color: black;
        color: white;
        padding: 10px;
        overflow-y: scroll;
        height: 400px;
    }

    .youtube{
        display:block;
        background-color: black;
        color: white;
        margin-left: auto;
        margin-right:auto;
        margin-top: 10px;
        width: 56%;
        padding: 50px;
        height: 250px;
    }
    
    .mobile {
        text-align: center;
    }
    
}

/* Media Query for Smartphones (Work in Progress) */
/* @media screen and (min-width: 320px), print {
    .textbox{
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        width: 50%;
        background-color: black;
        color: white;
        padding: 10px;
        overflow-y: scroll;
        height: 400px;
    }

    .youtube{
        display:block;
        background-color: black;
        color: white;
        margin-left: auto;
        margin-right:auto;
        margin-top: 10px;
        width: 53%;
        padding: 0.25% 6px;
        height: auto;
    }
    
    .responsive-iframe {
        position: relative;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
    }
    
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%; 
        height: auto;
    }
    
    .mobile {
        text-align: center;
    }
}*/

/* Media Query for Large Desktop Viewports */

@media screen and (min-width: 1921px) {
    
    body{
        background: linear-gradient(#f6eee4 #78593a);
    }
    
    #wrapper {
        width: 1920px;
        margin: 10px auto;
    }
    
    main {
    }
    
    .grid {
        grid-template-columns: auto auto auto auto;
    }
    
    aside {
        grid-column-start: 1;
        grid-column-end: 4;
        font-size: 3em;
    }
}

/* Media Query for Print */

@media print {
    body {
        background-color: white;
        color: black;
    }
}

/* Media Query for Desktop Viewport */

@media screen and (min-width: 1000px), print {
    
    /* Desktop Viewport: Style rules for main content */
    
    
    
    .textbox    {
        background-color: black;
        color: white;
        float: left;
        position: relative;
        padding: 10px;
        margin: 5px;
        width: 400px;
        height: 350px;
        overflow-y: scroll;
    }
    
    .youtube    {
        background-color: black;
        color: white;
        float: right;
        position: relative;
        margin: 5px 5px 7px 0px;
        padding: 10px;
        width: 50%;
        height: 350px;
    }
    
    .responsive-iframe {
        padding: 0px;
        position: relative;
        width: 100%;
        height: 74%;
    }
}