/* === Cancelling Defaults === */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    /* Cancel out some differences between browser defaults */
    margin: 0px;
    padding: 0px;
    border: 0px;
    font: inherit;
    vertical-align: baseline;
}

/* === FONTS === */

@font-face {
    font-family: 'raleway';
    src: url('assets/fonts/raleway.regular.woff') format('woff'),
         url('assets/fonts/raleway.regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'resagokr';
    src: url('assets/fonts/Resagokr.woff') format('woff'),
         url('assets/fonts/Resagokr.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* ====== NAV & FOOTER / UNVIERSAL ====== */

body{
    background-image:url("assets/background.png");
    background-repeat: repeat;
    background-size:200px;
}

main{
    max-width:1200px;
    background-color: white;
    position: relative;
    margin-left: auto;
    margin-right:auto;

    filter:drop-shadow(10px 0px 10px rgb(26, 38, 42))
}

#nav-container{
    position: sticky;
    top: 0;
    overflow: hidden;
    width:100%;
    z-index:10;
    
    display:flex;
    justify-content:center;

    background-color: white;
    filter:drop-shadow(10px 0px 10px rgb(111, 111, 111))
}

nav{
    width:60%;
    display:flex;
    align-items: center;
    justify-content: space-evenly;
}

nav img{
    max-width: 100px;
}

#nav-links{
    width:60%;

    display:flex;
    flex-direction: row;
    justify-content: space-evenly;

    font-family:'Raleway', 'Arial Narrow', Arial, sans-serif;
    
}

#nav-links a{
    font-size:1.2em;
    text-decoration:none;
    color:#939393;
}

footer{
    position:absolute;
    bottom:0px;
    height:80px;
    width:calc(100% - 80px);
}

#footer-block{
    background-color: #e0ebb1;
    
    height:100%;

    
    
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content:flex-start;
    column-gap: 50px;
    
}

#footer-block a{
    text-decoration: none;
    color:black;
}

.footer-text{
    font-family:'Raleway', 'Arial Narrow', Arial, sans-serif;
}

#footer-linkcontainer{
    display:grid;
    grid-template-columns: 40px 170px;
    align-items:center;
    column-gap: 10px;
}

#footer-logo{
    height:40px;
}

#footer-crazulink{
    rotate:270deg;
    position: absolute;
    bottom: 28px;
    right: -17px;
    font-family: 'Raleway', 'Arial Narrow', Arial, sans-serif;
    font-size: 13px;
    text-align:center;
    color:black;

    filter:opacity(50%);
}

#footer-footerpillar{
    height:120px;
    
    position: absolute;
    bottom:0px;
    right:60px;

    filter:drop-shadow(5px 0px 5px #b3bc8d)
}



/* 🪤🪤SMALL MODE🪤🪤 */
@media screen and (max-width: 800px) {
    nav{
        width:100%;

        flex-direction: column-reverse;
    }

    nav img{
        height:40px;
        margin-top:5px;
    }

    #nav-links{
        width:100%;
        padding-bottom:10px;
    }

    footer{
        position:absolute;
        bottom:0px;
        width:100%;
        height:100px;
        border-top:40px solid transparent;
        border-image:url(assets/footer/footer-border-temp.png) 40 round;
    }

    #footer-footerpillar{
        display:none;
    }

    #footer-block{
        flex-direction:column;
        align-items: baseline;
        padding-left:20px;
        row-gap: 10px;
    }

    #footer-logo{
    height:36px;
    }

    #footer-crazulink{
        bottom: 38px;
    }

    #footer-footerpillarsmall{
    height:100px;
    
    position: absolute;
    bottom:0px;
    right:40px;

    filter:drop-shadow(5px 0px 5px rgb(111, 111, 111))
}
}




/* 🌍🌍BIG MODE🌍🌍 */
@media screen and (min-width: 800px) {
    /*Hover Effects generously borrowed from bacon's web house*/
    .hoverglow:hover {
        filter:
            drop-shadow(0px 0px 5px rgb(116, 250, 255))
    }

    .hoverglow {
        transition: all 0.1s linear;
    }

    footer{
    border:40px solid transparent;
    border-bottom:none;
    border-image:url(assets/footer/footer-border-temp.png) 40 round;
    }

    #footer-block{
        padding-left:55px;
    }

    #footer-footerpillarsmall{
    display:none;
    }
}




/* ====== HOME ====== */

#home-main{
    height:1680px;
}

#home-welcomeimg{
    position: absolute;
    top:-30px;
    left: 50%;
    z-index:1;

    height:450px;
    transform: translate(-50%,0);
}

#home-balloonimg{
    position: absolute;
    top:250px;
    right: 5dvw;
    z-index:1;

    height:500px;

    animation-name:balloon;
    animation-duration:10s;
    animation-iteration-count:infinite;
}

@keyframes balloon{
    0% {top:150px}
    50%{top:100px}
    100%{top:150px}
}


#home-quoteblock{
    position:relative;
    width:450px;
    height:350px;
    
    top:200px;
    left: 50px;
}

#home-quoteblock img{
    height:40px;
    position: absolute;
}

#home-quoteblock p{
    position: absolute;
}

.home-quotetext{
    font-family: 'resagokr';
    font-size: 2.5em;
}

#home-qml{left:8px; top:4px;}
#home-qt1{left:64px; top:43px;}
#home-qt2{left:89px; top:92px;}
#home-qt3{left:131px; top:140px;}
#home-qt4{left:156px; top:184px;}
#home-qmr{right:8px; bottom:70px; -webkit-transform: scaleX(-1);transform: scaleX(-1);}

#home-quote-attrib{
    font-family:'Raleway', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.5em;
    left:226px;
    top:244px;
}

#home-pencilboy{
    position: absolute;
    top:370px;

    height:300px;
}

#home-portfolioarrowR{
  position: absolute;
  top: 603px;
  left: 37%;
  height: 200px;
}

#home-portfolioarrowL{display:none}


#home-portfoliosign{
    position: absolute;
    top: 712px;
    right: 5dvw;
    height: 300px;
}

#home-aboutblock{

    position:relative;
    width:350px;
    
    top:400px;
    left: 30px;
}

#home-aboutblock hr{
    display:none;
}

#home-abmain{
    font-family: 'resagokr';
    font-size: 1.5em;
}

#home-absub{
    font-family:'Raleway', 'Arial Narrow', Arial, sans-serif;
    font-size: 0.8em;
}

#home-findcontacttext{
    position: relative;
    height: 30px;
    top: 389px;
    left: 435px;
    rotate: 41deg;
}

#home-birdcont{
    position:absolute;
    width:450px;
    height:450px;
    
    top:1120px;
    right:5dvw;
}

#home-birdcont img{
    position:relative;
}

#home-birdmail{height:200px; top:0px; left:0px;
    z-index:11;
    animation-name:mailbird;
    animation-duration:7s;
    animation-iteration-count:infinite;
}
    
@keyframes mailbird{
    0% {top:0px; rotate:-5deg;}
    50%{top:-40px; rotate:5deg;}
    100%{top:0px; rotate:-5deg;}
}

#home-birdmotionlines{
    position:absolute;
    height:170px; 
    top:-311px; 
    left:280px; 
    rotate:1deg; 
    filter:opacity(50%); 
    z-index: 10;
}


#home-birdyellow{height:130px; top:11px; left:222px;}
#home-birdblue{height:130px; top:64px; left:-79px;}

#home-aboutdog{
    position: absolute;
    height: 306px;
    top: 1110px;
    left: 81px;
}

#home-aboutarrow{
    position: absolute;
    height: 142px;
    top: 1025px;
    left: 365px;
}




/* 🪤🪤SMALL MODE🪤🪤 */
@media screen and (max-width: 800px) {
    #home-main{
        height:1280px;
    }
    #home-welcomeimg{
        height:200px;
        left:100px;
    }

    #home-balloonimg{
        height:250px;
        right:2dvw;

        animation-name:balloon-mobile;
        animation-duration:7s;
        animation-iteration-count:infinite;
    }

    @keyframes balloon-mobile{
    0% {top:30px}
    50%{top:15px}
    100%{top:30px}
    }

    #home-quoteblock{
    position:relative;
    width:100%;
    height:200px;
    
    top:220px;
    left:auto;
    }

    #home-quoteblock img{
    height:20px;
    position: absolute;
    }

    .home-quotetext{
    font-family: 'resagokr';
    font-size: 1.5em;
    }

    #home-qt1{left:33px; top:33px;}
    #home-qt2{left:80px; top:64px;}
    #home-qt3{left:128px; top:95px;}
    #home-qt4{left:177px; top:123px;}
    #home-qmr{left:333px; bottom:8px;}

    #home-quote-attrib{
    font-family:'Raleway', 'Arial Narrow', Arial, sans-serif;
    font-size: 1em;
    left:234px;
    top:156px;
    }

    #home-pencilboy{
    position: absolute;
    top:326px;

    height:200px;
    }

    #home-portfolioarrowR{display:none}

    #home-portfolioarrowL{
    display:block;
    position: absolute;
    top:470px;
    right:30px;
    height:100px;
    rotate:-17deg;
    }

    #home-portfoliosign{
    position: absolute;
    top: 560px;
    left: 19px;
    height: 200px;
    }

    #home-aboutblock{
    position:relative;
    width:90%;
    
    top:590px;
    left:0;

    padding:5dvw;
    }

    #home-aboutblock hr{
    display:block;
    height:3px;
    width:80%;
    margin-left:auto;
    margin-bottom:20px;
    background-color:black;
    }
    
    #home-abmain{
    font-size: 1em;
    }

    #home-absub{
        font-family:'Raleway', 'Arial Narrow', Arial, sans-serif;
        font-size: 0.6em;
    }

    #home-findcontacttext{
        display:none;
    }

    #home-birdcont{
        right:0;
        width:50%;
        top:1010px;
        height:auto;
    }

        #home-birdmail{height:60px; top:0px; left:0px;
        animation-name:mailbird-mobile;
        animation-duration:7s;
        animation-iteration-count:infinite;
    }
        
    @keyframes mailbird-mobile{
        0% {top:0px; rotate:-5deg;}
        50%{top:-20px; rotate:5deg;}
        100%{top:0px; rotate:-5deg;}
    }

    #home-birdyellow{height:65px; top:50px; left:-21px;}
    #home-birdblue{height:65px; top:13px; left:23px;}

    #home-birdmotionlines{
        height: 40px;
        top: -79px;
        left: 19px;
        rotate: -7deg;}

    #home-aboutdog{
        left:10%;
        width:110px;
        top:1010px;
        height:auto;
    }

    #home-aboutarrow{
    height: 42px;
    top: 984px;
    left: 158px;
}
}





/* ===== ABOUT ======   */

#about-main{
    height:944px;
    font-family: 'resagokr';
}

#about-header{
    font-size:3em;
    text-align:center;
    padding-top:40px;
    margin-bottom:40px;
}

#about-content{
    display:flex;
    flex-direction:row;

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

    column-gap: 40px;

}

#about-subheader{
    font-size:2.5em;
    padding-bottom:25px;
}

#about-maintext p{
    font-size:1.2em;
}

#about-headshot-desktop{
    height:400px;
}


#about-contact{
    position: relative;
    margin-top:50px;

    width:80%;

    margin-left:auto;
    margin-right:auto;

}

#about-contactheader{
    
    font-size:2.5em;
    padding-bottom:25px;
}

#about-email{
    position:absolute;
    top:150px;
    left:0px;
}


/* 🪤🪤SMALL MODE🪤🪤 */
@media screen and (max-width: 800px) {
    #about-main{
    height:1432px;
    font-family: 'resagokr';
    }

    #about-content{
    flex-direction:column;
    column-gap:0px;
    }

    #about-maintext{
        padding-left:20px;
        padding-right:20px;
    }

    #about-headshot-desktop{
    display:none;
    }

    #about-headshot-mobile{
        display:block;
        width:200px;
        margin:auto;
    }


    #about-contact{
    position: relative;
    margin-top:30px;

    margin-left:10dvw;
    }

    #about-swirlarrow{
    position:absolute;
    width:87px;
    top:44px;
    left:30px;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    }

    #about-mailbird{
    position:absolute;
    top:56px;
    left:143px;
    }

    #about-mailbird img{
        width:150px;
    }

    #about-girlwave{
    position: absolute;
    top: 195px;
    left: 169px;
    width: 115px;
    }
}

/* 🌍🌍BIG MODE🌍🌍 */
@media screen and (min-width: 800px) {
    #about-maintext{
    width:50dvw;
    max-width:600px;
    }

    #about-headshot-mobile{
    display:none;
    }

    #mobilebr{
        display:none;
    }

    #about-swirlarrow{
    position:absolute;
    width:150px;
    top:10px;
    left:65px;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    }

    #about-mailbird{
    position:absolute;
    top:40px;
    left:305px;
    }

    #about-mailbird img{
        width:250px;
    }

    #about-girlwave{
    position:absolute;
    top:0px;
    left:612px;
    width:240px;
    }
}


/* ===== PORTFOLIO  ===== */

#portfolio-main{
    font-family: 'resagokr';
}

#portfolio-header{
    font-size:3em;
    padding-top:40px;
    margin-bottom:40px;
}

#portfolio-container{
    display:flex;
    flex-direction:row;

    align-items:center;
    justify-content:center;
    column-gap: 50px;
    margin-left:50px;
    margin-right:50px;
}

#portfolio-selector{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align:center;
    height:50px;
    column-gap: 5px;
}

#portfolio-selector a{
    padding-top:11px;
    text-decoration: none;
    color:black;
}

#portfolio-selector a:hover{
    filter: contrast(125%);
}

#portfolio-thumb{
    animation-name:portthumb;
    animation-duration:7s;
    animation-iteration-count:infinite;

    filter:drop-shadow(5px 0px 5px rgb(111, 111, 111))
}
        
@keyframes portthumb{
    0% {rotate:-5deg;}
    50%{rotate:5deg;}
    100%{rotate:-5deg;}
}

.pgroup{
    padding-top:40px;
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

.pgroup-header{
    font-size:2em;
}

.pgroup-imgcont{
    display:flex;
    flex-direction: column;
}

.pgroup-banner{
    width:100%;
}

/* = Slideshow code borrowed generously from w3 schools = */

#portfolio-slidecont{
    position:fixed;
    height:500px;

    display:block;
    margin-top:50px;
}

.p-slideimg{width:100%}

#p-slideprev, #p-slidenext{
    position:absolute;
    cursor: pointer;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

#p-slidenext{
    right: 0;
    border-radius: 3px 0 0 3px;
}

#p-slideprev:hover, #p-slidenext:hover{
    background-color: rgba(0,0,0,0.8);
}

.p-slidenumber{
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.p-slide{
    display:none;
    animation-name:slidefade;
    animation-duration:1.5s;
}

@keyframes slidefade{
    from{opacity: .4}
    to {opacity: 1}
}

/* 🪤🪤SMALL MODE🪤🪤 */
@media screen and (max-width: 800px) {

    #portfolio-header{
    font-size:2.6em;
    padding-left:30px;
    }

    #portfolio-thumb{
        width:100px;
        position:absolute;

        top:30px;
        left:247px;
    }

    #portfolio-textcont{
        font-size:1.1em;
        width:90dvw;
    }

    #portfolio-slidecont{
        width:95%;
        margin-left:2.5%;
    }

    #p-slideprev, #p-slidenext{
        top:38%;
    }

    #portfolio-selector{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:40px 40px;
    row-gap:5px;
    
    }
}


/* 🌍🌍BIG MODE🌍🌍 */
@media screen and (min-width: 800px) {

    #portfolio-header{
        text-align:center;
    }

    #portfolio-thumb{
        width:300px;
    }

    #portfolio-textcont{
    font-size:1.4em;
    }

    #portfolio-slidecont{
    width:500px;
    margin-left:calc(50% - 250px);
    }

    #p-slideprev, #p-slidenext{
        top:50%;
    }
}


/* ===== CONTACT ===== */

#contact-main{
    min-height:814px;
    height:91dvh;
    font-family: 'resagokr';
}

#contact-header{
    font-size:3em;
    padding-top:40px;
    margin-bottom:60px;
    text-align:center;
}

#contact-content{
    width:100%;
    display:grid;
    grid-template-columns:0.3fr 1fr;
    grid-template-rows:1fr;
}

#contact-mailboy{
    height:500px;
    margin-left:auto;
    margin-right:auto;
}

#contact-textandformcont{
    font-size:1.4em;
    margin-right:5px;
}

#contact-formcontainer-big{
    width:500px;
    height:350px;
}

#contact-formcontainer-small{
        display:none;
    }

/* == Contact form == */
#c-formbody{
    background-image:none;
}

#c-form{
    display:grid;
    grid-template-rows:0.3fr 0.3fr 1fr;
    grid-template-columns: 1fr 5fr;
    padding-top:30px;
}

#c-form label{
    text-align: right;
    font-family:'resagokr';
    font-size:1.3em;
    padding-top:6px;
    padding-right:10px;
}

#c-name, #c-email, #c-message{
    font-size:1.1em;
    padding-left:5px;

    margin-bottom:20px;
}

#c-name, #c-email{
    height:30px;
}

#c-message{
    height:100px;
}

#c-submit{
    grid-column-start:2;
    width: 50%;
    font-family:'resagokr';
    font-size:1.3em;
}

/* 🪤🪤SMALL MODE🪤🪤 */
@media screen and (max-width: 800px) {

    #contact-main{
        min-height:92dvh;
    }

    #contact-header{
        margin-bottom:30px;
    }

    #contact-mailboy{
        height:150px;
        margin-left:10px;
        margin-right:10px;
    }
    #contact-textandformcont p{
        font-size:0.8em;
    }

    #contact-formcontainer-big{
        display:none;
    }

    #contact-formcontainer-small{
        display:block;
        width:90%;
        height:400px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* 🌍🌍BIG MODE🌍🌍 */
@media screen and (min-width: 800px) {
    #contact-content{
        margin-left:3dvw;
        margin-right:3dvw;
    }

    #contact-textandformcont{
        width:80%;
    }
}