@import "style-new.css";

.nodisplay {
    display: none;
}

.icon-index {
    width: 60px; height: 60px;
    fill: var(--red-500);
}

.display-row-center-astronaut {
    display: flex; flex-direction: row;
    justify-content: center; align-items: center;
}
.subsection-50-astronaut {
    width: 50%; height: 100%;
}
.index-astronaut-title-1 {
    display: flex; flex-direction: column;
    margin: 60px 0px 0px 60px;
}
.index-astronaut-title-2 {
    margin: 0px 80px 60px 0px;
}
.astronaut {
    height: 100vh;
}

.red-div-left {
    width: 50%; height: 100%;
    display: flex; justify-content: right; align-items: center;
}
.red-div-right {
    width: 50%; height: 100%;
    display: flex; justify-content: left; align-items: center;
}
.red-frame-left {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    margin: 180px var(--sq) 0px 0px;
}
.red-frame-right {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    margin: 0px 0px 100px 0px;
}
.red-frame-row {
    display: flex; flex-direction: row;
}
.red-sq {
    width: var(--sq); height: var(--sq);
    background-color: var(--red-500);
}
.trans-sq {
    width: var(--sq); height: var(--sq);
}

/* -------------------------------- */
.for {
    color: var(--grey-300);
    font-size: 230px;
    font-family: "Jura";
    margin: 0px 20px 20px 0px;
}
.cr8 {
    color: var(--grey-300);
    font-size: 230px;
    font-family: "Jura";
    margin: 0px 20px 20px 0px;
}

/* -------------------------------- Section posters */
.section-posters-grid {
    width: 100%;
    display: grid; grid-template-columns: auto auto auto auto; gap: 20px; 
    justify-content: center;
    margin: 160px 0px 160px 0px;
}
 .poster-a {
    display: flex; justify-content: center;
    margin: 10px 0px 10px 0px;
 }
.poster-img {
    width: 90%; aspect-ratio: 9/16;
    background-color: var(--grey-800);
}

/* ------------------------------------------------------ Model for cookies */
@keyframes cookieFade {
    0% {opacity: 0%;}
    80% {opacity: 0%;}
    100% {opacity: 100%;}
  }
.model-cookies {
    width: 100%; height: 30vh;
    background-color: var(--red-500);
    box-shadow: -5px -5px 10px 1px var(--grey-900);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    margin-top: 70vh;
    position: absolute;
    z-index: 200;
    animation-name: cookieFade;
    animation-duration: 4s;
}


/* ------------------------------------------------------ @media */
@media only screen and (max-width: 1200px) {
    .index-astronaut-title-1 {margin: 60px 0px 0px 40px;}
    .astronaut {margin: 0px 0px 0px 40px;}
}
@media only screen and (max-width: 1100px) {
    .index-astronaut-title-1 {
        padding: 20px 20px 20px 20px; margin: 60px 0px 0px 0px; 
        background-color: var(--grey-800-trans);}
    .index-astronaut-title-2 {
        padding: 20px 80px 20px 20px; margin: 0px 0px 60px 0px;
        background-color: var(--grey-800-trans);
    }
}
@media only screen and (max-width: 1000px) {
    .index-astronaut-title-1 {
        background-color: var(--red-500);}
    .index-astronaut-title-2 {
        background-color: var(--red-500);
    }
    .section-posters-grid {display: grid; grid-template-columns: auto auto auto; gap: 20px;}
}
@media only screen and (max-width: 800px) {
    .for {font-size: 200px;}
    .cr8 {font-size: 100px;}
}
@media only screen and (max-width: 600px) {
    .header {background-color: var(--grey-800-trans);}
    .display-row-center-astronaut {
        flex-direction: column;
        justify-content: center; align-items: center;
    }
    .subsection-50-astronaut {
        width: 100%; height: 50%;
    }
    .index-astronaut-title-1 {
        width: 70%;
        padding: 20px 20px 20px 20px; margin: 180px 0px 0px 0px; 
    }
    .index-astronaut-title-2 {
        width: 70%;
        padding: 20px 20px 20px 20px; margin: 0px 0px 100px 0px;
    }
    .section-posters-grid {display: grid; grid-template-columns: auto auto; gap: 20px;}
}
@media only screen and (max-width: 400px) {

    .for {font-size: 180px;}
    .cr8 {font-size: 60px;}
    .text-light-xxl {font-size: 14px;}
}
@media only screen and (max-width: 300px) {
    .section-posters-grid {display: grid; grid-template-columns: auto; gap: 0px;}
}