/* ! -  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: fran;
}

.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: 400px;
    border-radius: 8px;
    background-image: url(./assets/img/gameDrawing.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.featImg {
    height: 400px;
    border-radius: 8px;
    background-image: url(./assets/img/gameDrawing.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ! - About - */

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

.skillsList{
    line-height: 30px;
    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: 20px 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;
}

.galleryRow{
    padding-top: 40px;
}

.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/galleryImg1.png);
}

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

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

#galleryImg4{
    background-image: url(./assets/img/galleryImg4.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: 30px;
    margin-bottom: 10px;
}

.returnLink{
    color: gray;
    font-family: DMlight;
}
.returnLink:hover{
    cursor: pointer;
}


/* ! - Media Queries - */

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

    .projectDescription{
        padding-top: 25px;
    }

    .galleryImg {
        margin-bottom: 20px;
    }
  }