@font-face {
    font-family: Gotham-XLight;
    src: url('../assets/fonts/GothamSSm-XLight.otf');
}

@font-face {
    font-family: Gotham-Light;
    src: url('../assets/fonts/GothamSSm-Light.otf');
}

@font-face {
    font-family: Gotham-Book;
    src: url('../assets/fonts/GothamSSm-Book.otf');
}

@font-face {
    font-family: Gotham-Medium;
    src: url('../assets/fonts/GothamSSm-Medium.otf');
}

@font-face {
    font-family: Gotham-Bold;
    src: url('../assets/fonts/GothamSSm-Bold.otf');
}

@font-face {
    font-family: Gotham-Black;
    src: url('../assets/fonts/GothamSSm-Black.otf');
}

.body-copy {
    font-family: Gotham-XLight;
    font-size: 19px;
    color: #8b8d90;
}

body, html {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: black;
}

#background {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#main-section {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#logo-container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1;
}

#logo-container img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#hero-bg-video-container {
    position: relative;
    width: 1450px;
    max-height: 1000px;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
}

    @media (min-width: 1450px) {

        #hero-bg-video-container {
            position: relative;
            width: 100%;
            max-height: 1000px;
            overflow: hidden;
            margin-left: 0px;
        }
    }

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#youtube-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding-left: 6%;
    padding-right: 6%;
    box-sizing: border-box;
    margin-top: -20px;
    z-index: 3;
}

#youtube-container iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

    @media (min-width: 900px) {

        #youtube-container {
            padding-left: 0;
            padding-right: 0;
        }

    }

#black-fade {
    position: absolute;
    display: block;
    background-image: url("../assets/images/black-fade.png");
    background-size: cover;
    width: 100%;
    height: 900px;
    z-index: 3;
}

    @media (min-width: 900px) {

        #black-fade {
            height: 900px;
            margin-top: 100px;
        }
    }

#social {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 46px;
    width: 106px;
    z-index: 5;
    left: 50%;
    padding-top: 70px;
    transform: translateX(-50%);
}

#instagram-icon-container {
    padding-right: 15px;
}

.section-title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    width: 260px;
    height: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 24px;
    text-align: center;
    z-index: 5;
    padding-top: 50px;
}

.section-title div:first-child {
    position: relative;
    height: 22px;
    width: 61px;
    background-image: url("../assets/images/PineBranch.svg");
    background-repeat: no-repeat;
    transform: scaleX(-1);
    margin-right: 17px;
    margin-top: 4px;
}

.section-title div:last-child {
    position: relative;
    height: 22px;
    width: 61px;
    background-image: url("../assets/images/PineBranch.svg");
    background-repeat: no-repeat;
    margin-left: 17px;
    margin-top: 4px;
}

#the-story-section {
    position: relative;
    padding-top: 10px;
}

#the-story-copy {
    position: relative;
    max-width: 780px;
    padding: 0% 8%;
    line-height: 2;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 40px;
}

#photo-frame {
    position: relative;
    display: flex;
    background-image: url("../assets/images/photo-frame.png");
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 1.3;
    width: 88%;
    max-width: 658px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 60px;
    padding-left: 6%;
    padding-right: 6%;
    box-sizing: border-box;
}

@media (min-width: 658px) {

    #photo-frame {
        position: relative;
        width: 658px;
        height: 509px;
        padding-left: 0%;
        padding-right: 0%;
        background-size: cover;
    }
}

#the-gameplay-section {
    position: relative;
    padding-top: 10px;
}

#the-gameplay-list-section {
    position: relative;
    max-width: 810px;
    left: 50%;
    transform: translateX(-48%);
    padding-top: 70px;
    padding-left: 6%;
    padding-right: 6%;
}

.three-column-lists {
    display: flex;
    flex-direction: column;
}

#columns {
    columns: 1;
}

    @media (min-width: 600px) {

        #columns {
            columns: 2;
        }

    }

    @media (min-width: 900px) {

        #columns {
            columns: 3;
        }
    }

.three-column-lists ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
}


.three-column-lists ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    margin-bottom: 20px;
}


.three-column-lists ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    background-image: url('../assets/images/diamond.svg');
    background-size: cover;
}

#inventory-items-img {
    position: relative;
    background-image: url('../assets/images/Inv-Items-Mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 1.42;
    width: 88%;
    max-width: 642px;
    left: 50%;
    transform: translateX(-46%);
    margin-top: 6%;
    padding-left: 6%;
    padding-right: 6%;
    margin-bottom: 4%;
    box-sizing: border-box;
    transition: .45s;
}

@media (min-width: 900px) {

    #inventory-items-img {
        margin-top: 60px;
        margin-bottom: 0%;
        background-image: url('../assets/images/Inv-Items-Desktop.png');
        max-width: 1108px;
        transform: translateX(-49%);
        aspect-ratio: 3.32;
    }
}

.sketches-section {
    position: relative;
    width: 100%;
    max-width: 430px;
    height: 1586px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 80px;
}

#sketches {
    position: relative;
    background-image: url('../assets/images/Sketches-Mobile.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: .27;
}

@media (min-width: 900px) {

    .sketches-section {
        max-width: 1181px;
    }

    #sketches {
        background-image: url('../assets/images/Sketches-Desktop.png');
        aspect-ratio: 1.8;
    }
}

#concept-art-section-group {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 250px;
    padding-bottom: 100px;
}

.concept-art-section {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 790px;
    min-width: 725px;
    height: 1000px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 100px;
}

.concept-art {
    position: relative;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    aspect-ratio: .79;
}

#concept-art-1 {
    background-image: url('../assets/images/Concept-Art-1.png');
}

#concept-art-2 {
    background-image: url('../assets/images/Concept-Art-2.png');
}

#concept-art-3 {
    background-image: url('../assets/images/Concept-Art-3.png');
}

.sketch-card {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    height: 685px;
    width: 778px;
    transition: .35s;
}

#sketch-card-1 {
    background-image: url('../assets/images/Sketch-Card-1.png');
    left: -75px;
    top: -200px;
}

#sketch-card-2 {
    background-image: url('../assets/images/Sketch-Card-2.png');
    right: -250px;
    top: -135px;
    
}

#sketch-card-3 {
    background-image: url('../assets/images/Sketch-Card-3.png');
    top: -150px;
    left: -40px;
}

@media (min-width: 900px) {

    #concept-art-section-group {
        margin-top: 100px;
    }

    .sketch-card {
        height: 788px;
        width: 895px;
    }

    #sketch-card-1 {
        left: -275px;
        top: 40px;
    }

    #sketch-card-2 {
        right: -475px;
        top: 30px;
    }

    #sketch-card-3 {
        left: -250px;
        top: 30px;
    }
}

#audio-player {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 484px;
    width: 484px;
    background: linear-gradient(315deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%) no-repeat;
    z-index: 10;
    padding-right: 80px;
    padding-bottom: 52px;
}

#hear-the-wilderness-text {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 94px;
    width: 121px;
    background-image: url('../assets/images/hear-the-wilderness.png') ;
    background-repeat: no-repeat;
    z-index: 10;
    padding-right: 80px;
    padding-bottom: 52px;
}

#play-pause-button {
    position: absolute;
    cursor: pointer;
    background-image: url('../assets/images/play-button.png');
    height: 40px;
    width: 40px;
    background-size: 100%;
    bottom: 0;
    right: 0;
    margin-right: 30px;
    margin-bottom: 30px;
    z-index: 11;
}