/* ! -  Fonts - */

@font-face {
    font-family: fran;
    src: url(./assets/fonts/FrancoisOne-Regular.ttf);
}
@font-face {
    font-family: DMlight;
    src: url(./assets/fonts/DMSans-Light.ttf);
}
@font-face {
    font-family: DMmedium;
    src: url(./assets/fonts/DMSans-Medium.ttf);
}
@font-face {
    font-family: DMbold;
    src: url(./assets/fonts/DMSans_36pt-Bold.ttf);
}

/* ! - General Elements - */

.row {
    padding-top: 10px;
}

body{
    overflow-x: hidden;
    width: 100vw;
}

p{
    font-family: DMlight;
}

/* ! - Header - */

#headerText{
    font-family: DMbold;
}

.header {
    padding-top: 10px;
    padding-bottom: 10px;
}

.headingBackground{
    color: white;
    padding-top: 30px;
    background-image: url(./assets/img/headingBg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#featImg {
    height: 450px;
    border-radius: 8px;
    border: 3px black solid;
    background-image: url(./assets/img/gameDrawing1.png);
    background-position: 50% calc(50% - 20px);
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 1200px;
}

/* ! - About - */

#aboutTitle {
    border-bottom: 2px black solid;
    padding: 20px 0px 20px 0px;
    margin-bottom: 20px;
    font-family: DMbold;
}

.skillsList{
    line-height: 300%;
    font-size: 1.1rem;
    font-family: DMmedium;
}

.projectDescription{
    font-size: 1.1rem;
}

.aboutParagraph{
    padding-bottom: 40px;
}

.listContainer {
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    background-color: rgb(55, 55, 55);
    padding: 10px 0px 10px 0px;
}

/* ! - Gallery - */

#backgroundImg {
    background-image: url(./assets/img/revealedImg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px !important;
}

.image-container {
    overflow: hidden;
    height: 400px; 
    width: 100%; 
    margin: 0px !important;
}

.image-container img {
    height: 0;
    width: 100%;
    object-fit: cover;
}

.galleryRow1{
    height: 500px;
    gap: 20px;
}

.galleryRow2{
    height: 500px;
    gap: 20px;
}

.galleryRow3{
    height: 400px;
    gap: 20px;
}

.galleryImg {
    height: 370px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 700px;
    border-radius: 8px;
}

#galleryImg1{
    background-image: url(./assets/img/tshirtimg1.png);
}

#galleryImg2{
    background-image: url(./assets/img/tshirtimg2.png);
}

#galleryImg3{
    background-image: url(./assets/img/flyer.png);
    background-size: contain;
    background-color: lightgrey;
}

#galleryImg4{
    background-image: url(./assets/img/flyer2.png);
    background-size: contain;
    background-color: lightgrey;
}

#galleryImg5{
    background-image: url(./assets/img/tshirtimg3.png);
}

#galleryImg6{
    background-image: url(./assets/img/tshirtimg4.png);
}

#gameImg1 {
    background-image: url(./assets/img/gameimg1.png);
}
#gameImg2 {
    background-image: url(./assets/img/gameimg2.png);
}
#gameImg3 {
    background-image: url(./assets/img/gameimg3.png);
}
/* ! - Footer - */

.playHereText{
    font-size: 1.8rem;
    font-family: DMbold;
    margin-bottom: 20px;
}

.footer{
    background-color: #1c1c1c;
    color: white;
    text-align: center;
    padding: 2vw;
}

#bttnReturnLink{
    margin-top: 0px;
    margin-bottom: 10px;
}

.returnLink{
    color: #eee;
    font-family: DMlight;
}
.returnLink:hover{
    color: white;
    cursor: pointer;
}


/* ! - Media Queries - */

@media only screen and (max-width: 600px) {
    /* .aboutParagraph {
        background-color: lightblue;
    } */

    .projectDescription{
        padding-top: 25px;
    }

    .galleryImg {
        margin-bottom: 20px;
    }

    .galleryRow1{
        height: auto;
    }

    .galleryRow2{
        height: auto;
    }

    .galleryRow3{
        height: auto;
    }


}