/* === Font imports === */
@font-face {
    font-family: 'Android Assassin';
    src: url('../fonts/Android Assassin.woff2') format('woff2'),
         url('../fonts/Android Assassin.woff') format('woff'),
         url('../fonts/Android Assassin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bahnschrift';
    src: url('../fonts/Bahnschrift.woff2') format('woff2'),
         url('../fonts/Bahnschrift.ttf') format('truetype'),
         url('../fonts/Bahnschrift.woff') format('woff');
    font-weight: 600;
    font-stretch: condensed;
    font-display: swap;
}



/* === Body === */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {    
    font-family: Jura,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-shadow: 3px 3px #800000;
    overflow-x: hidden;

    background: radial-gradient(ellipse, rgb(7, 39, 64), #000000);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: right center;

    color: #fff;

    webkit-tap-highlight-color: rgba(255,255,255,.2);
}



/* === Elaborate background === */
.background {
    position: fixed;
    overflow-x: hidden;

    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    opacity: 0; /* Ensure backgrounds are visible by default */
}

/* Specific backgrounds */
#background-angelo {
    /* Background image is loaded and set in JS script */
    z-index: -1;
    transition: opacity 0.125s ease-in-out;
}

#background-mariana {
    /* Background image is loaded and set in JS script */
    z-index: -2;
    transition: opacity 0.25s ease-in-out;
}

#background-fog {
    /* Background image is loaded and set in JS script */
    background-size: 75% auto;
    background-repeat: repeat-x;
    mix-blend-mode: screen;
    z-index: -3;
    transition: opacity 1.0s ease-in-out;
}

#background-base {
    /* Background image is loaded and set in JS script */
    z-index: -4;
    transition: opacity 3.0s ease-in-out;
}

#background-black {
    background-color: #000000;
    z-index: -5;
    opacity: 1;
}

/* Media query adjustments */
@media (max-width: 1600px) {
    #background-angelo, 
    #background-mariana, 
    #background-base {
        background-size: 125% auto;
    }

    #background-angelo {
        background-position: 50% top;
    }

    #background-mariana, 
    #background-base {
        background-position: 30% top;
    }
}

@media (max-width: 1024px) {
    #background-angelo, 
    #background-mariana, 
    #background-base {
        background-size: 150% auto;
    }

    #background-angelo {
        background-position: 75% top;
    }

    #background-mariana, 
    #background-base {
        background-position: 40% top;
    }
}

@media (max-width: 800px) {
    #background-angelo, 
    #background-mariana, 
    #background-base {
        background-size: 175% auto;
    }

    #background-angelo {
        background-position: 75% top;
    }

    #background-mariana, 
    #background-base {
        background-position: 50% top;
    }
}

#background-mariana, #background-angelo, #background-fog, #background-base {
    will-change: opacity;
}



/* === Logo and container === */
#logo-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100vw;
    height: 100vh;

    opacity: 0;
    transition: opacity 0.3333s ease-out;
}

.logo img { 
    width: clamp(400px, 100vw, 9000px);
    height: auto;
}

.logo {
    margin-bottom: -3em;
}

@media(max-width:1600px) {
    #logo-container {
        display: inline-flex;
        height: auto;
    }

    .logo {
        margin-top: 30%;
        margin-bottom: 0;
    }
}

@media(max-width:1024px) {
    #logo-container {
        display: inline-flex;
        height: auto;
    }

    .logo {
        margin-top: 45%;
        margin-bottom: 0;
    }
}



/* === Main containers === */
.container {
    margin: 0 auto;
    width: 60%;
    height: auto;

    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
    padding-bottom: 2em;

    text-align: center;
    color: #fff;

    font-size: clamp(1.125em, 1.3333vw, 7.5em);

    background: rgba(0, 0, 12, 0.666666);
    border-radius: 40px;
}

.alternate-colors {
    background: rgba(32, 0, 32, 0.75);
}

@media(min-width:1024px) {
    .container {
        font-size: clamp(1.25em, 1.6666vw, 9em);
    }
}

@media(max-width:1600px) {
    .container {
        background: rgba(0, 20, 32, 0.666666);
        border-radius: 20px;
    }

    .alternate-colors {
        background: rgba(44, 0, 36, 0.75);
    }
}

@media(max-width:1024px) {
    .container {
        padding-top: 5px;
        padding-left: 5%;
        padding-right: 5%;
        width: 80%;
    }
}



/* === Building blocks and layout divs === */
.row {
    position:  relative;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-margin {
    margin-bottom: 3vw;
}

.top-margin {
    margin-top: 3vw;
}

.remove-bottom-margin {
    margin-bottom: -3vw;
}

.remove-top-margin {
    margin-bottom: -3vw;
}



/* === Copyright div === */
.copyright {
    padding-top: clamp(2em, 5vw, 6em);

    font-size: 0.75em;
    font-family: Bahnschrift, sans-serif;
}



/* === Big text styles === */
.nyc-2055 {
    font-family: Android Assassin,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: clamp(1.5em, 7.0vw, 6em);
    font-style: italic;
    font-weight: normal;
    letter-spacing: 0.05em;

    filter: drop-shadow(0px 0px 24px red);
    text-shadow: -4px 0 red, 0 4px red, 4px 0 red, 0 -4px red;

    margin-top: 1vw;
    margin-bottom: 0;
}

@media(max-width:800px) {
    .nyc-2055 {
        font-size: clamp(1.5em, 10.0vw, 6em);
    }
}

.big-heading {
    width: 100%;
    height: auto;
    
    text-align: center;
    margin: 0 auto;

    padding: 0px;

    font-family: Bahnschrift,sans-serif;
    font-size: clamp(0.5em, 3.4vh, 6em);
    font-weight: 600;
    font-stretch: condensed;

    color: #ffffff;
    filter: drop-shadow(0px 0px 12px red);
    text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
    letter-spacing: 0.15em;
}

.feature-heading {
    font-family: Bahnschrift,sans-serif;
    font-size: clamp(0.5em, 6vw, 6em);
    font-weight: 600;
    font-stretch: condensed;

    color: #ffffff;
    filter: drop-shadow(0px 0px 12px red);
    text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
    letter-spacing: 0.125em;

    text-align: left;
    margin-top: 1.5em;
    margin-bottom: -0.5em;
    padding: 0;
}

.feature {
    text-align: justify;
    line-height: 1.5em;
}

@media(min-width:800px) {
    .big-heading {
        font-size: clamp(0.5em, 4vw, 6em);
    }

    .feature-heading {
        font-size: clamp(0.333em, 3.5vw, 6em);
    }
}

@media(min-width:1024px) {
    .big-heading {
        font-size: clamp(0.5em, 5.5vh, 3em);
    }

    .feature-heading {
        font-size: clamp(0.333em, 4.0vh, 2em);
    }
}





/* === Normal text styles === */
.text-justify {
    text-align: justify;
    line-height: 1.5em;
}

.text-center {
    text-align: center;
    line-height: 1.5em;
}



/*=== Images === */
.img-fluid {
    filter: drop-shadow(5px 5px 5px #660000);

    border-radius: 20px;

    max-width: 100%;
    height: auto;

    margin-bottom: 0px;
}

.img-bordered {
    border: 2px solid #ff0000;
}

.img-logo {
    filter: drop-shadow(5px 5px 5px #660000);

    max-width: 50%;
    height: auto;

    margin-top: -8px;
    margin-bottom: 0px;
}

.gif-footage {
    filter: drop-shadow(5px 5px 5px #660000);
    border-radius: 20px;

    width: 70%;
    margin-top: 1.5em;
}

.smaller-footage {
    width: 60%;
}

@media(max-width:1600px) {
    .gif-footage, .smaller-footage {
        width: 80%;
    }
}

@media(max-width:1024px) {
    .gif-footage, .smaller-footage {
        width: 100%;
    }
}



/* === Screenshot gallery === */
.screenshot-gallery {
    width: 100%;
    margin: 0 auto;
    margin-top: 6vw;
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;                /* Allow images to wrap to the next line */
    justify-content: center;        /* Center the images */
    gap: 16px;                      /* Space between images */
}

.screenshot-gallery a {
    /* Set a minimum width so images will wrap as needed */
    flex: 1 1 calc(33.333% - 16px);     /* Max 3 images per row */
    max-width: calc(33.333% - 16px);    /* Ensure each item takes up no more than 33.333% */
    box-sizing: border-box;

    display: inline-block;
    position: relative;
    cursor: pointer;                /* Changes cursor to pointer */
}

/* below 1600px width: 2 images per row */
@media (max-width: 1600px) {
    .screenshot-gallery a {
        flex: 1 1 calc(50% - 16px); /* 2 images per row */
        max-width: calc(50% - 16px);
    }
}

/* below 800px width: 1 image per row */
@media (max-width: 800px) {
    .screenshot-gallery a {
        flex: 1 1 100%;             /* 1 image per row */
        max-width: 100%;
    }
}

.screenshot-gallery img {
    width: 100%;                    /* Ensure the image fills its container */
    height: auto;                   /* Maintain aspect ratio */
    display: block;                 /* Remove any inline spacing */
    object-fit: cover;              /* Crop the image to fit within its container */
    border-radius: 10px;            /* Add rounded corners */
    border: 2px solid #ff0000;      /* Red border for visibility */

    /* Smooth darken and zoom transition */
    transition: filter 0.3s ease, transform 0.3s ease;
}

.screenshot-gallery a:hover img {
    /* Change and zoom the image on hover */
    filter: brightness(110%) saturate(110%);
    transform: scale(1.025);        /* Slight zoom */
}



/* === Illustrations gallery === */
.illust-gallery {
    width: 66%;
    margin: 0 auto;
    margin-top: 3vw;

    display: inline-block;
    position: relative;
    cursor: pointer;                /* Changes cursor to pointer */
}

.illust-gallery img {
    margin-bottom: 1em;

    /* Smooth darken and zoom transition */
    transition: filter 0.3s ease, transform 0.3s ease;
    display: block;
    width: 100%;                    /* Responsive width */
    height: auto;                   /* Maintain aspect ratio */
}

/* Darken and zoom the image on hover */
.illust-gallery a:hover img {
    filter: brightness(110%) saturate(110%);
    transform: scale(1.025);        /* Slight zoom */
}

@media(max-width:1024px) {
    .illust-gallery {
        width:  90%;
    }
}



/* === Character illustration === */
.char-illust {
    width: 45%;
    margin: 0 auto;
    margin-top: 3vw;

    display: inline-block;
    position: relative;
    cursor: pointer;                /* Changes cursor to pointer */

    /* Prevents the image div from shrinking */
    flex-shrink: 0;
}

.char-illust img {
    margin-bottom: 1em;

    /* Smooth darken and zoom transition */
    transition: filter 0.3s ease, transform 0.3s ease;
    display: block;
    width: 100%;                    /* Responsive width */
    height: auto;                   /* Maintain aspect ratio */
}

/* Darken and zoom the image on hover */
.char-illust a:hover img {
    filter: brightness(110%) saturate(110%);
    transform: scale(1.025);        /* Slight zoom */
}

.character-container {
    display: flex;
    align-items: flex-start; /* Aligns the items at the top */
    gap: 20px; /* Adds space between the elements */
}

.char-bio {
    text-align: justify;
    line-height: 1.5em;
    margin-top: 3vw;

    /* Allows the text to take up the remaining space */
    flex-grow: 1;

    font-size: 85%;
}

.right-margin {
    margin-right: 3vw;
}

.left-margin {
    margin-left: 3vw;
}

.align-right {
    text-align: right;
}

@media (max-width: 1600px) {
    .char-bio {
        font-size: 90%;
    }
}

@media (max-width: 1024px) {
    .char-illust {
        width:  50%;
        text-align: center;
        margin-bottom: 0;
    }

    .char-illust img {
        width:  100%;
    }

    .character-container {
        margin-top: 3vw;
        flex-direction: column; /* Stacks the items vertically */
        align-items: center; /* Centers the items horizontally */
    }

    .char-bio {
        margin-top: 0;
        font-size: 100%;
    }

    .right-margin {
        margin-left: auto;
        margin-right: auto;
    }

    .left-margin {
        /* Ensures that Mariana's image appears on top */
        order: -1;

        margin-left: auto;
        margin-right: auto;
    }

    .align-right {
        text-align: left;
    }
}



/* === Team table === */
.team-container {
    max-width: 100%;
    margin: 0 auto;

    margin-top: 3vw;
    overflow-x: auto;
}

.team-container table {
    width: 100%;

    font-size: 70%;
    font-weight: lighter;
    overflow-x: auto;
}

tbody tr {
    background-color: rgb(192, 0, 0, 0.5);
}

tbody tr:nth-child(odd) {
    background-color: rgb(192, 0, 0, 0.25);
}

tbody tr, td {
    padding: 0.25em;
}

.ogata {
    font-size: 70%;
}



/* === Image overlay when hovering === */
.follow-imgs img {
    /* Smooth darken and zoom transition */
    transition: filter 0.3s ease, transform 0.3s ease;

    width: clamp(64px, 8vw, 600px);
}

.follow-imgs a:hover img {
    /* Darken and zoom the image on hover */
    filter: brightness(133%) saturate(110%);
    transform: scale(1.15);        /* Slight zoom */
}



/* === Video embed === */
.video-container {
    width: 100%;  /* Full width of the container */
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;

    margin-top: 32px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    border-color: red;
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5);
    border-radius: 20px;
}



/* === Steam embed iframe === */
.steam-container {
    margin-top: 32px;
    margin-bottom: 32px;
}

.steam-container iframe {
    left: 0;
    width: 60%;
    height: 200px;

    filter: drop-shadow(5px 5px 5px #660000);
}

@media(max-width:1600px) {
    .steam-container iframe {
        width: 100%;
    }
}



/* === Links === */
a {
    color: #ffa000;
    transition: all .2s ease-in-out;
    font-weight: bold;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #ffff00;
}

.alternate-colors a, .presskit a {
    filter: drop-shadow(0px 0px 8px orangered);
}

.alternate-colors a:hover, .alternate-colors a:focus,
.presskit a:hover, .presskit a:focus {
    filter: drop-shadow(0px 0px 8px gold);
}





/* === User selections === */
::-moz-selection {
    text-shadow: none;
    background: rgba(255,0,0,.5);
}

::selection {
    text-shadow: none;
    background: rgba(255,0,0,.5);
}



/* === Divider lines === */
hr {
    width: 90%;

    border-color: rgba(255, 0, 0);
    background-color: rgba(255, 0, 0);
    color: rgba(255, 0, 0);

    box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5);
}

@media(max-width:1024px) {
    hr {
        margin-top: 2.75em;
        margin-bottom: 2.75em;
    }
}



/* === Glow effect on bold / italic words === */
p b, p i, .glow {
    filter: drop-shadow(0px 0px 6px red);
}




.logline {
    font-family: Bahnschrift,sans-serif;
    font-size: clamp(0.25em, 4vw, 1.75em);
    font-weight: 600;
    font-stretch: condensed;

    color: #ffffff;
    filter: drop-shadow(0px 0px 12px red);
    text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
    letter-spacing: 0.05em;

    text-align: center;
    margin-top: 0.4em;
    margin-bottom: 0em;
    padding: 0;
}


/* === Retroware email list signup === */

.connectWithUs {
    display: flex;
    flex-direction: column;
    width: 90%;
    text-shadow: none;
    letter-spacing: 0;
}

.connectWithUs > div {
    border-radius: 10px;
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
    transition: transform 300ms ease;
}

.connectWithUs > div:hover,
.connectWithUs > div:active,
.connectWithUs > div:focus-within {
    transform: scale(1.04);
}

.emailSignup {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
}

input,
.joinButton,
.discordButton a {
    border: 4px solid rgba(255, 0, 0, 0.8);
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #000;
    font: inherit;
    line-height: normal;
}

.connectWithUs input {
    margin: 0;
    border-right: 2px solid rgba(255, 0, 0, 0.8);
    border-radius: 8px 0 0 8px;
    text-align: left;
    width: 100%;
}

input:focus { 
    outline: none;
    background-color: #500;
}

.joinButton {
    border-radius: 0 8px 8px 0;
    border-left: 2px solid rgba(255, 0, 0, 0.8);
}

.joinButton,
.discordButton a {
    transition-property: color, background-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
}

.joinButton:hover,
.discordButton a:hover,
.joinButton:focus,
.discordButton a:focus,
.joinButton:active,
.discordButton a:active {
    background-color: #800;
}

.connectWithUs input:disabled + .joinButton {
    color: #757575;
    background-color: #000;
    cursor: initial;
}

.feedback {
    position: absolute;
    top: 120%;
    width: 100%;
    text-align: center;
    text-shadow: 0px 3px #000;
}

.warning { color: #f77; }
.success { color: #7f7; }
.discordButton:hover,
.discordButton:focus,
.discordButton:active {
    cursor: pointer;
}

.discordButton a {
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    margin-top: 64px;
}

.discordButton a:hover,
.discordButton a:hover img {
    transform: none;
}

.discordLogo {
    flex-shrink: 0;
    width: 24px;
    line-height: 0;
    height: auto;
    margin-right: 64px;
}