* {margin: 0; padding: 0; border: 0; box-sizing: border-box}

/* ---------FOR ALL--------- */

@font-face {
    font-family: 'Lato', sans-serif;
    src: url(https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap);
}

@font-face {
    font-family: 'Zen Antique', serif;
    src: url(https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Zen+Antique&display=swap);
}
@font-face {
    font-family: 'Viner Hand ITC', sans-serif;
    src: url(/images//VINERITC.TTF);
}

/* ----------COLORS!------------ */
/* 000445 */
/* 000655 */
/* c3c3c3 */

/*--------mobile--------*/
@media only screen and (max-width: 400px) {
    body {
        background-color: #000445;
        /* height: 2000px; */
        font-family: 'Lato', sans-serif;
        /* background image wood from shelves? */
        background-image: linear-gradient(#000665, #000445);
        /* font-size: 1.2em; */
    } 
    
    
    
    
    header {
        /* background-color; */
        /* height: 20vh; */
        border-bottom: 2px solid #c3c3c3;
    }
    
    #banner {
        width: 100%;
        border-bottom: #c3c3c3 solid 1px;
    }

    #banner2 {
        display: none;
    }
    
    /* #hamburger {
        background-color: mediumspringgreen;
        height: 50px;
        width: 50px;
        float: right;
        position: absolute;
        right: 0;
        transform: translateY(-50px);
    } */
    
    /* #hamburger:hover {
        background-color: red;
        background-color: none;
    } */
    
    /* #hamburger:hover~#mainnav {
        display: block;
    } */
    
    /* nav#mainnav {
        display: none;
    } */
    
    #mainnavlist {
        background-color: #000445;
        overflow: auto;
        min-height: 40px;
        display: flex;
        justify-content: center;
        list-style: none;
    }
    
    /* #mainnavlist:hover {
        display: block;
    } */
    
    #mainnavlist li {
        background-color: #000665;
        margin: 8px;
        padding: 5px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        border:rgba(250, 235, 215, 0.685) 1px solid;
        border-radius: 7px;
    }
    
    #mainnavlist a {
        text-decoration: none;
        color: #c3c3c3;
        /* text-transform: lowercase; */
    }

    #mainnavlist a:checked {
        text-decoration: none;
        color: #c3c3c3;
    }
    
    
    
    
    section#intro {
        /* background-color: #000665; */
        /* border: #000445 solid 1px; */
        /* margin: 40px; */
        /* background-color: #c3c3c3; */
        /* background-image: radial-gradient(#fff5e6bd, #efefef98, #e9e9e9e0); */
        /* transform: rotate(3deg); */
        /* text-shadow: #000445 10px 10px 10px; */
        /* height: 80vw; */
        /* overflow: auto; */
        position: relative;
    }
    
    h1 {
        text-align: center;
        padding: 10px;
        margin: 10px;
        color: #000445;
        font-family: 'Viner Hand ITC', sans-serif;
        text-transform: uppercase;
    }
    
    #mainimage {
        /* height: 300px; */
        /* background-color: #000665; */
        /* border: 1px solid darkolivegreen; */
        /* margin: 15px; */
        /* background-image: url(/images/mc.png); */
        background-size: contain;
        background-repeat: no-repeat;
        /* border: 2px solid #000445; */
        background-image: url(/images/mainphoto.png);
        /* overflow: auto; */
        min-height: 35vh;
        /* display: block; */
        /* margin: 5px auto; */
        background-position: center;
        overflow: auto;
    }

    #mainimage p {
        color: #c3c3c3;
    }

    /* #tape1 {
        height: 30px;
        width: 100px;
        position:absolute;
        background-color: rgba(250, 235, 215, 0.685);
        transform: translateY(-310px) translateX(210px) rotate(25deg);
        border-left: antiquewhite dotted 1px;
        border-right: antiquewhite dotted 1px;
        text-shadow: #000445 1px 1px 1px;
    } */

    /* #tape2 {
        height: 30px;
        width: 120px;
        position: absolute;
        background-color: rgba(250, 235, 215, 0.685);
        transform: rotate(30deg) translate(-40px, -10px);
        border-left: antiquewhite dotted 1px;
        border-right: antiquewhite dotted 1px;
    } */
    /* NOTE TO SELF */
    /* 
    The photo glitched out for different phone models, which is to be expected
    I instead ss it and put it in as an image
    If i want to tackle this later, ill do that
    but for now it remains like this as it's working and who am i to mess with it
    for reference, the place where it worked best before was iphone 10
    */



    
    article#paragraphs {
        /* border: 2px slategrey solid; */
        margin: 10px;
        padding: 5px; 
    }
    
    .text {
        background-color: #c3c3c3;
        padding: 10px;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid #000665
    }

    h2 {
        color: #000665;
        /* font-size: 1.2rem; */
    }
    
    .text p {
        font-family: 'Zen Antique', serif;
        color: #000445;
        padding: 7px;
        font-size: 1.3em;
    }

    #updates {
        padding-top: 10px;
    }

    h3 {
        text-align: center;
        color: #000445;
        padding: 2px;
    }
    
    /* h3:hover~nav#classnav {
        display: flex;
    } */

    /* .text nav#classnav {
        display: none;
        text-align: center;
    } */
    
    .text nav#classnav #classnavlist {
        display: flex;
        margin: 5px auto;
        /* flex-direction: row; */
        list-style: none;
        /* flex-wrap: wrap; */
        /* flex:auto; */
        /* justify-content: center; */
        /* flex-grow: 1; */
        /* flex-basis: 100%; */
        justify-content: center;
        flex-wrap: wrap;
    }

    .text nav#classnav #classnavlist li {
        margin: 3px;
        background-color: #000665;
        padding: 5px;
        border-radius: 9px;
    }

    .text nav#classnav #classnavlist li a {
        text-decoration: none;
        color: #c3c3c3;
        text-transform: lowercase;
        border: #000445 1px solid;
        /* align-content: center; */
    }
    
    
    
    
    footer {
        height: 5vh;
        background-color: slategrey;
        /* border: darkolivegreen 1px solid; */
        /* position: fixed;
        bottom: 0; */
        background-image: url(/images/bannerfooter.png);
        background-size: cover;
        border-top: 1px solid #c3c3c3;
        font-size: 0.7rem;
        width: 100%;
        /* position: absolute; */
        bottom: 0;
    }
    
    #footer {
        display: flex;
        flex-flow: row;
        /* go back to add links */
    }
    
    #footer li {
        display: inline-block;
        padding: 3px;
        margin: 5px auto;
        /* have text lighter/subtle color */
        color: #c3c3c3;
    }

    #footer li:nth-child(2) {
        font-style: italic;
    }
}

/*--------tablet---------*/
@media only screen and (min-width: 400px) and (max-width: 1000px) {
    body {
        background-color: #000445;
        /* height: 2000px; */
        font-family: 'Lato', sans-serif;
        /* background image wood from shelves? */
        background-image: linear-gradient(#000665, #000445);
        min-height: 100vh;
        /* width: 100%; */
        font-size: 1.2em;
    }
    /* figure out that damn horizontal scroll*/
    
    
    

    header {
        /* background-color; */
        /* height: 20vh; */
        border-bottom: 1px solid  #c3c3c3;
        display: flex;
    }
    
    #banner {
        /* width: 70%; */
        /* position: absolute; */
        /* right: 0; */
        display: none;
    }

    #banner2 {
        width: 70vw;
        height: 28vw;
    }
    
    /* #hamburger {
        background-color: mediumspringgreen;
        height: 50px;
        width: 50px;
        float: right;
        position: absolute;
        right: 0;
        transform: translateY(-50px);
    } */
    
    /* #hamburger:hover {
        background-color: red;
        background-color: none;
    } */
    
    /* #hamburger:hover~#mainnav {
        display: block;
    } */
    
    /* nav#mainnav {
        display: none;
        height: 28vw;
    } */
    
    #mainnavlist {
        background-color: #000445;
        overflow: hidden;
        /* min-height: 50px; */
        /* display: block; */
        min-width: 25vw;
        margin-left: 1vw;
        /* height: 28vw; */
        align-items: center;
        display: flex;
        flex-flow: column;
        /* justify-content: center */
        align-items: stretch;
        /* align-content: space-between; */
        /* flex-grow: 1; */
        font-size: 3vw;
    }
    
    /* #mainnavlist:hover {
        display: block;
    } */
    
    #mainnavlist li {
        background-color: #000665;
        background-image: url(/images/bannerfooter.png);
        /* background-position: center; */
        background-size: cover;
        margin: 5px;
        padding: 3px;
        border:rgba(250, 235, 215) 1px solid;
        /* border-radius: 7px; */
        /* align-items: stretch; */
        /* flex-grow: 1; */
        /* text-align: center; */
        display: flex;
        justify-content: center;
        /* text-align: left; */
        /* align-items: stretch; */
        align-content: center;
        /* min-height: 100%; */
        height: 5.5vw;
        overflow: auto;
        min-height: 5vw;
        /* filter:blur(10px); */
        /* filter:sepia() */
    }

    /* get to line up and be different for each button */

    /* #mainnavlist ul:nth-child(1), #mainnavlist ul:nth-child(3) {
        background-position: center;
    } */
    
    #mainnavlist a {
        text-decoration: none;
        color: #c3c3c3;
        /* text-transform: lowercase; */
        /* transform: translateY(3px); */
        /* padding: 2px; */
    }

    #mainnavlist a:checked {
        text-decoration: none;
        color: #c3c3c3;
    }

    #mainnavlist li:hover {
        background-color: rgba(250, 235, 215, 0.5);
        /* color: #000665; */
    }

    /* #mainnavlist li a:hover {
        color: #000665;
    } */
    /* the list breaks when it goes smaller, fix */

    
    
    
    
    section#intro {
        /* background-color: #000665; */
        /* border: #000445 solid 1px; */
        /* margin: 40px; */
        /* background-color: #c3c3c3; */
        /* background-image: radial-gradient(#fff5e6bd, #efefef98, #e9e9e9e0); */
        /* transform: rotate(3deg); */
        /* text-shadow: #000445 10px 10px 10px; */
        /* height: 80vw; */
        /* overflow: auto; */
        position: relative;
        /* margin-bottom: 50px; */
    }
    
    h1 {
        text-align: center;
        padding: 10px;
        margin: 10px;
        color: #000445;
        font-family: 'Viner Hand ITC', sans-serif;
        text-transform: uppercase;
    }
    
    #mainimage {
        /* height: 300px; */
        /* background-color: #000665; */
        /* border: 1px solid darkolivegreen; */
        /* margin: 15px; */
        /* background-image: url(/images/mc.png); */
        background-size: contain;
        background-repeat: no-repeat;
        /* border: 2px solid #000445; */
        background-image: url(/images/mainphoto.png);
        /* overflow: auto; */
        /* width: 35vw; */
        /* min-height: 30vh; */
        /* min-width: 35vh; */
        width: 40vw;
        height: 35vh;
        /* display: block; */
        /* margin: 5px auto; */
        /* background-position: center; */
        /* position: absolute; */
        /* width: 40vw; */
        /* float: left; */
        position: absolute
    }

    #mainimage p {
        color: #c3c3c3;
    }

     /* RAEGAN
    get this image to work. play with height/width.
    it doesnt take up space, mess with it to see
    it needs to be remedied
    */


    /* #tape1 {
        height: 30px;
        width: 100px;
        position:absolute;
        background-color: rgba(250, 235, 215, 0.685);
        transform: translateY(-310px) translateX(210px) rotate(25deg);
        border-left: antiquewhite dotted 1px;
        border-right: antiquewhite dotted 1px;
        text-shadow: #000445 1px 1px 1px;
    } */

    /* #tape2 {
        height: 30px;
        width: 120px;
        position: absolute;
        background-color: rgba(250, 235, 215, 0.685);
        transform: rotate(30deg) translate(-40px, -10px);
        border-left: antiquewhite dotted 1px;
        border-right: antiquewhite dotted 1px;
    } */
    /* NOTE TO SELF */
    /* 
    The photo glitched out for different phone models, which is to be expected
    I instead ss it and put it in as an image
    If i want to tackle this later, ill do that
    but for now it remains like this as it's working and who am i to mess with it
    for reference, the place where it worked best before was iphone 10
    */

    /* #imgartwrapper {
        width: 100%;
        position: relative;
        display: flex;
    } */
    
    article#paragraphs {
        /* border: 2px slategrey solid; */
        margin: 9px auto;
        padding: 5px;
        overflow: auto;
        width: 98%;
    }
    
    .text {
        background-color: #c3c3c3;
        padding: 5px;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid #000665
    }

    /* #welcome {
        position: absolute;
        right: 0;
        width: 50vw;
        transform: translateX(-30px) translateY(-210px);
        max-width: 60vw;
    } */

    #welcome, #thiswebsite {
        float: right;
        max-width: 57vw;
        overflow: auto;
    }

    #welcome h2, #thiswebsite h2 {
        /* height: 100px; */
        margin: 10px;
    }

    #welcome p, #thiswebsite p {
        /* height: 100px; */
        margin: 15px;
    }

    #school {
        max-width: 35vw;
        float: left;
        /* position:absolute; */
        overflow: auto;
        /* position: absolute; */
        /* left: 0; */
        /* transform: translateX(-30px); */
        text-align: center;
    }

    #school p {
        border: 1px #000665 solid;
        padding: 5px;
        margin: 10px;
        text-align: left;
        /* justify-content: center; */
        /* background-color: rgba(250, 235, 215, 0.685); */
    }

    h2 {
        color: #000665;
    }
    
    .text p {
        font-family: 'Zen Antique', serif;
        color: #000445;
    }

    h3 {
        text-align: center;
        color: #000445;
        padding: 2px;
    }
    
    /* h3:hover~nav#classnav {
        display: flex;
    } */

    /* .text nav#classnav {
        display: none;
    } */
    
    .text nav#classnav #classnavlist {
        display: flex;
        margin: 5px auto;
        /* flex-direction: row; */
        list-style: none;
        /* flex-wrap: wrap; */
        /* flex:auto; */
        justify-content: center;
        /* flex-grow: 1; */
        /* flex-basis: 100%; */
        flex-wrap: wrap;
    }

    .text nav#classnav #classnavlist li {
        margin: 3px;
        background-color: #000665;
        padding: 5px;
        border-radius: 9px;
    }

    .text nav#classnav #classnavlist li a {
        text-decoration: none;
        color: #c3c3c3;
        text-transform: lowercase;
        border: #000445 1px solid;
    }
    
    
    
    
    footer {
        height: 5vh;
        background-color: slategrey;
        /* border: darkolivegreen 1px solid; */
        /* position: fixed;
        bottom: 0; */
        background-image: url(/images/bannerfooter.png);
        background-size: cover;
        border-top: 1px solid #c3c3c3;
        font-size: 0.7rem;
        width: 100%;
        /* position: absolute; */
        bottom: 0;
    }
    
    #footer {
        display: flex;
        flex-flow: row;
        /* go back to add links */
    }
    
    #footer li {
        display: inline-block;
        padding: 3px;
        margin: 5px auto;
        /* have text lighter/subtle color */
        color: #c3c3c3;
    }

    #footer li:nth-child(2) {
        font-style: italic;
    }
}

/*--------desktop--------*/



/* ------eventual/to do------ */
/* .text:nth-child(2) p {
        color: rebeccapurple;
    } */
/* watches */
/* print */
/* add my photos */
/* make the page art */
/* accessibility */
/* make special page version just for sydney? text would be min 16 */
/* soften text color in main nav and footer */
/* border radius on buttons */
/* once i redo icon (port window/anglerfish?) put soft overlay on right banner? */