@import url(manual-fonts.css);


/*GENERAL SHIT*/

body {
    min-height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding: 0;
    font-family: "Charter-Racket";
    color: #2e2d2a;
}


h1 {
    font-family: "Cooper-Hewitt";
}


.static {
    background: url(images/static.gif);
    background-size: 58.7%;
    background-repeat: no-repeat;
    background-position-x: 23.35%;
    background-position-y: 56.8%;
}


@keyframes changeColor {

/*  A GREY*/

    0% {
        color: #B3BAD1;
    }

/*    A PURPLE*/

    33% {
        color: #B278F8;
    }

/*    A GREEN*/

    66% {
        color: #6ABE91;
    }


/*A PINK*/

    100% {
        color: #D39EC1;
    }
}


a {
    animation: changeColor 20s ease-in-out infinite alternate;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: none;
    color: #7A56AB;
}

footer {
    font-size: x-small;
    text-align: left;
    padding: 4rem 0rem 0rem 0.5rem;
    line-height: 1.5;
}

code {
    font-family: monospace;
    color: rgb(180, 15, 180);
}

blockquote {
    font-style: italic;
}

section > ul {
    list-style: circle;
    line-height: 1.5rem;;
}

.lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0 0 0;

}

.lead h1 {
    margin-top: 1rem;
    margin-bottom: 0rem;
}

.lead img {
    padding: 3rem 0rem 0 0rem;
}


.contact {
    word-spacing: 0.3rem;
    margin-top: 0.5rem;
    padding-bottom: 1rem;
}


.top-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;

}

.about {
    display: flex;
    flex-direction: column;

}

.about p {
    background-color: #ffffff;
    padding: 0.25rem;
    margin: 0;
    text-align: justify;
}



.interests {
    display: flex;
    flex-direction: column;

}

.interests ul {
    list-style: none;
    list-style-position: outside;
    padding-left: 0;
    line-height: 1.3;
}

.shift {
    padding-right: 0.1rem;
}

.work {
    display: flex;
    flex-direction: column;
    padding-right: 5rem;
}

.work ul{
    list-style: none;
    list-style-position: outside;
    padding-left: 0.5rem;
    line-height: 1.6;
}

.citation {
    font-size: small;
    text-indent: -5%;
    margin-left: 5%;
}

.citation > p {
    margin: 0
}


.main {
    padding: 2rem 0rem 0rem 6em;
}


.attribution {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
}


.attribution > footer {
    margin-top: auto;
    margin-bottom: 1rem;

}

.homelink {
    font-size: large;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}



/* SPECIFIC STYLES FOR SCREEN SIZES, STARTING WITH A MEDIUM */

@media(max-width:901px){

    body {
        margin: 0;
        padding: 1rem;
     }

     h2 {
         padding-bottom: 0.5rem;
         margin-bottom: 0;
     }

     section {
        padding-bottom: 5rem;
        margin: 1rem;
    }

    .lead h2 {
        text-align: center;
        font-family: "Cooper-Hewitt";
        font-size: large;
        margin-top: 0;
    }

    .lead img {
        width: 470px;
    }

    .content-wrapper {
        margin-left: auto;
        margin-right: auto;
        width: 95%;
    }

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


    .home {
        background-image: url(images/mushroom-graag.png);
        background-size: 20%;
        background-repeat: no-repeat;
        background-position: bottom right;

    
    }

    .attribution {
        background-image: url(images/sunflower-graag.png);
        background-size: 30%;
        background-repeat: no-repeat;
        background-position: 100% 98%;
    }

}


/* A BIT LARGER OF A SCREEN */

@media(min-width:900px){

    h2 {
        padding-bottom: 0.5rem;
        margin-bottom: 0;
    }

    section {
        width: 65%;
        margin-right: auto;
        margin-left: auto;
        padding: 0 10rem 0 0;
    }

      .lead h1 {
        padding-bottom: 0.5rem;
    }

    .lead h2 {
        text-align: center;
        font-family: "Cooper-Hewitt";
        font-size: x-large;
        margin-top: 0;
    }

    .lead img {
        width: 520px;
    }
    
    .content-wrapper {
        display: flex;
        flex-direction: column;
        width: 60%;
        padding: 3rem 2rem 2rem 3rem;
        flex-wrap: wrap;
    }

    .lastwrapper {
        display: flex;
        flex-direction: row;
        justify-content: left;
        flex-wrap: wrap;
    }


    .home {
        background-image: url(images/mushroom-graag.png);
        background-size: 18%;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-attachment: fixed;
    
    }

    .attribution {

        background-image: url(images/sunflower-graag.png);
        background-size: 30%;
        background-repeat: no-repeat;
        background-position: 100% 98%;
    }

}


/* A SORTA TINY ASS SCREEN */

@media (max-width: 600px) {



    h2 {
        padding-bottom: 0.5rem;
        margin-bottom: 0;
    }

    section {
        width: 65%;
        margin-right: auto;
        margin-left: auto;
        padding: 0 10rem 0 0;
    }

    .lead h1 {
        padding-bottom: 0.5rem;
    }

    .lead h2 {
        text-align: center;
        font-family: "Cooper-Hewitt";
        font-size: large;
        margin-top: 0;
    }

    .lead img {
        width: 390px;
    }
    
    .content-wrapper {
        display: flex;
        flex-direction: column;
        width: 90%;
        padding: 3rem 1rem 0rem;
        flex-wrap: wrap;
    }

    .lastwrapper {
        display: flex;
        flex-direction: row;
        justify-content: left;
        flex-wrap: wrap;
    }

    .attribution {

        background-image: url(images/sunflower-graag.png);
        background-size: 30%;
        background-repeat: no-repeat;
        background-position: 100% 98%;
    }


   .home {
        background-image: url(images/mushroom-graag.png);
        background-size: 20%;
        background-repeat: no-repeat;
        background-position: bottom right;
    
    }

}



/* NOW A MUCH BIGGER SCREEN */

@media(min-width:1400px){


    section {
        width: 55%;
        margin-right: auto;
        margin-left: auto;
        padding: 0 15rem 0 0;
    }


    h2 {
        padding-bottom: 0.5rem;
        margin-bottom: 0;
    }

    footer {
        margin-left: 2rem;
    }

    .lead h2 {
        text-align: center;
        font-family: "Cooper-Hewitt";
        font-size: x-large;
        margin-top: 0;
    }

    .lead img {
        width: 600px;
        padding: 3rem 0rem 0 0rem;
    }

    .content-wrapper {
        display: flex;
        flex-direction: column;
        width: 35%;
        padding: 3rem 9rem 0 0rem;
        flex-wrap: wrap;
    }

    .lastwrapper {
        display: flex;
        flex-direction: row;
        justify-content: left;
        flex-wrap: wrap;
    }
    

    .home {
        background-image: url(images/mushroom-graag.png);
        background-size: 15%;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-attachment: fixed;
    
    }

    .attribution {
        background-image: url(images/sunflower-graag.png);
        background-size: 25%;
        background-repeat: no-repeat;
        background-position: 100% 98%;
    }

    
}

/* WHY ARE YOU ON THE BIGGEST SCREEN IMAGINABLE */

@media(min-width:2000px){


    body {
        font-size: large;
    }

        .home {
        background-image: url(images/mushroom-graag.png);
        background-size: 15%;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-attachment: fixed;
    
    }
}