@font-face {
    font-family: "ARCO";
    src: url(resources/ARCO_2.otf);
    font-weight: normal;
    font-style: normal;
}
:root {
    --header-height: 3089/4096;
    --background-height: 6550/4096;
    --top-spacer-height: 817/4096;
    --bottom-spacer-height: 613/4096;
    --footer-height: 5027/4096;
}
body {
    margin:0;
    font-family: 'Lilita One';
    font-weight: 400;
    font-style: normal;
}
iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;    
}
h1 {
    font-family:"ARCO";
    text-align:center;
    color:antiquewhite;
    font-size: 1.5rem;
    letter-spacing:0.15rem;
}
h2 {
    letter-spacing:0.1rem;
    text-align:center;
    color:antiquewhite;
}
p {
    color:antiquewhite;
    font-size: 1rem;
}
.content-wrapper {
    position: relative;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}
.round-button {
    width:100%;
    height:auto;
}
.central-divider {
    width:70%;
    margin: 7% 15%;
}
.steam-button {
    position:absolute;
    top:31.97%;
    left: 16.34%;
    width:48.41%;
    height:40.66%;
}
.press-kit-button {
    position:absolute;
    top:37%;
    left: 20%;
    width: 39.39%;
    height:27.06%;
}
.hover-container .unhover {
    display:block;
}
.hover-container .hover {
    display:none;
}
.hover-container:hover .unhover {
    display:none;
}
.hover-container:hover .hover {
    display:block;
}
.carousel-image {
    opacity:0;
    transition: opacity 0.5s ease-in-out;
    width:100%;
    position:absolute;
    cursor: pointer;
    top:0;
    left:0;
}
.dot {
    cursor: pointer;
    width: 75%;
    margin: auto 15%;
    display: block;
    justify-content:center;
  }
.dot img {
    width:100%;
    height: auto;
}
  
.active-dot .hover {
    display:block;
}
.active-dot .unhover {
    display:none;
}
 .modal-image {
    position:absolute;
    max-width:80vw;
    max-height:90vh;
    height:auto;
    width:auto;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity:0;
    transition: opacity 0.5s ease-in-out;
}
.active-image {
    opacity:1;
}
#hero-image {
    background-image: url("resources/HeaderBackground.png");
    height:calc(200vw * var(--header-height)); /*img height / width * 200*/
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
}
#background-image {
    background-image: url("resources/WallBackground.png");
    height:calc(200vw * var(--background-height));
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
}
#logo {
    width:70%;
    margin-left:15%;
    margin-right:15%;
    margin-top:7%;
}
#steam-button-book {
    width:70%;
    margin-left:15%;
    margin-right:15%;
    margin-top:13%;
    position:relative;
}
#steam-book {
    width:100%;
}
#button-container {
    margin-left:5%;
    width:90%;
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    gap:2%;
    margin-bottom:7%;
}
#video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 68%;
    overflow: hidden;
    border-image-source: url("resources/VideoFrame.png");
    border-image-slice: 187 151 211 156 fill;
    border-image-width: 14.46% 7.8% 16.32% 8.15%;
    border-image-repeat: stretch;
}
#video-player {
    position:absolute;
    top:14.4%;
    left:8.1%;
    width:84.1%;
}   
#video-padding {
    position: relative;
    width:100%;
    padding-top:56.25%;
    overflow:hidden;
}
#press-kit {
    position:relative;
    width:60%;
    margin-left:20%;
    height:auto;
    position:relative;
}
#press-kit-book {
    width:100%;
    height:auto;
}
#description-wrapper {
    width:90%;
    margin-left:5%;
    margin-top:7.5%;
    border-image-source: url("resources/BannerBackground.png");
    border-image-slice: 165 259 150 241 fill;
    border-image-width: 6% 10% 12% 10%;
    border-image-repeat: stretch;
}
#description {
    padding: 60px 12% 40px 12%;
}
#image-frame {
    position: relative;
    width: 100%;
    padding-top:68%;
    overflow: hidden;
    border-image-source: url("resources/GalleryFrame.png");
    border-image-slice: 224 151 211 156 fill;
    border-image-width: 14.2% 7.8% 16.32% 8.15%;
    border-image-repeat: stretch;
}
#image-carousel {
    position:absolute;
    top:14.4%;
    left:8.1%;
    width:84.1%;
    height:69.6%;
}
#carousel-dots {
    width:40%;
    margin-left: 30%;
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 2fr;
    justify-content:center;
    align-items:center;
}
#carousel-back-button, #carousel-forward-button {
    margin-left:10%;
    cursor:pointer;
    width:80%;
    height:auto;
}
#carousel-back-button img, #carousel-forward-button img {
    width:100%;
    height:auto;
}
#carousel-forward-button img {
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}
#orange-banner {
    position:relative;
    width:50%;
    margin-left: 35%;
    margin-top:5%;
}
#blue-banner {
    position:relative;
    width:50%;
    margin-left:5%;
}
#orange-banner h2 {
    position:absolute;
    top:20%;
    left:15%;
    right:15%;
    font-size: 3.75vw;
}
#blue-banner h2 {
    position:absolute;
    top:17.5%;
    left:15%;
    width:70%;
    font-size: 3.75vw;
}
#top-spacer {
    background-image: url("resources/TopSpacer.png");
    height:calc(200vw * var(--top-spacer-height)); /*img height / width * 200*/
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
}
#bottom-spacer {
    background-image: url("resources/BottomSpacer.png");
    height:calc(200vw * var(--bottom-spacer-height)); /*img height / width * 200*/
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
    display:none;
}
#footer-image {
    background-image: url("resources/FooterBackground.png");
    height:calc(200vw * var(--footer-height));
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
}
#legal {
    position:absolute;
    bottom:10px; 
    width:100%;
}
#legal p {
    margin-top: 0;
    margin-bottom:0.5rem;
    text-align:center;
    font-size:1rem;
}
#modal {
    position:fixed;
    z-index:2;
    width:100vw;
    height:100vh;
    top:0;
    bottom:0;
    display:none;
}
#modal-background {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    background-color:rgba(0, 0, 0, 0.75);
}

#modal-back-button, #modal-forward-button {
    position:absolute;
    width:5%;
    height:auto;
    cursor:pointer;
    top:50%;
    transform: translate(0, -50%);
}
#modal-back-button {
    left: 2.5%;
}
#modal-forward-button {
    right: 2.5%;
}
#modal-back-button img, #modal-forward-button img {
    width:100%;
    height:auto;
}
#modal-forward-button img {
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}
@media only screen and (min-width:460px) {
    h1 
    {
        font-size: 2rem;
        letter-spacing:0.2rem;
    }
    p
    {
        font-size:1.25rem;
    }
    #footer-image p {
        font-size:1.25rem;
    }
}
@media only screen and (min-width:600px) {
    h1 {
    font-size: 2.5rem;
    letter-spacing:0.25rem;
    }
    p {
        font-size:1.5rem;
    }
    #description-wrapper {
        border-image-width: 8% 10%;
    }
}
@media only screen and (min-width:768px) {
    h1 {
        font-size: 3rem;
        letter-spacing:0.2rem;
    }
    p {
        font-size: 1.75rem;
    }
    #description-wrapper {
        border-image-width: 10% 10%;

    }
    #orange-banner h2, #blue-banner h2 {
        font-size: 4vw;
    }
    #top-spacer {
        display:none;
    }
}
@media only screen and (min-width:960px)
{
    h1 {
        font-size: 3rem;
        letter-spacing: .3rem;
    }
    p {
        font-size: 1.75rem;
    }
    .content-wrapper {
        max-width:960px;
    }
    #hero-image {
        height: calc(1920px * var(--header-height)); /*img height / width * 1920*/
    }
    #background-image{
        height:calc(1920px * var(--background-height));
    }
    #carousel-dots {
        width:30%;
        margin-left: 35%;
    }
    #footer-image {
        height: calc(1920px * var(--footer-height));
    }
    #orange-banner h2, #blue-banner h2 {
        font-size: 38px;
    }
}
@media only screen and (min-width: 1921px) {
    h1 {
        font-size: 2.5vw
    }
    p {
        font-size: 1.45vw;
    }
    .content-wrapper {
        max-width:50vw;
    }
    #hero-image {
        height:calc(100vw * var(--header-height));
    }
    #background-image {
        height:calc(100vw * var(--background-height));
    }
    #footer-image {
        height:calc(100vw * var(--footer-height));
    }
    #orange-banner h2, #blue-banner h2 {
        font-size: 2vw;
    }
}
@media only screen and (min-aspect-ratio:1.1) and (pointer:coarse) {
    .content-wrapper {
        max-width:50vw;
    }
    #hero-image {
        height:calc(100vw * var(--header-height));
    }
    #background-image {
        height:calc(100vw * var(--background-height));
    }
    #footer-image {
        height:calc(100vw * var(--footer-height));
    }
    h1 
    {
        font-size: 1.5rem;
        letter-spacing:0.15rem;
    }
    p
    {
        font-size:1rem;
    }
    #footer-image p {
        font-size:1.25rem;
    }
    #orange-banner h2, #blue-banner h2 {
        font-size: 2vw;
    }
    #top-spacer {
        display:block;
        height:calc(100vw * var(--top-spacer-height));
    }
    #bottom-spacer {
        display:block;
        height:calc(100vw * var(--bottom-spacer-height));
    }
}
@media only screen and (min-aspect-ratio: 2) {
#modal-back-button {
    left: calc(((100vw - 160vh) / 2 - 5%) / 2);
} 
#modal-forward-button {
    right: calc(((100vw - 160vh) / 2 - 5%) / 2);
}
}