h2 {
    color: white;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 12px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 30px rgba(0, 0, 0, 1);
}

h1 {
    color: rgb(255, 255, 255);
    margin: 0;
    mix-blend-mode: overlay;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 14px rgba(0, 0, 0, 1);
}

#nameDiv {
    background-image: url(https://nathanpeckham.com/images/headerBackground.png);
    background-position-y: 0px;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    box-shadow:inset 0px 0px 80px rgba(0, 0, 0, .6);
}

#headerDiv {
    display: flex;
    width: 100vw;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 80px rgba(0, 0, 0, .4);
}

#mainDiv {
    display: flex;
    overflow: hidden;
}

#leftSide {
        background-image: url(https://nathanpeckham.com/images/lightingImage.jpg);
}

#rightSide {
        background-image: url(https://nathanpeckham.com/images/csImage.jpg);
}

body {
    margin: 0;
    background-color:rgb(0, 0, 0);
    overflow:hidden;
}


.flexItem {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size:cover;
    background-repeat: no-repeat;
    transition: transform 0.2s ease, filter 0.5s ease, box-shadow 0.5s ease, background-position-x 0.3s ease, background-position-y 0.3s ease;
    filter: saturate(10%);
    box-shadow: inset 0px 0px 80px rgba(0, 0, 0, .7);
    flex: 1;
    cursor:pointer;
}

#gapDiv {
    display:flex;
    width:100vw;
    height:1vh;
}

.flexItem:hover {
    transform:scale(1.04);
    /* flex-grow:1.1; */
    filter: saturate(100%);
    box-shadow: inset 0px 0px 80px rgba(0, 0, 0, 0.3);
}

@media (orientation: landscape) {
    #mainDiv {
        flex-direction: row;
        height: 89vh;
        gap: 1vw;
    }

    #nameDiv {
        height: 10vh;
    }

    h1 {
        font-size: 8vh;
    }
    h2 {
        font-size: min(20vh, 80px);
    }
        #gapDiv {
        height:1vw;
    }
}

button {
    border:0;
    padding:0;
}

@media (orientation: portrait) {
    #mainDiv {
        flex-direction: column;
        height: 92vh;
        gap: 1vh;
    }

    #nameDiv {
        height: 7vh;
    }

    h1 {
        font-size: 6vh;
    }
    h2 {
        font-size: max(6vh, 40px);
    }
    #gapDiv {
        height:1vh;
    }
}

@media screen and (hover:none) {
    .flexItem {
        filter: saturate(90%);
    }
}

.bbh-bogle-regular {
    font-family: "BBH Bogle", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.barlow-condensed-regular {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}