/*
*   styles.css
*   for gabrielscott.io
*
*   copyright (c) 2022 - 2023 Gabe Scott   
*/

/***            Global Style                                           */
/** -----------------------------------------------------------------  */

* { /* border:1px dashed red; */    /* This will outline everything in red for testing */

}
html {                     
    box-sizing: border-box;
    background-color: rgb(2, 40, 60);   /* background matches top of body, for bounce effect in browser */
    font-size: 15px;

    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: none;
}
/*     'BOX MODEL FIX'          */
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: none;
    color: #343434;            /* text color */
    background-color: #DEEFF7;
    margin: 0;
    padding: 0;
    font-family: acumin-pro,sans-serif;
    font-weight: 400;
    font-style: normal;
}
h1 {
    font-family: acumin-pro,sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.2rem; 
}
h2 {
    font-family: acumin-pro,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.8rem;
    margin: 0;
}
h3 {
    font-family: acumin-pro,sans-serif;
    font-weight: 600;
    font-size: 1.3rem;     
    margin-bottom: 0;
}
h4 {
    font-size: 1.22rem;
}
p {
    font-size: 1.17rem;
}
p.italic-p {
    font-style: italic;
}
/* Only first p after h3 heading */
.item-details h3 + p {        
    font-style: italic;
}
/* general sibling combinator - all p after h3 */
.item-details h3 ~ p {    
    margin: 0;
}
/* All images w/o logos */
img {    
    border-radius: 15px;
    width: 320px;
    /* horizontal-offset, v-offset, blur radius, spread radius (size of shadow)  */
    box-shadow: 3px 6px 16px 0px #3d3c3cd3;  
    margin: 0 13px 15px 13px;
}
img.gameplay, video.gameplay {    
    border-radius: 15px;
    width: 320px;
    box-shadow: 3px 6px 16px 0px #3d3c3cd3;  /* horizontal-offset, v-offset, blur radius, spread radius (size of shadow)  */
    margin: 0 13px 15px 13px;
}
a:focus {
    /* outline: 1px solid black;  */
    outline: 1px dashed rgba(32, 32, 32, 0.92); 
}
a.btn {         /* blue button links */
    color: #f7f7f7;
    background-color: #02283C;
    text-decoration: none;
    padding: 5px 7px;
    border-radius: 4px;
    box-shadow: 0px 2px 5px 0px #3d3c3cd3;   /* originally   0px 4px 5px 1px #3d3c3cd3  */
    display: inline-block;
    margin: 4px;
    font-size: 1.125rem;
}
a.btn.inline-btn {      /* btn link AND inline-btn link */
    margin-left: 4px;
    margin-right: 4px;
}
a.btn:hover {
    background-color: rgba(2, 40, 60, 0.79);
}
a.btn:active {
    color: white;
}
a.github-icon-link {
    margin-left: 12px;
}
.container {
    max-width: 800px;
    width: 85%;
    margin: 0 auto;
    padding: 60px 0;
}
/*   Re-usable divider that separates things in .container (projects, jobs)  */
.divider > section {   
    /* border-bottom: 1px dashed #aaa7a7; */
    border-bottom: 1px dashed #d1cdcd66;
    padding: 25px 0;
}
/* Remove border from last item in  list  */
.more-projects.divider > section:last-of-type {  /* I am using it on ONLY classes that are in BOTH .newprojects AND .divider (these classes are siblings */
    border-bottom: none;
}
svg.icon-svg, svg.paragraph-svg {
    display: inline-block;
    padding: 15px; 
}

li {
    font-size: 1.17rem;
}
.off-white-text {
    color: #f7f7f7;
}
/* Hide an element */
.hide { display: none; }


/***       Profile                                                     */
/** -----------------------------------------------------------------  */

header {
    background-color: #02283C;
    color: #f7f7f7;     /* text color */
    width: auto;
    margin-top: -25px;
}
span.intro-transition {
    font-size: 1.29rem;
    font-weight: 650;
}
header p {
    padding-bottom: 11px;
}
header p:last-child {
    padding-top: 9px;
    padding-bottom: 0;
}
header h2 {
    font-size: 1.7rem;
}

/***            Projects                                               */
/** -----------------------------------------------------------------  */

section.project-item {
    /**  "Self Clear" - For ending float. Called in parent element instead of next element in the flow. I believe this is done because there is nothing left in the container..?    */   
    overflow: hidden;
}
h2.more-projects-header {
    margin: 15px 0;
}
#db-project img {
    border-radius: 15px;
}
/* img[src="images/twohand_screenshot.png"] */
video.gameplay, img.gameplay {
    border-radius: 15px;
}
div.more-info {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: start;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 10px;
}
.more-info-svg {
    display: inline-block;
    /* Note: size gets set in media queries */
}
.more-info-svg:hover {
    fill: rgba(2, 40, 60, 0.53);
}
.more-info-svg:focus {
    outline: 1px solid black; 
}
.more-info a:first-child:focus {
    outline: none;
}
.more-info a:last-child:hover {
    color: rgba(2, 40, 60, 0.53);
}

/*  Ethereum Logo     */
#ethereum>svg {
    display: block;
}
#discourse-logo {
    border-radius: 15px;
}

/***            Work Experience                                        */
/** -----------------------------------------------------------------  */

section.work-experience {  
    background-image: linear-gradient(to bottom, #02283c, #0f4c5b); 
    color: #f7f7f7;
}
section.work-experience a{
    color: #f7f7f7;
}
section.work-experience a:focus {
    outline: #d1cdcd dashed 1px;
}
section.work-experience a:hover {
    color: #f7f7f7a7;
}
section.job-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.flex-paragraph a:focus {
    outline: none;
}
svg.paragraph-svg {
    margin-left: 5px;
    margin-right: 5px;
}
.work-experience svg.paragraph-svg:hover {
    fill:rgba(173, 192, 203, .8);
}
.work-experience svg.paragraph-svg:focus {
    outline: 1px dashed #d1cdcd;
}
.flex-paragraph {
    font-weight: 600;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 1.24rem;
    margin-bottom: 0;
    margin-top: 0;
}
.flex-paragraph a:last-child {
    padding-left: 10px;
}
li.news-article {
    margin: 0.5em 0;
}
section.env-tech {
    padding-top: 15px;
}
section.env-tech > div:nth-child(2) > ul:nth-child(2) > li:nth-child(2) > p:nth-child(1) {
    margin-bottom: 0;
}
section.professional-poker {
    padding-top: 15px;
}
/***            Education                                              */
/** -----------------------------------------------------------------  */

section.ou > h3:first-child {
    margin-top: 25px;
}



/* I have nothing targeting education specifically at the moment */

/***            Footer - Contact Info                                  */
/** -----------------------------------------------------------------  */

footer {
    color: #f7f7f7;
    /* background-color: #156579; */
    background-color: #0f4c5b;
    text-align: center;
    padding-bottom: 50px;
}
div.footer-container {
    height: 345px;
}
.contact-list {
    list-style-type: none;
    padding: 15px 0 0 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;    /* like right justified paper */
    align-items: center;        /* opposite axis */   
}
.contact-list li {
    flex: 0 0 auto;
}
ul.contact-list svg:hover {
    fill:rgba(173, 192, 203, .8);
}
.contact-list a:focus, .contact-list svg:focus {
    /* outline: 0.8px dashed #d1cdcd; */
    outline: none;
}
.copyright-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.copyright-info>div {
    margin-right: 4px;
    flex: 0 0 auto;
}
.copyright-info div:last-child {
    flex: 0 0 auto;
    color: #f7f7f77f;
}
p.copyright-p {
    font-size: 12px;
}
.dynamic-finger-p {
    margin-bottom: 0;
}

/***            Media Queries                                          */
/** -----------------------------------------------------------------  */

@media screen and (min-width: 750px) {
    body {
        line-height: 1.68; 
    }   
    /* class that adds 25px at the highest screen size */
    .space-above {
        margin-top: 15px;
    }
    header {
        text-align: center;
    }
    .project-item img, video.gameplay {
        float: left;
        margin-right: 34px;
    }
    .project-item h3 {
        margin-top: 0px;
    }
    .job-item {
        display: grid;
        grid-template-columns: 2fr 3fr; /* 2nd col will be 2x size of first */
        column-gap: 25px;
    }
    svg.icon-svg {
        height: 61px;
        width: auto;
    }
    svg.fingerprint-svg {
        height: 56px;
        width: auto;
    }
    svg.paragraph-svg {
        width: 76px;
        height: auto;
    }
    .more-info-svg {
        width: 60px;
        height: auto;
    }
    .copyright-svg {
        height: 13px;
    }
    .more-info>div:first-child {
        flex: 1 4 auto;
        width: 16px;
    }
    .more-info > div:last-child {
        flex: 4 1 auto;
        /*width: 60px;  */
    }
    .more-info>div>a>strong {
        font-size: 1.3rem;
    }
    #ethereum {
        float: left;
        width: 150px;
        margin: 0 128px 0px 90px;
    }
}
/* Landscape orientation adjustments */
/*
@media screen and (min-width: 750px) and (orientation:landscape) {
    .container {
        max-width: 500px;
    }

    body {
        line-height: normal; 
    } 
    .project-item h3 {
        margin-top: 10px;
    }
    .more-info>div:last-child {
        padding-left: 5px;
    }
    footer h2 {
        font-size: 1.69rem;
    }
    svg.icon-svg {
        height: 59px;
        width: auto;
    }
    svg.fingerprint-svg {
        height: 54px;
        width: auto;
    }
    #ethereum {
        margin: 0 auto 30px auto;
    }
    #ethereum>svg {
       /* margin: 0 90px 0 0;   */
/*
    }
    footer {
        padding-bottom: 25px;
    }
    .space-above {
        margin-top: 10px;
    }
    .more-info-svg {
        width: 44px;
        height: auto;
    }
    svg.paragraph-svg {
        width: 68px;
        height: auto;
    }
    img {
        width: 305px;
    }
    .copyright-svg {
        height: 10px;
    }
    .more-info>div>a>strong {
        font-size: 1.13rem;  
    }
}
*/
@media screen and (max-width: 749px) {
    body {
        line-height: normal; 
    } 
    .space-above {
        margin-top: 15px;
    }
    .project-item h3 {
        margin-top: 10px;
    }
    .more-info-svg {
        width: 55px;
        height: auto;
    }
    .copyright-svg {
        height: 11px;
    }
    .more-info>div:last-child {
        padding-left: 5px;
    }
    .more-info>div>a>strong {
        font-size: 1.16rem;
    }
    svg.paragraph-svg {
        width: 76px;
        height: auto;
    }
    footer h2 {
        font-size: 1.69rem;
    }
    svg.icon-svg {
        height: 59px;
        width: auto;
    }
    svg.fingerprint-svg {
        height: 54px;
        width: auto;
    }
    #ethereum {
        width: 150px;
        margin: 0 auto 35px 90px;
    }
}
@media screen and (max-width: 523px) {
    footer {
        padding-bottom: 25px;
    }
}
@media screen and (max-width: 455px) {
    .space-above {
        margin-top: 10px;
    }
    .more-info-svg {
        width: 44px;
        height: auto;
    }
    svg.paragraph-svg {
        width: 68px;
        height: auto;
    }
}
@media screen and (max-width: 400px) {
    img, video.gameplay {
        width: 305px;
    }
    .copyright-svg {
        height: 10px;
    }
    .more-info>div>a>strong {
        font-size: 1.13rem;  
    }
}
@media screen and (max-width: 390px) {
    img, img.gameplay, video.gameplay {
        width: 90%;
    }
    #ethereum {
        margin-left: auto;
        margin-right: auto;
        width: 41%;
    }
}
@media screen and (max-width: 299px) {
    div.footer-container {
        height: 500px;
    }
    .contact-list {
        display: block;
    }
    .contact-list>li:first-child {
        margin-top: 12px;
    }
}

@media screen and (max-width: 264px) {
    footer {
        padding-bottom: -25px;
    }
    .more-info {
        display: block;
    }
}