@font-face {
    font-family: MAIN;
    src: url(../assets/fonts/KantumruyPro-VariableFont_wght.ttf);
}

@font-face {
    font-family: CallToAction;
    src: url(../assets/fonts/AtkinsonHyperlegible-Bold.ttf);
}

/*Define CSS variables*/
:root{
    --main-bg-colour: black;
    --banner-colour: #21638980;
    --store-button-background-colour: #F4EBDDBF;
    --store-button-border-colour: #3EA4DEBF;
    --social-links-colour: #FFFFFFBF;
    --features-list-image: url('../assets/images/cssImages/flower_scored.svg');
    --alternate-text-colour: white;
    --shadow-colour1: rgba(0, 0, 0, 0.2);
    --shadow-colour2: rgba(0, 0, 0, 0.19);
    --background-image: url('../assets/images/backgroundImages/background.jpg');
    --call-to-action-colour: #8C9EC7;
    --call-to-action-background: linear-gradient(#163854, #225783);
    --card-background-colour: #AAADE4CC;
    --card-text-colour: #1A4969;
    --navbar-divider-colour: #21638980;
    --background-overlay: #040616B3;
}


/*Should not need to change*/
body{
    font-family: MAIN;
    background-color: var(--main-bg-colour);
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.foreground{
    position: relative;
    z-index: 1;
}

.call-to-action{
    font-family: CallToAction;
    color: var(--call-to-action-colour);
    margin-top: 2rem;
    font-size: 4rem; 
    padding-top: 1rem;
    background-image: var(--call-to-action-background); 
    max-width: 40rem;
}


/*Make the images behind the carousel*/
.side-image-container{
    margin-top: 3rem;
    z-index: 0;
    position: absolute;
}

#carouselContainer{
    z-index: 5;
}

.carouselContent{
    padding-top: 0;
    margin-top: 0;
}

.background{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.background #animation-item-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.animation{
    position: absolute;
    opacity: 0;
    animation: fade 5s infinite alternate;
}

@keyframes fade {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}



#gameDetails{
    background-color: var(--banner-colour);
    width: 100%;
}

.filler-left{
    height: 45%;
}

#releaseInfo{
    font-size: 3rem;
    padding-bottom: 1.5rem;
    padding-top: 2rem;
}


.purchaseButton{
    background-color: var(--store-button-background-colour);
    border-color: var(--store-button-border-colour);
    border-width: 3px;
}

.purchaseButtonContainer{
    display: inline;
    max-height: 100px;
    margin: 0;
}

#purchaseLink{
    max-height: 12rem;
    margin-bottom: 2rem;
    display: inline;
}

.purchaseIcon{   
    max-width: 16rem;
}

#links{
    background-color: var(--social-links-colour);
    padding: 0.5rem;
    margin-top: 2rem;
}

footer{
    margin: 4rem;
    color: white;
}

#detailsDesc{
    text-align: center;
    align-items: stretch;
    font-size: 2rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

#detailsIcons{
    display: inline-block;
    flex-wrap: wrap;
    max-width: 100%;
}

.detailsIcon{
    max-height: 7rem;
    margin: 8rem;
    margin-top: -3.5rem;
    margin-bottom: 2.5rem;
}

.card{
    margin: 1.5rem;
    background-color: var(--card-background-colour);
    color: var(--card-text-colour);
    font-family: MAIN;
    font-weight: bold;
}

#gameDetailsList{
    margin: 0 auto;
    width: fit-content;
    padding-left: 0;
}

#gameDetailsList #gameDetailsListItem{
    margin: 0;
    list-style: none;
    text-align: center;
}

/*svg images as ul bullets*/
#gameDetailsList #gameDetailsListItem::before{
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    /*padding*/
    background-image: var(--features-list-image);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle; /* Align the image vertically with the text */
}

#gameDetailsListItem{
    font-size: 1.3rem;
}

.reframeLink{
    padding-right: 2rem;
    padding-left: 0.5rem;
}

.externalLink{
    width: 4rem;
    margin-top: 1rem;
}

.links-button-container{
    display: inline-block;
    border-width: 0px 1px 0 0;
    border-color: var(--store-button-border-colour);
    border-style: solid;
}

.links-button-container:last-child{
    border: none;
}

#detailsTitle{
    padding-top: 1.5rem;
    color: var(--alternate-text-colour);
    font-weight: 10rem;
}

#detailsDesc{
    padding-bottom: 1.3rem;
}

#carousel{
    box-shadow: 0 4px 8px 0 var(--shadow-colour1), 0 6px 20px 0 var(--shadow-colour2);
    margin-top: 3rem;
}

#navbarLogo{
    max-height: 8rem;
}

.navbar{
    background-color: var(--banner-colour);
    margin-top: 2rem;
    padding: 1.2rem;
}

.nav-text{
    font-weight: bold;
    font-size: 1rem;
    color: var(--call-to-action-colour);
}

#carousel{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

.youtubeEmbed{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/*Responsive elements*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .side-image-container{
        display: none;
    }
    
    .side-image{
        display: none;
    }
    
    #navbarLogo{
        height: 4rem;
        margin-top: 1rem;
    }

    .nav-text{
        display: none;
    }

    .purchaseIcon{
        height: 3rem;
        margin: 5px;
    }

    .RELEASETEXT{
        font-size: 2rem;
    }

    .releaseInfo{
        padding-top: 0.6rem;
    }

    .call-to-action{
        margin-top: 0;
    }

    .nav-img{
        height: 2rem;
    }

    .purchaseButtonContainer{
        display: flex;
    }

    #gameDetails{
        margin-top: 3rem;
    }

    .navbar{
        margin-left: 20px;
        padding: 5px;
    }

    #detailsIcons{
        display: none;
    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .side-image-container{
        display: none;
    }
    
    .side-image{
        display: none;
    }
    
    #navbarLogo{
        height: 6rem;
    }

    .nav-text{
        font-size: 0.8rem;
    }


    .purchaseIcon{
        height: 6rem;
        margin-top: 1rem;
    }

    .RELEASETEXT{
        font-size: 3rem;
    }

    #navbarLogo{
        margin-top: 2rem;
        padding-right: 2rem;
    }

    #detailsIcons{
        display: none;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .side-image-container{
        display: block;
    }
    
    #navbarLogo{
        height: 7rem;
    }

    .nav-text{
        font-size: 0.8rem;
    }

    #detailsIcons{
        display: none;
    }

    .purchaseIcon{
        height: 4rem;
    }

    .RELEASETEXT{
        font-size: 3rem;
    }

    #detailsIcons{
        display: none;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .side-image{
        display: block;
    }
    
    #navbarLogo{
        height: 8rem;
    }
    .nav-text{
        font-size: 1.0rem;
    }
    .nav-img{
        height: 40px;
        margin-top: -1.2rem;
    }
    .RELEASETEXT{
        font-size: 3rem;
    }
    .purchaseIcon{
        height: 4rem;
    }

    #gameDetails{
        margin-top: 5rem;
    }

    #detailsIcons{
        display: block;
    }

    .nav-img{
        margin-top: 0.5rem;
        height: 2rem;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    #navbarLogo{
        height: 12rem;
    }
    .nav-img{
        height: 55px;
    }
}

@media only screen and(max-width: 993px){
    .side-image{
        display: none;
    }
}