:root{
    
    --color0: black;
    --color1:#FFF6C4;
    --color2:#EBCD26;
    --color3:#68ADF2;
     --color4:#EB3835;
    
    --color5:#EB3835;
    --color6:#EB3835;
    --color7:#EB3835;
    --color8:#EB3835;
    --color9:#EB3835;
   
    
}


html,
body {
    margin: 0 !important;
    padding: 0 !important;
    font-style: sans-serif;
   
    
    
}

#backgroundCover {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color:
       var(--color1);
    
    
    opacity: 1;
    z-index: -2;
    transition: opacity .4s;

}



#p5container {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.4s;
    z-index: 2;
}

#backButton {
    display: none;
}

#buttonWrap {

    padding: 2vw 2vw 0vw 2vw;
    width: 2.3em;
    opacity: 0;
    transition: opacity .3s;

    font-size: 4em;
   color: var(--color0);

    z-index: 100;
    position: sticky;
    background-color: var(--color1);
    border-radius: .2em;
    top: 0;
    box-shadow: var(--color1) 0px 0px 15px 20px;
    transition: background-color .3s, box-shadow .3s;
    
    
    
    
    



}


#aboutB:hover, #workB:hover, #instagramButton:hover {
    cursor: pointer;
    font-style: italic;

}



#contentRight img {
    width: 70%;
    margin: auto;
    padding: 15px;
    
}

#Polygon_1 {
    fill: var(--color3);
    transition: fill .3s;
    cursor: pointer;

}

#Polygon_1:hover {
    fill: var(--color4);

}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#sun {
    animation: rotate infinite 135s linear;
   
    animation-play-state: running;
  
    z-index: 200;
   
  

}


#instagramButton {
    position: fixed;
    right: 0;
    bottom: 0;
    font-size: 2em;
    margin: 1em;
    z-index: 20;

}

#aboutB, #workB{
    font-style: normal;
}
#workB {
   align-self: flex-end;

}




.wrap {

    max-width: 30vw;
    padding: 2vw;


    display: none;
    visibility: hidden;
    opacity: 0;
    transition: .5s ease-in-out;


    font-family: sans-serif;
    position: relative;
     overflow: visible;
     color: var(--color0);
    
    
    

}


#contentWrapper {
    min-width: 9vw;


    transition: .3s;


    font-size: 1.8em;
   
    




}

.projectButton {
    white-space: pre;
}

.projectButton:hover {
    font-style: italic;
    color: blue;
    cursor: pointer;



}

#backgroundCover2 {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color:
        var(--color2);
    opacity: 1;
    z-index: -2;
    right: 0;
    top: 0;
    transition: .4s;





}

#contentLeft {
    height: 100vh;
    width: 0rem;

    position: fixed;

    top: 0;
    left: 0;
    background-color:
        var(--color1);
    opacity: 1;
    z-index: 3;
    transition: .3s;
    overflow-y: scroll;
    overflow-x: hidden;
   


}

.text {
    padding: .5em .5vw 1.3em;
    font-size: 1.6vw;
    padding-right: 4vw;
    transition: .2s;
    width: 28vw;
    white-space: normal;


    display: none;
    opacity: 0;
    font-family: serif;

}

.text2 {
    padding: 1vw;
    padding-right: 4vw;
    transition: .2s;
    width: 28vw;
    white-space: normal;


    display: none;
    opacity: 0;
    font-family: sans-serif;
}

.link {
    text-decoration: none;
    color: var(--color0);
    font-style: italic;
}

.link:hover {
    color: blue;
    font-weight: bold;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--color0);
}

a:hover {
    color: blue;
}





#aboutText {
    width: 30vw;
}

#projectB {
    white-space: nowrap;
}

#contentRight {
    position: absolute;
    overflow-y: scroll;
    right: 0;
    top: 0;

    width: 100vw;
    
  
    z-index: 12;
    transition: .3s;

    justify-content: center;
    align-content: center;
    text-align: center;
    display: flex;
    
    
    

    


}

.imgs {

    display: none;
    visibility: hidden;
    opacity: 0;
    transition: .3s;


}

#more2 {


    height: 100vh;
    width: 100%;
    display: flex;

    justify-content: center;
    align-items: center;


}

.linky:hover {
    color: blue;
    font-style: italic;

}

#copetica {
    padding-left: 1vw;
}

#2column {
    width: 70%;
    display: flex;
    justify-content: center;
    max-height: 90vh;
    flex-wrap: nowrap;


}



#1 {
    width: 20vw;
    margin: 0 auto 0 0;
    background-image: url(images/a-z.gif);

}

.video {
    width: 70%;
    margin: auto;

    padding: 15px;
}

.images {
    width: 90%;
    transition: filter .7s, opacity .3s;
    

    
}

.title {
    font-size: 2em;
    padding: 15px;
}

#backButton2 {
    position: fixed;
    top: 0;
    text-align: center;
    width: 100vw;
    font-size: 1.8em;
    z-index: 34;
    
        padding: .3em 0 .6em;
        transition: .3s;
    display: none;
    opacity: 0;
    visibility: hidden;
}

.lazy {
    filter: blur(40px);
    opacity: 0;
}

.hidden {
    display:none;
    
}

.hide:hover + .hidden {
  display: inline-block;
position: absolute;
    left: 0;
    width: 15vw;
    transform: translate(0,-100%);
    
  
    z-index: 2000;
    

}




.hide {
    overflow: show;
    display: inline-block;
     animation: flower 3s linear infinite;
    
    
   
    
}

.a {
    animation-delay: 1.12s;
     animation: flower 3.2s linear infinite;
}

.b {
    animation-delay: .234s;
     animation: flower 4.31s linear infinite;
}
.c{
    animation-delay: .0485s;
     animation: flower 5s linear infinite;
}
.d {
    animation-delay: .50394s;
     animation: flower 5.1s linear infinite;
}
.e {
    animation-delay: 1.2059s;
     animation: flower 4.3s linear infinite;
}
.f {
    animation-delay: .3542s;
     animation: flower 3.6s linear infinite;
    
}

@keyframes flower{
    0%{transform: skewX(-15deg);}
    50%{transform: skewX(15deg);}
    100%{transform: skewX(-15deg);}
}

.hide:hover{
    font-style: italic;
}

.hider {
    position: relative;
}


/*
@media only screen and (max-width: 700px) {
    #p5container {
        display: none;
    }

    #sun {
        display: none;
    }

    #contentLeft {
        width: 100vw;
    }

    #buttonWrap {
        position: fixed;
        height: 10vh;
        opacity: 1;
        width: 100vw;
        display: flex;
   
        align-items: center;
        flex-direction: row;
        z-index: 10;




    }

    #instagramButton {
        left: 0;
        right: 0;
        text-align: center;
        position: absolute;
        bottom: 0;
        font-size: .5em;
        z-index: 10;
    }

    #contentRight {
        display: block;
    }

    .wrap {
        display: none;
        visibility: hidden;
        opacity: 0;
        max-width: 100vw;
        width: 100vw;
        justify-content: center;
        text-align: center;
        margin: auto;
    }

    #contentWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100%;
    }

    #backgroundCover {
        display: none;
    }

    #backgroundCover2 {
        display: none;
    }


    #projectButtons {
        display: none;
        visibility: hidden;
        opacity: 0;
        font-size: 1.4em;
        width: 90vw;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;

        transition: .3s;
        text-align: center;
        font-family: sans-serif;




    }

    #aboutText {
        display: none;
        visibility: hidden;
        opacity: 0;
        font-size: 1.4em;
        width: 90vw;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;

        transition: .3s;
        text-align: center;
        font-family: sans-serif;



    }







    .projectButton {
        font-size: 1.3em;
        white-space: normal;


    }

    #contentRight {
        position: relative;
        right: inherit;
        top: inherit;
        z-index: 10;

        background-color:
            #FFF6C4;


        overflow-y: visible;


    }




    .text {
        width: 90vw;
        padding: 0;
        display: inline-block;
        opacity: 1;

        font-size: 1.2em;
        padding-bottom: 15px;
    }

    #contentRight img {
        width: 90%;
    }

    #backButton {
        opacity: 0;
        visibility: visible;
        display: none;
        position: fixed;

        top: 0;
        width: 100vw;
        text-align: center;
        margin: auto;
        font-size: 1.8em;
        text-align: center;
        z-index: 22;
        padding: .3em 0 .6em;
        transition: .3s;


    }

    #backButton:hover, #backButton2:hover {
        transform: scale(1.5)
    }









    #aboutProjects {



        z-index: 20;
        visibility: hidden;
        display: none;
        position: fixed;

        

        top: 0;

        left: 0;

        transition: .3s;
        height: 100vh;

        opacity: 0;
        width: 100vw;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        background-color: #FFF6C4;


    }

    #projectsWrapper {
        z-index: 30;
        visibility: hidden;
        display: none;
        background-color: #FFF6C4;
        position: absolute;
        top: 0;



        opacity: 0;
        width: 100vw;
        min-height: 100vh;
        justify-content: center;

        flex-direction: column;
        padding-top: 2em;
    }

    #aboutB:hover #workB:hover {
        transition: .3s;
        transform: scale(1.3);


    }





    #projectsProjects {
        z-index: 20;
        visibility: hidden;
        display: none;
        position: fixed;

        

        top: 0;
        left: 0;
        transition: .3s;
        height: 100vh;
        opacity: 0;
        width: 100vw;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #FFF6C4;

    }
    

    
    
    #copyProject, #souptopia, #treehouse, #more {
        display: none;
        opacity: 0;
        text-align: center;
        
        

    }

    .imgs {
        display: inline-block;
        visibility: visible;
        
        opacity: 1;
        margin: 0 auto;
        width: 90vw;
        max-width: 95%;
        padding: 15px;
    }
}
*/







#sunKeeper {
     position: fixed;
    right: 2em;
    top: 2em;
     z-index: 200;
    
  
    
}



#about2 {
   
    width: 100%;
    display: block;
    
    
    
    
    
}

#byMe {
    position: fixed;
    bottom: 2vw;
    left: 2vw;
    z-index: 100;
    font: .19em serif;
    color: var(--color0);
    
}




.cups {
    max-width: 28%;
    min-width: 27%;
   padding: 0;

    transition: filter .5s, opacity .3s;
  flex: 1;
    
}

.cupcontaitner {
    display: flex;
    flex-wrap: wrap;
    width: 73.5%;
    margin: auto;
    padding: 0;
    position: static;

    
    
    
    
    
   
}