html,
body {
    height: 100%;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: 0px;
}

body {
    background-color: #cad2c5;
}

/*--- NAV BAR STYLES ---*/

.navBar {
    display: none;
}

.phoneNav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    font-family: 'syncopate';
    background-color: black;
}

.phoneTitle {
    font-family: 'syncopate';
    color: #cad2c5;
    letter-spacing: 10px;
    font-size: 20px;
}

.navLinks {
    position: absolute;
    right: 0px;
    height: 25vh;
    top: 8vh;
    background-color: black;
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 40%;
    transform: translateX(100%);
}

.navLinks li {
    opacity: 0;
    margin-left: 1em;
}

.burger {
    display: block;
    cursor: pointer;
}

.nav-active {
    transform: translateX(0%);
    display: flex;
}


@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.navLinks li {
    list-style: none;
}

.navLinks a {
    color: #cad2c5;
    text-decoration: none;
    letter-spacing: 3px;
    font-size: 12px;
}


.burger div {
    width: 25px;
    height: 2px;
    background-color: #cad2c5;
    margin: 5px;
}

/*--- HOME PAGE STYLES ---*/

.homeGrid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(24, auto);
    column-gap: 1em;
    row-gap: 1em;
    justify-items: center;
}

#logo {
    max-width: 100%;
    grid-column: 2 / 14;
    justify-content: center;
}

.homeText {
    font-family: 'syncopate';
    text-align: center;
    font-size: 20px;
}
#contest {
    letter-spacing: 3px;
    grid-column: 2 / 14;
}

#year {
    letter-spacing: 5px;
    grid-column: 2 / 14;
}

#homeInfo {
    font-family: 'lato';
    padding: 5px;
    margin-top: 1em;
    grid-column: 2 / 14;
}

#winner {
    padding: 5px;
    margin-top: .5em;
    grid-column: 2 / 14;
}

#countdown {
    background-color: black;
    color: #cad2c5;
    font-family: 'lato';
    padding: 10px;
    grid-column: 2 / 14;
    border-radius: 5px;
}

#contenders {
    letter-spacing: 3px;
    margin-top: 1em;
    padding: 5px;
    grid-column: 2 / 14;
}


.profileLink {
    text-decoration: none;
    background-color: black;
    color: #cad2c5;
    text-align: center;
    padding: 1em;
    padding-left: 2em;
    padding-right: 2em;
    font-family: 'syncopate';
    letter-spacing: 3px;
    font-size: 16px;
    border-radius: 5px;
    grid-column: 2 / 14;
    margin-top: 2em;
}

.profileLink:hover {
    color: #8d99ae;
    font-weight: 700;
}

.homePics {
    grid-column: 2 / 14;
    max-width: 100%;
}

/*--- END HOME PAGE STYLES ---*/


/*--- IFRAME STYLES ---*/

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*---END IFRAME STYLES ---*/


/*--- PROFILE HEADER STYLES ---*/

.profileHeader {
    font-family: 'syncopate';
    font-size: 25px;
    letter-spacing: 3px;
    background-color: black;
    color: #cad2c5;
    text-align: center;
    margin: 2em;
    padding: 1em;
    border-radius: 5px;
}

/*--- END PROFILE HEADER STYLES ---*/


/*--- DEFINES PROFILE PAGE GRIDS ---*/

.profileGrid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(12, auto);
    column-gap: 1em;
    row-gap: 1em;
    justify-items: center;
}

/*--- END PROFILE GRID ---*/


/*--- PROFILE TEXT STYLES ---*/

.profileText {
    font-family: 'lato';
    font-size: 20px;
    grid-column: 2 / 14;
}

/*--- END PROFILE TEXT STYLES ---*/


/*--- PROFILE PICTURE STYLES ---*/

.profilePics {
    max-width: 100%;
    grid-column: 2 / 14;
}

/*--- END PROFILE PICTURE STYLES ---*/


/*--- API VIDEO STYLES ---*/

.videos {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    grid-column: 2 / 14;
}

/*--- END API VIDEO STYLES ---*/


/*--- DEFINES ABOUT PAGE GRID ---*/

.aboutGrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, auto);
    column-gap: 1em;
    row-gap: 1em;
    justify-items: center;
}

/*--- END ABOUT GRID ---*/


/*--- ABOUT PAGE STYLES ---*/

.aboutText {
    font-family: 'lato';
    font-size: 20px;
}

/*#aboutLogo {
    max-width: 100%;
    grid-column: 2 / 12;
}*/

#aboutInfo {
    grid-column: 2 / 12;
    grid-row: 2 / 3;
}

#trophy {
    max-width: 100%;
    grid-column: 2 / 12;
    grid-row: 3 / 4;
}

#winnerHeading {
    font-family: 'syncopate';
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px;
    margin: 20px;
    grid-column: 2 / 12;
    grid-row: 4 / 5;
}

#winnerList {
    font-family: 'lato';
    font-size: 15px;
    list-style: none;
    grid-column: 1 / 6;
    grid-row: 5 / 6;
}

#winnerList2 {
    font-family: 'lato';
    font-size: 15px;
    list-style: none;
    grid-column: 6 / 13;
    grid-row: 5 / 6;
}

#partInfo {
    grid-column: 2 / 12;
    grid-row: 6 / 7;
}

#partChart {
    grid-column: 2 / 12;
    grid-row: 7 / 8;
}

#styleInfo {
    grid-column: 2 / 12;
    grid-row: 8 / 9;
}

#styleChart {
    grid-column: 2 / 12;
    grid-row: 9 / 10;
}

.galleryButton {
    grid-column: 2 / 12;
    grid-row: 10 / 11;
}

#coverGallery {
    grid-column: 2 / 12;
    grid-row: 11 / 12;
}

/*--- END ABOUT PAGE STYLES ---*/


/*--- CONTACT PAGE STYLES ---*/
#contactHead {
    font-family: 'syncopate';
    text-align: center;
    font-size: 25px;
    letter-spacing: 3px;
    margin: 2em;
}

#contactP {
    font-family: 'lato';
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px;
    margin: 1em;

}

#contact {
    font-family: 'lato';
}

#contactForm {
    max-width: 550px;
    width: 90%;
    margin: 2em auto 0 auto;
    padding: 20px;
    border-radius: 3px;
    box-sizing: border-box;
}

label {
    display: block;
    margin: 20px 0;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    outline: none;
    resize: none;
    border: none;
    border-bottom: 1px solid black;
}

input[type="text"]:focus,
textarea:focus {
    border-bottom: 1px solid rgb(230, 158, 58);
}

textarea::-webkit-scrollbar {
    width: 4px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgb(230, 158, 58);
}

.center {
    text-align: center;
}

input[type="submit"] {
    margin-top: 30px;
    width: 90%;
    max-width: 200px;
    font-family: 'lato';
    cursor: pointer;
    border-radius: 3px;
}

.error {
    color: red;
}

.error-border {
    border-bottom: 1px solid red;
}

#success {
    color: green;
}

/*--- END CONTACT PAGE STYLES ---*/




/*--- TABLET MEDIA QUERY ---*/
@media only screen and (min-width: 768px) {

    /*--- NAV BAR TABLET ---*/
    .phoneNav {
        display: none;
    }

    .navBar {
        font-size: 18px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column: 1 / 4;
        padding: 1em;
        justify-items: center;
        background-color: black;
        font-family: 'syncopate';
    }


    .topLink {
        text-decoration: none;
        color: #cad2c5;
    }

    .topLink:hover {
        color: #8d99ae;
        font-weight: 700;
    }

    /*--- END NAV BAR TABLET ---*/


    /*--- HOME PAGE TABLET ---*/
    #logo {
        grid-column: 3 / 13;
    }

    #contenders {
        font-size: 25px;
    }

    #louie {
        grid-column: 2 / 8;
        grid-row: 8 / 9;
    }

    #louiePic {
        grid-column: 2 / 8;
        grid-row: 9 / 10;
    }

    #ishod {
        grid-column: 8 / 14;
        grid-row: 8 / 9;
    }

    #ishodPic {
        grid-column: 8 / 14;
        grid-row: 9 / 10;
    }

    #tFunk {
        grid-column: 2 / 8;
        grid-row: 10 / 11;
    }

    #tFunkPic {
        grid-column: 2 / 8;
        grid-row: 11 / 12;
    }

    #braden {
        grid-column: 8 / 14;
        grid-row: 10 / 11;
    }

    #bradenPic {
        grid-column: 8 / 14;
        grid-row: 11 / 12;
    }

    #wade {
        grid-column: 2 / 8;
        grid-row: 12 / 13;
    }

    #wadePic {
        grid-column: 2 / 8;
        grid-row: 13 / 14;
    }

    #jake {
        grid-column: 8 / 14;
        grid-row: 12 / 13;
    }

    #jakePic {
        grid-column: 8 / 14;
        grid-row: 13 / 14;
    }

    #kader {
        grid-column: 2 / 8;
        grid-row: 14 / 15;
    }

    #kaderPic {
        max-width: 100%;
        grid-column: 2 / 8;
        grid-row: 15 / 16;
    }

    #tj {
        grid-column: 8 / 14;
        grid-row: 14 / 15;
    }

    #tjPic {
        max-width: 100%;
        grid-column: 8 / 14;
        grid-row: 15 / 16;
    }

    /*--- END HOME PAGE TABLET ---*/


    /*--- LOUIE TABLET ---*/
    #louieIntro {
        grid-column: 2 / 8;
    }

    #louiePic2 {
        grid-column: 8 / 14;
        grid-row: 1 / 2;
    }


    #louiePic3 {
        grid-column: 2 / 8;
        grid-row: 7 / 8;
    }

    #louiePic4 {
        grid-column: 8 / 14;
        grid-row: 7 / 8;
    }

    #louiePic5 {
        grid-column: 2 / 8;
        grid-row: 8 / 9;
    }

    #louiePic6 {
        grid-column: 8 / 14;
        grid-row: 8 / 9;
    }

    /*--- END LOUIE TABLET ---*/


    /*--- ISHOD TABLET ---*/
    #ishodIntro {
        grid-column: 8 / 14;
    }

    #ishodPic2 {
        grid-column: 2 / 8;
        grid-row: 1 / 2;
    }


    #ishodPic3 {
        grid-column: 2 / 8;
        grid-row: 7 / 8;
    }

    #ishodPic4 {
        grid-column: 8 / 14;
        grid-row: 7 / 8;
    }

    /*--- END ISHOD TABLET ---*/


    /*--- TFUNK TABLET ---*/

    #tFunkIntro {
        grid-column: 8 / 14;
    }

    #tFunkPic2 {
        grid-column: 2 / 8;
        grid-row: 1 / 2;
    }

    #tFunkPic3 {
        grid-column: 2 / 8;
        grid-row: 5 / 6;
    }

    #tFunkPic4 {
        grid-column: 8 / 14;
        grid-row: 5 / 6;
    }

    #tFunkPic5 {
        grid-column: 2 / 8;
        grid-row: 6 / 7;
    }

    #tFunkPic6 {
        grid-column: 8 / 14;
        grid-row: 6 / 7;
    }

    /*--- END TFUNK TABLET ---*/


    /*--- BRADEN TABLET ---*/
    #bradenIntro {
        grid-column: 2 / 8;
    }

    #bradenPic2 {
        grid-column: 8 / 14;
        grid-row: 1 / 2;
    }

    #bradenPic3 {
        grid-column: 2 / 8;
        grid-row: 7 / 8;
    }

    #bradenPic4 {
        grid-column: 8 / 14;
        grid-row: 7 / 8;
    }

    #bradenPic5 {
        grid-column: 2 / 8;
        grid-row: 8 / 9;
    }

    #bradenPic6 {
        grid-column: 8 / 14;
        grid-row: 8 / 9;
    }

    /*--- END BRADEN TABLET ---*/


    /*--- WADE TABLET ---*/
    #wadeIntro {
        grid-column: 8 / 14;
    }

    #wadePic2 {
        grid-column: 2 / 8;
        grid-row: 1 / 2;
    }

    #wadePic3 {
        grid-column: 2 / 8;
        grid-row: 5 / 6;
    }

    #wadePic4 {
        grid-column: 8 / 14;
        grid-row: 5 / 6;
    }

    /*--- END WADE TABLET ---*/


    /*--- JAKE TABLET ---*/

    #jakeIntro {
        grid-column: 2 / 8;
    }

    #jakePic2 {
        grid-column: 8 / 14;
        grid-row: 1 / 2;
    }

    #jakePic3 {
        grid-column: 2 / 8;
        grid-row: 5 / 6;
    }

    #jakePic4 {
        grid-column: 8 / 14;
        grid-row: 5 / 6;
    }

    #jakePic5 {
        grid-column: 2 / 8;
        grid-row: 6 / 7;
    }

    #jakePic6 {
        grid-column: 8 / 14;
        grid-row: 6 / 7;
    }

    /*--- END JAKE TABLET ---*/


    /*--- KADER TABLET ---*/
    #kaderIntro {
        grid-column: 8 / 14;
    }

    #kaderPic2 {
        grid-column: 2 / 8;
        grid-row: 1 / 2;
    }

    #kaderPic3 {
        grid-column: 2 / 8;
        grid-row: 5 / 6;
    }

    #kaderPic4 {
        grid-column: 8 / 14;
        grid-row: 5 / 6;
    }

    /*--- END KADER TABLET ---*/


    /*--- TJ TABLET ---*/
    #tjIntro {
        grid-column: 2 / 8;
    }

    #tjPic2 {
        grid-column: 8 / 14;
        grid-row: 1 / 2;
    }

    #tjPic4 {
        grid-column: 2 / 8;
        grid-row: 6 / 7;
    }

    #tjPic5 {
        grid-column: 8 / 14;
        grid-row: 6 / 7;
    }

    /*--- END TJ TABLET ---*/


    /*--- ABOUT TABLET ---*/

    #aboutLogo {
        grid-column: 4 / 10;
    }

    #aboutInfo {
        grid-column: 3 / 11;
    }

    #trophy {
        grid-column: 4 / 10;
    }

    #winnerHeading {
        font-size: 25px;
    }

    #winnerList {
        font-size: 18px;
    }

    #winnerList2 {
        font-size: 18px;
    }

    #partInfo {
        grid-column: 3 / 6;
        grid-row: 6 / 7;
        margin-top: 2em;
    }

    #partChart {
        grid-column: 2 / 7;
        grid-row: 7 / 8;
        margin-top: 2em;
        align-self: center;
    }

    #styleInfo {
        grid-column: 8 / 11;
        grid-row: 6 / 7;
        margin-top: 2em;
        align-self: center;
    }

    #styleChart {
        grid-column: 7 / 12;
        grid-row: 7 / 8;
        margin-top: 2em;
        align-self: center;
    }

    /*--- END ABOUT TABLET ---*/
}


@media only screen and (min-width: 1024px) {

    /*--- HOME DESKTOP ---*/


    #logo {
        grid-column: 5 / 11;
    }

    #homeInfo {
        grid-column: 4 / 12;
    }

    #contenders {
        font-size: 30px;
    }

    #louie {
        grid-column: 2 / 5;
        grid-row: 8 / 9;
    }

    #louiePic {
        grid-column: 2 / 5;
        grid-row: 9 / 10;
    }

    #ishod {
        grid-column: 5 / 8;
        grid-row: 8 / 9;

    }

    #ishodPic {
        grid-column: 5 / 8;
        grid-row: 9 / 10;
    }

    #tFunk {
        grid-column: 8 / 11;
        grid-row: 8 / 9;
    }

    #tFunkPic {
        grid-column: 8 / 11;
        grid-row: 9 / 10;
    }

    #braden {
        grid-column: 11 / 14;
        grid-row: 8 / 9;
    }

    #bradenPic {
        grid-column: 11 / 14;
        grid-row: 9 / 10;
    }

    #wade {
        grid-column: 2 / 5;
        grid-row: 10 / 11;
    }

    #wadePic {
        grid-column: 2 / 5;
        grid-row: 11 / 12;
    }

    #jake {
        grid-column: 5 / 8;
        grid-row: 10 / 11;
    }

    #jakePic {
        grid-column: 5 / 8;
        grid-row: 11 / 12;
    }

    #kader {
        grid-column: 8 / 11;
        grid-row: 10 / 11;
    }

    #kaderPic {
        grid-column: 8 / 11;
        grid-row: 11 / 12;
    }

    #tj {
        grid-column: 11 / 14;
        grid-row: 10 / 11;
    }

    #tjPic {
        grid-column: 11 / 14;
        grid-row: 11 / 12;
    }

    /*--- END HOME DESKTOP ---*/


    /*--- LOUIE DESKTOP ---*/
    #louieIntro {
        grid-column: 4 / 12;
        margin-bottom: 2em;
    }

    #louiePic2 {
        grid-column: 2 / 8;
        grid-row: 2 / 3;
    }

    #louiePic4 {
        grid-column: 8 / 14;
        grid-row: 2 / 3;
    }

    #honorRollInfo {
        grid-column: 2 / 8;
        grid-row: 3 / 4;
    }

    #honorRollApi {
        grid-column: 2 / 8;
        grid-row: 4 / 5;
    }

    #againInfo {
        grid-column: 8 / 14;
        grid-row: 3 / 4;
        align-self: center;
    }

    #againApi {
        grid-column: 8 / 14;
        grid-row: 4 / 5;
    }

    #louiePic3 {
        grid-column: 2 / 6;
        grid-row: 5 / 6;
    }


    #louiePic5 {
        max-width: 100%;
        grid-column: 6 / 10;
        grid-row: 5 / 6;
    }

    #louiePic6 {
        max-width: 100%;
        grid-column: 10 / 14;
        grid-row: 5 / 6;
    }

    /*--- END LOUIE DESKTOP ---*/


    /*--- ISHOD DESKTOP ---*/
    #ishodIntro {
        grid-column: 4 / 12;
        grid-row: 1 / 2;
    }

    #ishodPic2 {
        grid-column: 2 / 8;
        grid-row: 2 / 3;
    }

    #ishodPic5 {
        grid-column: 8 / 14;
        grid-row: 2 / 3;
    }

    #realPart {
        grid-column: 2 / 8;
        grid-row: 3 / 4;
        align-self: center;
    }

    #realApi {
        grid-column: 2 / 8;
        grid-row: 4 / 5;
    }

    #bayInfo {
        grid-column: 8 / 14;
        grid-row: 3 / 4;
        align-self: center;
    }

    #bayApi {
        grid-column: 8 / 14;
        grid-row: 4 / 5;
    }

    #ishodPic3 {
        grid-column: 2 / 8;
        grid-row: 5 / 6;
    }

    #ishodPic4 {
        grid-column: 8 / 14;
        grid-row: 5 / 6;
    }

    /*--- END ISHOD DESKTOP ---*/


    /*--- TFUNK DESKTOP ---*/
    #tFunkIntro {
        grid-column: 4 / 12;
    }

    #tFunkPic2 {
        grid-column: 2 / 8;
        grid-row: 2 / 3;
    }

    #tFunkPic3 {
        grid-column: 8 / 14;
        grid-row: 2 / 3;
    }

    #bakerInfo {
        grid-column: 2 / 8;
        grid-row: 3 / 4;
        align-self: center;
    }

    #bakerApi {
        grid-column: 8 / 14;
        grid-row: 3 / 4;
    }

    #tFunkPic4 {
        grid-column: 2 / 6;
        grid-row: 4 / 5;
    }

    #tFunkPic5 {
        grid-column: 6 / 10;
        grid-row: 4 / 5;
    }

    #tFunkPic6 {
        grid-column: 10 / 14;
        grid-row: 4 / 5;
    }

    /*--- END TFUNK DESKTOP ---*/


    /*--- BRADEN DESKTOP ---*/
    #bradenIntro {
        grid-column: 4 / 12;
    }

    #bradenPic2 {
        grid-column: 2 / 8;
        grid-row: 2 / 3;
    }

    #bradenPic3 {
        grid-column: 8 / 14;
        grid-row: 2 / 3;
    }

    #emergeInfo {
        grid-column: 2 / 8;
        grid-row: 3 / 4;
        align-self: center;
    }

    #emergeApi {
        grid-column: 2 / 8;
        grid-row: 4 / 5;
    }

    #vaccineInfo {
        grid-column: 8 / 14;
        grid-row: 3 / 4;
    }

    #vaccineApi {
        grid-column: 8 / 14;
        grid-row: 4 / 5;
    }

    #bradenPic4 {
        grid-column: 2 / 6;
        grid-row: 5/ 6;
    }

    #bradenPic5 {
        grid-column: 6 / 10;
        grid-row: 5 / 6;
    }

    #bradenPic6 {
        grid-column: 10 / 14;
        grid-row: 5 / 6;
    }

    /*--- END BRADEN DESKTOP ---*/


    /*--- WADE DESKTOP ---*/
    #wadeIntro {
        grid-column: 4 / 12;
    }

    #wadePic2 {
        grid-column: 2 / 8;
        grid-row: 2 / 3;
    }

    #wadePic3 {
        grid-column: 8 / 14;
        grid-row: 2 / 3;
    }

    #defineInfo {
        grid-column: 4 / 12;
        grid-row: 3 / 4;
    }

    #defineApi {
        grid-column: 4 / 12;
        grid-row: 4 / 5;
    }

    #wadePic4 {
        grid-column: 2 / 8;
        grid-row: 5 / 6;
    }

    #wadePic5 {
        grid-column: 8 / 14;
        grid-row: 5 / 6;
    }

    /*--- END WADE DESKTOP ---*/


    /*--- JAKE DESKTOP ---*/
    #jakeIntro {
        grid-column: 4 / 12;
    }

    #jakePic2 {
        grid-column: 2 / 8;
        grid-row: 2 / 3;
    }

    #jakePic6 {
        grid-column: 8 / 14;
        grid-row: 2 / 3;
    }

    #stopInfo {
        grid-column: 4 / 12;
        grid-row: 3 / 4;
    }

    #stopApi {
        grid-column: 4 / 12;
        grid-row: 4 / 5;
    }

    #jakePic3 {
        grid-column: 2 / 6;
        grid-row: 5 / 6;
    }

    #jakePic4 {
        grid-column: 6 / 10;
        grid-row: 5 / 6;
    }

    #jakePic5 {
        grid-column: 10 / 14;
        grid-row: 5 / 6;
    }
    /*--- END JAKE DESKTOP ---*/


    /*--- KADER DESKTOP ---*/
    #kaderIntro {
        grid-column: 4 / 12;
    }
    
    #kaderPic2 {
        grid-column: 2 / 8;
        grid-row: 2 / 3;
    }

    #kaderPic3 {
        grid-column: 8 / 14;
        grid-row: 2 / 3;
    }
    
    #adidasInfo {
        grid-column: 4 / 12;
        grid-row: 3 / 4;
    }
    
    #adidasApi {
        grid-column: 4 / 12;
        grid-row: 4 / 5;
    }
        
    #kaderPic4 {
        grid-column: 2 / 8;
        grid-row: 5 / 6;
    }
    
    #kaderPic5 {
        grid-column: 8 / 14;
        grid-row: 5 / 6;
    }
    /*--- END KADER DESKTOP ---*/


    /*--- TJ DESKTOP ---*/
    #tjIntro {
        grid-column: 4 / 12;
    }
    
    #tjPic2 {
        grid-column: 2 / 8;
        grid-row: 2 / 3;
    }

    #tjPic3 {
        grid-column: 8 / 14;
        grid-row: 2 / 3;
    }
    
    #esInfo {
        grid-column: 4 / 12;
        grid-row: 3 / 4;
    }
    
    #esApi {
        grid-column: 4 / 12;
        grid-row: 4 / 5;
    }
    
    #tjPic4 {
        grid-column: 2 / 8;
        grid-row: 5 / 6;
    }
    
    #tjPic5 {
        grid-column: 8 / 14;
        grid-row: 5 / 6;
    }

}