/*Portfolio Style Sheet*/

/*Style Tyle universal styling only*/
/*pre-vh/w scaling, font-sizes in order: 28,26,24,24,20,18,18*/
h1{
    color:mintcream;
    font-family: "Expletus Sans","Arima Madurai","Spectral","Georgia",sans-serif;
    font-size: 24px;
}
h2{
    color: #14E1FC;
    font-family: "Expletus Sans","Arima Madurai","Spectral","Georgia",sans-serif;
    font-size: 22px;
}
h3{
    color:mintcream;
    font-family: "Expletus Sans","Arima Madurai","Spectral","Georgia",sans-serif;
    font-size: 20px;
}
h4{
    color: #14E1FC;
    font-family: "Kanit","K2D","Epilogue","Cambria",sans-serif;
    font-size: 20px;
}
h5{
    color:mintcream;
    font-family: "Kanit","K2D","Epilogue","Cambria",sans-serif;
    font-size: 16px;
}
p{
    color:mintcream;
    font-family: "Kanit","K2D","Epilogue","Cambria",sans-serif;
    font-size: 14px;
}
pre{
    color:mintcream;
    font-family: "Kanit","K2D","Epilogue","Cambria",sans-serif;
    font-size: 14px;
}/*<pre>tag preserves spacing and formatting, but doesnt seem to help popping*/
ul{
    list-style: none;
    display: flex;
    /*margin:1%;
   /*background-color: olive;*/
}
a{
    color: #14E1FC;
}

*{
    box-sizing: border-box;
}/* ^^W3 says helps layout: includes padding and borders in element sizes for gridding*/

/*Style Tyle universal styling ^^^^^^^^^^^^*/


#bodyDisplay{
    background-color: #1B1B29;

    display: grid;
    /*grid-template-rows:     8.33%       16.67%          66.67%      8.33%   ;*/
    /*grid-template-rows:     .25fr        2fr             8fr         .75fr     ;*/
    grid-template-rows:     5vh         18vh            100vh        14vh    ;
    grid-template-areas:    "topNav"    "bannerQuote"   "bodyMain"  "botNav";
}

#topNav{
    width:100%;
    /*height: 60px;*/
    height: 50px;
    position:fixed;
    z-index: 10;

    grid-area: topNav;
    display: grid;
    /*grid-template-columns:1fr     4fr     3fr             5fr;*/
    grid-template-columns:  20vw    20vw    1vw            15vw; /*nullCenter was 24vw*/
    grid-template-areas:    "logo   name    nullCenterTop   navButton";
}

.navigation{
    background-image: url("../images/Aurora\ Blur\ Stein\ Egil\ Liland.jpeg");
    background-size: cover;
    background-attachment: fixed;
    opacity: 90%;
}/*sets the header/footer picture and style*/


.list-format{
    /*width: 100px;
    transform: translate(10%,0px);*/
    margin-right: 4vw;
    margin-top: -25px;
}
/*.list-format:hover{
    text-shadow: 0px 4px 12px #0a8dca;
    transition: 0.2s;
}*/

#nav1{
    /*About-Home
    for js targeting*/
}
#nav2{
    /*Work
    for js targeting*/
}
#nav3{
    /*Legacy
    for js targeting*/
}
#nav4{
    /*Personal
    for js targeting*/
}
#nav1:hover{
    text-shadow: 0px 4px 12px #32e60e;
    transition: 0.2s;
}
#nav2:hover{
    text-shadow: 0px 4px 12px #df0d0d;
    transition: 0.2s;
}
#nav3:hover{
    text-shadow: 0px 4px 12px #0b3bdb;
    transition: 0.2s;
}
#nav4:hover{
    text-shadow: 0px 4px 12px #cde20a;
    transition: 0.2s;
}

.inline-block{
    display: inline-block;
    vertical-align: middle;
}

/*topNav grid area declarations*/
#logo{
    /*width:20%;*/
    height: 50px;
    margin:2%;
    margin-top: 3.5%;
    margin-right: 10%;
    float: left;
    opacity: 100% !important; /*doesn't currently work*/
    border-radius: 4%;
    z-index: 8;

    display: grid;
    grid-area: logo;
    position: absolute;
    transform:translate(0px,-8px);

    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: 0.1s;
}
#logo:hover{
    height: 20vh;
    
    /*transform: translate(-48px,-20px);*/

}
#name{
    /*width: 300px;*/
    width: 20vw;
    margin: 5%;
    margin-left: 20px;
    
    grid-area: name;
    transform: translate(60px,0px);
}
#nullCenterTop{
    grid-area: nullCenterTop;
}
#navButton{
    grid-area: navButton;
    align-items: flex-end;
    padding: 1px;
    margin-left: 150%; /*calc(10% + 10vw);*/
}
/*topNav grid area declarations^^^^^^^^^^^^^*/

/*all things bannerQuote*/
#bannerQuote{
    grid-area: bannerQuote;
    text-align: center;

    cursor:pointer;
}

#hQuote{
    /*padding-bottom: 0px auto;*/
    margin-top: 30px;
}
#hQuote:hover{
    text-shadow: 0px 4px 12px #0a8dca;
    transition: 0.2s;
}
#hAuthor{
    margin-top: -2vh;
}
/*all things bannerQuote^^^^^^^^^^^^^^^^^^^^*/

/*keep the cursor from trying to type into text fields*/
.normText{
    cursor: default;
}

/*bodyMain declarations*/
#bodyMain{
    width:100%;
    text-align: center;
    
    display: grid;
    grid-area: bodyMain;
    /*grid-column-gap: 0.5%;
    grid-row-gap:    0.5%;*/

    /*grid-template-columns:  1fr         4fr             1fr         5fr         1fr       ;*//*pre-feedback*/
    /*grid-template-columns:  .5fr         5.5fr             .5fr         5fr         .5fr       ;*/
    grid-template-columns:  1vw         50vw            4vw        40vw        1vw       ;
    grid-template-areas:    "nullLeft   detailColumn    nullCenter  heroSpace   nullRight";
}

.bodyColumn{
    /*margin: 0px;*/
    margin: 1vw;
    display: block; /*allows cards to sit on top of each other; grid = evenly fills space
                    could technically affect Hero & Gutters, as well*/
}

#nullLeft{
    grid-area: nullLeft;
}
#detailColumn{
    grid-area: detailColumn;
}
#nullCenter{
    grid-area: nullCenter;
}
#heroSpace{
    grid-area: heroSpace;
    display: grid;
    /*box-shadow: 0px 0px 100px #11c6e6 inset;*/

    /*grid-template-columns:  2fr 1fr 2fr;
    grid-template-rows:     3fr .5fr 2fr;*/

    /*grid-template-columns:  40% 20% 40%;
    grid-template-rows:     50% 10% 40%;*/

    /*grid-template-columns: 20vw 5vw 20vw;
    grid-template-rows: 32vh 5vh 5vh;*/
    grid-template-columns: 18vw 4vw 18vw;
    grid-template-rows: 40vh 5vh 20vh;
    grid-template-areas:
        "heroPic heroPic heroPic"
        "heroText heroText heroText"
        "heroStatLeft heroStatGap heroStatRight";
}
#nullRight{
    grid-area: nullRight;
}
/*bodyMain grid declarations^^^^^^^^^^^^^^^^^^^^^^*/


/*card declarations*/
.card{
    background-color: rebeccapurple;
    text-align: justify;
    /*height: 200px;*/
    height: 20vh;
    border-radius: 2%;
    margin-bottom: 5vh;

    padding-left:2%;
    padding-right:2%;

    display: grid;
    /*grid-template-columns: 65% 35%;
    grid-template-rows: 20% 80%;*/
    grid-template-columns: 30vw 10vw;
    grid-template-rows: 5vh 20vh;
    grid-template-areas:    "cardTitle cardPic"
                            "cardDetails cardPic";
    grid-column-gap: 4%;
    grid-row-gap:    2%;
}
.card:hover{
    box-shadow: 0px 4px 12px 2px rgba(20, 225, 252, 0.4);
    transition: 0.2s;
}

.cardTitle{
    grid-area: cardTitle;
    margin-top: 4px;
    margin-left: default;
    margin-bottom: 1px;
    height:25px;
    overflow: hidden;
}
.cardDetails{
    grid-area: cardDetails;
    /*margin-top: 10%;*/
    height: 13.5vh;
    margin-top: 1vh;
    margin-left: default;
    overflow: hidden;
}
.cardPic{
    height: 18vh;
    width: 120%;
    max-width: 15vw;
    border-radius: 4%;

    margin:4%;
    margin-left: 14%;
    grid-area: cardPic;
    object-fit: cover; /*rwd crop*/ /*for portraits: HTML overrides*/
}


/*heroSpace declarations*/
#heroPic{
    /*width:800px;
    height:450px;*/
    height: 40vh;
    max-width: 25vw;
    /*min-width: 15vw;*/

    /*this chunk is all border control*/
    border-radius: 4%;
    border-style:ridge;
    border-color: #4d0463;
    border-bottom-width: thick;
    border-top-width: thick;
    border-right: 0px;
    border-left: 0px; 

    grid-area: heroPic;
    position:initial;
    margin-left: 12vw;
    object-fit: cover; /*rwd crop*/
    z-index: -1; /*somewhere along border creation, heroPic started trumping topNav*/
}
#heroPic:hover{
    box-shadow: 0px 4px 12px 2px rgba(20, 225, 252, 0.4);
    transition: 0.2s;
}
#heroRef{
    /*for js targeting*/
}

#heroText{
    grid-area: heroText;
    /*z-index: 0;*//*puts it above the image*/
    margin-top: 1vh;
    margin-left: default;
}

#heroStatLeft{
    grid-area: heroStatLeft;
    margin: 4%;

    /*position: absolute; /*does stop popping...*/
}
#heroStatGap{
    grid-area: heroStatGap;
}
#heroStatRight{
    grid-area: heroStatRight;
    margin: 4%;

    /*position: absolute; /*does stop popping...*/
}
#iconLeft{
    margin-top: calc(88px - calc(14vw / 2 ));
}
#statNumLeft{
    margin-top: calc(150px - calc(14vw / 2 ));
}
#statTextLeft{
    margin-top: -12px; /*more px, less vh for tall screens*/
}
#iconRight{
    margin-top: calc(88px - calc(14vw / 2 ));
}
#statNumRight{
    /*margin-top: 14vh;*/
    margin-top: calc(150px - calc(14vw / 2 ));
}
#statTextRight{
    margin-top: -12px;
}

.statIcon{
    width: 60px;
    transform:translate(-30px,0px);
    position: absolute;

    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}

.statIcon:hover{
    width: 80px;
    transform: translate(-40px,-20px);
}
/*heroSpace declarations^^^^^^^^^^^^^^^^^^^^^^^^^^*/

#botNav{
    text-align: right;
    grid-area: botNav;
    align-items: end;
}

.socialIcon{
    width: 42px;
    margin: 20px;
    position: absolute;
    transform: translate(-180px,-10px);
    
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
    transition-delay: 0.1s;
}
.socialIcon:hover{
    width: 60px;
    transform: translate(-187px,-17px);
}
/*need a specific override to parse absolute positions*/
#socialRes{
    transform: translate(-275px,-20px);
    width: 65px;
}
#socialRes:hover{
    transform: translate(-282px,-27px);
    width: 80px;
}
#socialLink{
    /*for js targeting*/
}
#socialLink:hover{
    /*for js targeting*/
}
#socialFaz{
    transform: translate(-100px,-10px);
}
#socialFaz:hover{
    transform: translate(-107px,-17px);
}


#about-lead{
    /*for js targeting*/
}
#pic-lead{
    /*for js targeting*/
}
#about-change{
    /*for js targeting*/
}
#pic-change{
    /*for js targeting*/
}
#about-user{
    /*for js targeting*/
}
#pic-user{
    /*for js targeting*/
}

#work-DASNW{
    /*for js targeting*/
}
#pic-DASNW{
    /*for js targeting*/
}
#work-FridgeFA{
    /*for js targeting*/
}
#pic-FridgeFA{
    /*for js targeting*/
}
#work-SPlant{
    /*for js targeting*/
}
#pic-SPlant{
    /*for js targeting*/
}
#work-HGem{
    /*for js targeting*/
}
#pic-HGem{
    /*for js targeting*/
}

#legacy-rpg{
    /*for js targeting*/
}
#pic-rpg{
    /*for js targeting*/
}
#legacy-charSheet{
    /*for js targeting*/
}
#pic-charSheet{
    /*for js targeting*/
}
#legacy-con{
    /*for js targeting*/
}
#pic-con{
    /*for js targeting*/
}


#pers-games{
    /*for js targeting*/
}
#pic-games{
    /*for js targeting*/
}
#pers-guru{
    /*for js targeting*/
}
#pic-guru{
    width: 90%;
}
#pers-hobbies{
    /*for js targeting*/
}
#pic-hobbies{
    /*for js targeting*/
}
/*card declarations^^^^^^^^^^^^^^^^^^^^^^^^^^*/

/*Mobile*/
@media all and (max-width: 675px){
    
    #bodyDisplay{
        grid-template-rows:     50px       100px            1070px      60px     ;
        grid-template-areas:    "topNav"    "bannerQuote"   "bodyMain"  "botNav";
    }

    #topNav{
        height: 70px;

        grid-template-rows:     1fr;
        grid-template-columns:  1fr         1fr         3fr        ;
        grid-template-areas:    "logo       name        navButton  ";
    }
    #navButton{
        margin-left: 0px; /*calc(10% + 10vw);*/
    }
    
    #bodyMain{
        /*width:100%;
        text-align: center;
        
        display: grid;
        grid-area: bodyMain;
        grid-column-gap: 0.5%;
        grid-row-gap:    0.5%;*/

        grid-template-rows:     10vh         75vh          12vh            100px             10vh        ;
        grid-template-areas:    "nullLeft"  "heroSpace"  "nullCenter"   "detailColumn"  "nullRight";
    }
    
    #heroSpace{
        /*grid-area: heroSpace;
        display: grid;*/
        grid-template-columns: 29vw 4vw 29vw;
        grid-template-rows: 40vh 10vh 20vh;
        grid-template-areas:
            "heroPic heroPic heroPic"
            "heroText heroText heroText"
            "heroStatLeft heroStatGap heroStatRight";
    }

    #heroPic{
        max-width: 60vw;
        margin-left: 90px;
        /*position: sticky;
        top: 10px;*/
    }
    
    #heroText{
        margin-left: 10vw;
        margin-right: -5vw;
    }

    .card{
        width: 90vw;
        display: grid;
        grid-template-columns: 45vw 40vw;
        grid-template-rows: 5vh 20vh;
        /*grid-template-areas:    "cardTitle cardPic"
                                "cardDetails cardPic";
        grid-column-gap: 4%;
        grid-row-gap:    2%;*/
    }
    
    .cardPic{
        width: 30vw;
        max-width: 200px;
        /*margin:2%;
        text-align: center;
        grid-area: cardPic;*/
    }
    .cardTitle{
        margin-left: 8px;
    }
    .cardDetails{
         margin-left: 8px;
    }
    
    #iconLeft{
        margin-top: 20px;
        margin-left: 6vw;
    }
    #iconRight{
        margin-top: 20px;
        margin-left: 15vw;
    }
    #statNumLeft{
        margin-top: 80px;
        margin-left: 12vw;
    }
    #statNumRight{
        margin-top: 80px;
        margin-left: 25vw;
    }
    #statTextLeft{
        width: 200px;
        margin-left: 2vw;
    }
    #statTextRight{
        width: 200px;
        margin-left: 10vw;
    }
}

/*Desktop*/
@media all and (min-width: 1500px){

    p{
        font-size: 16px;
    }

    .cardPic{
        width: 200%;
    }
    
    #navButton{
        margin-left: 20vw; /*calc(10% + 10vw);*/
    }

    #iconLeft{
        margin-top: calc(118px - calc(14vw / 2 ));
    }
    #iconRight{
        margin-top: calc(118px - calc(14vw / 2 ));
    }
    #statNumLeft{
        margin-top: calc(180px - calc(14vw / 2 ));
    }
    #statNumRight{
        margin-top: calc(180px - calc(14vw / 2 ));
    }
}