/* TOP SECTION FOR WHOLE USER EXPERIENCE ON WEBSITE */

@font-face {
    font-family: 'Antic Slab';
    src: url("Antic_Slab/AnticSlab-Regular.ttf")
}

body {
    font-family: 'Antic Slab', serif, sans-serif;
    margin: 0;
    background: black;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #FFFFFF, #FFFFFF, #FFEFBA);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to right, #FFFFFF, #FFFFFF, #FFEFBA); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: square;
}

.fixedOneSide {
    position: fixed;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.5);
}

.leftSide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* HIDE ALL OTHER FIXED ONE SIDE ELEMENTS SO THEY CAN BE FADED IN */

.fixedOneSide:nth-child(n+2) {
    opacity: 0;
    pointer-events: none;
}

.fullPage {
    display: flex;
    /*background: #FAFAFA;*/
    background: white;
}

.halfPage {
    width: 50vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftGrid {
    display: grid;
    grid-column-gap: 3vw;
    grid-row-gap: 3vh;
    height: 85%;
    width: 95%;
}

.threeByThreeGrid {
    grid-template-columns: repeat(3, 13vw);
    grid-template-rows: repeat(3, 26vh);
}

.leftDescription {
    /*grid-column: 2 / span 2;*/
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: auto;
    font-size: calc(0.6vw + 0.7vh);
    text-align: center;
    background: inherit;
}

.leftDescription p {
    cursor: auto !important;
}

.showMore {
    cursor: pointer;
}

/* INTRODUCTORY SECTION */

.bigHeader {
    font-size: 7vw;
    margin: 0;
}

.mediumHeader {
    font-size: 4vw;
}

#introPics {
    /*grid-template-columns: repeat(4, 1fr);*/
    /*grid-template-rows: repeat(4, 1fr);*/
    grid-template-columns: repeat(4, 9vw);
    grid-template-rows: repeat(4, 20vh);
}

.picItem {
    box-shadow: rgba(0, 0, 0, 0.8) 8px 10px 15px;
    cursor: pointer;
    /*background: black;*/
    width: 100%;
    height: 100%;
}

.picItem img {
    width: 100%;
    height: 100%;
}

.picItem:hover {
    box-shadow: rgba(255, 239, 186, 0.8) 8px 10px 15px;
}

#mePicDiv {
    grid-column: 1 / span 2;
    grid-row: 1 / span 3;
}

#bubbleLettersDiv {
    grid-column: 1 / span 2;
    overflow: hidden;
    background: black;
    text-align: center;
}

#bubbleLetters {
    width: 80%;
    height: 102%;
}

/*.introPics img {*/
    /*width: 100%;*/
    /*height: 100%;*/
/*}*/

.introText {
    font-size: 1.8vw;
}

.textPadding {
    padding: 30px;
}

/* WINDOW THAT REVEALS BACKGROUND */

.windowToBackground {
    height: 50vh;
    background-attachment: fixed;
    background-size: 100% 120%;
    background-position: 0 -10px;
}

#codingBackground {
    background-image: url("images/codefather.jpg");
}

#oxfordCircusBackground {
    background-image: url("images/oxfordCircusMeet2.jpg");
}

#codingBackground2 {
    background-image: url("images/axeThrowing.jpg");
}

#choirBackground {
    background-image: url("images/showChoir.jpg");
}

#codingBehindBackground {
    background-image: url("images/codingBack.jpg");
}

#lakeBackground {
    background-image: url("images/lakeFlip.jpg");
    height: 100vh;
}

/* GAMING SHOWCASE SECTION */


#gamePics {
    /*grid-template-columns: repeat(3, 1fr);*/
    /*grid-template-rows: repeat(3, 1fr);*/
    /*grid-template-columns: repeat(3, 13vw);*/
    /*grid-template-rows: repeat(3, 26vh);*/
}

#gamingPicContainer {
    /*grid-column: 1 / span 2;*/
    /*grid-row: 1 / span 2;*/
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: default;
}

#gamingLeftDescription {
    grid-column: 2 / span 2;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    /*cursor: auto;*/
    /*font-size: calc(0.6vw + 0.7vh);*/
}

/* FRONT-END SHOWCASE SECTION */

#frontEndPics {
    /*grid-template-columns: repeat(3, 13vw);*/
    /*grid-template-rows: repeat(3, 26vh);*/
}

#frontEndTrioContainer {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: auto;
}

/*#frontEndTrio {*/
    /*width: 80%;*/
    /*height: 80%;*/
/*}*/

#frontEndLeftDescription {
    grid-column: 2 / span 2;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: auto;
}

/* NODE.JS SHOWCASE SECTION */

/*#nodePics {*/
    /*display: grid;*/
    /*grid-template-columns: repeat(3, 1fr);*/
    /*grid-template-rows: repeat(3, 1fr);*/
    /*grid-column-gap: 3vw;*/
    /*grid-row-gap: 3vh;*/
    /*height: 85%;*/
    /*width: 95%;*/
/*}*/

#nodeLogoContainer {
    background: inherit;
    /*grid-column: 1 / span 2;*/
    /*grid-row: 1 / span 1;*/
    text-align: center;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: default;
}

#nodeLogo {
    max-width: 90%;
    max-height: 100%;
}

#fullStackExplanation {
    background: inherit;
    grid-column: 2 / span 2;
    /*grid-row: 3 / span 1;*/
    text-align: center;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: auto;
}

/* DATA VIS LEFT SECTION */

/*#dataVisPics {*/
    /*display: grid;*/
    /*grid-template-columns: repeat(3, 1fr);*/
    /*grid-template-rows: repeat(3, 1fr);*/
    /*grid-column-gap: 3vw;*/
    /*grid-row-gap: 3vh;*/
    /*height: 85%;*/
    /*width: 95%;*/
/*}*/

#dataVisLogoContainer {
    text-align: center;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: default;
}

#dataVisLeftDescription {
    grid-column: 2 / span 2;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: auto;
}

/* ABOUT ME LEFT */

.aboutMeText {
    padding: 40px;
    font-size: calc(0.2vw + 1.8vh);
}

#aboutMeTitle {
    margin: 10px;
}

/* INDIVIDUAL PROJECTS */

.project {
    display: flex;
    align-items: center;
    min-height: 260px;
}

.projectImage {
    width: 200px;
    height: 200px;
}

.projectImage img {
    width: 200px;
    height: 200px;
}

.projectText {
    padding: 10px;
}

/**/


/* MEDIA QUERIES */

/* grid 3 columns for left pics */
@media only screen and (max-width: 1164px) {
    #introPics {
        grid-template-columns: repeat(3, 1fr);
    }

    #introPics .picItem:nth-child(n+8) {
        display: none;
        /*opacity: 0;*/
    }

    .introText {
        font-size: 2.3vw;
    }

    .project {
        flex-direction: column;
        text-align: center;
    }

    .mediumHeader {
        text-align: center;
    }
}

/* switch to portrait view, one on top one on bottom */
@media only screen and (max-width: 800px) {
    .fullPage {
        flex-direction: column;
    }

    .halfPage {
        /*height: 50vh;*/
        width: 100vw;
    }

    .bigHeader {
        font-size: 8vh;
    }

    .mediumHeader {
        font-size: 7vh;
    }

    .halfPage:nth-child(odd) {
        display: none;
    }

    .introText {
        font-size: 3vh;
    }

    .fixedOneSide {
        display: none;
        /*position: fixed;*/
        /*top: 0;*/
        /*left: 0;*/
        /*width: 100vw;*/
        /*height: 50vh;*/
        /*background: rgba(255, 255, 255, 0.5);*/
    }

    #section_6 {
        display: block;
        width: 100vw;
    }

    #introPics {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 3vw;
        grid-row-gap: 3vh;
        height: 85%;
        width: 95%;
    }

    .picItem:nth-child(n) {
        display: block;
        /*opacity: 0;*/
    }
}

/* ANIMATIONS */

.vanish {
    animation: vanish 600ms linear 0s forwards;
}

.appear {
    animation: appear 600ms linear 0s forwards;
}

@keyframes vanish {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}