/* Home Page */
.homepage {
    background-image: url("https://res.cloudinary.com/dojnmzsrx/image/upload/v1697227606/nancy_crying_qnxbdw.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Obviously';
    padding: 1em;
}

.site-header img {
    width: 50%;
}

@media screen and (min-width: 800px) {
    .site-header img {
        width: 30%;
    }
}

.site-wrapper {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 0.5em;
   grid-template-rows: repeat(3, auto) 1fr;
    min-height: 100vh;
}

.intro-text {
    grid-column: 1;
    grid-row: 1 / 5;
    color: white;
    font-size: 1em;
    margin-top: 3em;
}

@media screen and (min-width: 800px) {
    .intro-text {
        font-size: 1.5em;
    }
}

.index__season-wrapper {
    grid-column: 3;
    text-decoration: none;
}

.index__season-wrapper img {
    width: 95%;
}

@media screen and (min-width: 800px) {
    .index__season-wrapper img {
        width: 70%;
    }
}

.index__season-wrapper p {
    color: white;
}

/* Season 7 Home Page */
.season7-homepage {
    background-image: url("https://res.cloudinary.com/dojnmzsrx/image/upload/v1739059018/seasonbackground_k21yfn.webp");
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Obviously';
    color: white;
    padding: 1em;
}

.couple__couple-wrapper__taga {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__asty {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__alti {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__hani {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__mara {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__most {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

/* Season 6 Home Page */
.season6-homepage {
    background-image: url("https://res.cloudinary.com/dojnmzsrx/image/upload/v1710459633/seasonbackground_foxtsc.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Obviously';
    color: white;
    padding: 1em;
}

.couple__couple-wrapper__aj {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__ac {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__bk {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__lj {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__cj {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

/* Season 5 Home Page */
.season5-homepage {
    background-image: url("https://res.cloudinary.com/dojnmzsrx/image/upload/v1697515530/bg_vpnbin.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Obviously';
    color: white;
    padding: 1em;
}

.couple__couple-wrapper__lm {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__si {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__tj {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

/* Season 4 Home Page */
.season4-homepage {
    background-image: url("https://res.cloudinary.com/dojnmzsrx/image/upload/v1697230569/jackie_crying_sudnei.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Obviously';
    color: white;
    padding: 1em;
}

.couple__couple-wrapper__tb {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
    cursor: pointer;
}

.couple__couple-wrapper__mp {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__jm {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__bz {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__ck {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
    text-decoration: none;
}

/* Season 3 Home Page */
.season3-homepage {
    background-image: url("https://res.cloudinary.com/dojnmzsrx/image/upload/v1697229795/colleen_crying_aci49i.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Obviously';
    color: white;
    padding: 1em;
}

.season__site-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0.5em;
    grid-template-rows: repeat(4, auto) 1fr;
    min-height: 100vh;
}

.back-arrow {
    align-self: end;
    grid-column: 1;
    grid-row: 1;
}

.season {
    grid-column: 1;
    grid-row: 2;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
}

@media screen and (min-width: 800px) {
    .season {
        font-size: 1.8em;
    }
}

.couple__couple-wrapper__ab {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
}

.couple-image {
    width: 100%;
}

@media screen and (min-width: 800px) {
    .couple-image {
        width: 85%;
    }
}

.couple-header {
    margin-top: 0.4em;
    margin-bottom: 0.2em;
    font-size: 0.8em;
}

@media screen and (min-width: 800px) {
    .couple-header {
        font-size: 1em;
    }
}

.couple__couple-wrapper__zc {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__rsk {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__nb {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
}


.couple__couple-wrapper__cm {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
    text-decoration: none;
}

/* Season 2 Home Page */
.season2-homepage {
    background-image: url("https://res.cloudinary.com/dojnmzsrx/image/upload/v1697229017/natalie_crying_jarqhp.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Obviously';
    color: white;
    padding: 1em;
}

.season2__site-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0.5em;
    grid-template-rows: repeat(4, auto) 1fr;
    min-height: 100vh;
}

.couple__couple-wrapper__sk {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__ds {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__ij {
    grid-column: 2;
    grid-row: 4;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__dn {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__ns {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__ms {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
    text-decoration: none;
}

/* Season 1 Home Page */

.season1-homepage {
    background-image: url("https://res.cloudinary.com/dojnmzsrx/image/upload/v1697228027/damien_crying_dimtl0.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Obviously';
    color: white;
    padding: 1em;
}

.season1__site-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0.5em;
    grid-template-rows: repeat(4, auto) 1fr;
    min-height: 100vh;
}

.couple__couple-wrapper__lc {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__gd {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__kk {
    grid-column: 2;
    grid-row: 4;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__jm {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__amb {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    text-decoration: none;
}

.couple__couple-wrapper__dc {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
    text-decoration: none;
}

/* Couple background colors */
.monica-stephen {
    background: linear-gradient(90deg, #0069E4 25.89%, #9FEA00 84.8%);
    background-repeat: no-repeat;
}

.marissa-ramses {
    background: linear-gradient(90deg, #FF782C 25.89%, #0069E4 84.8%);
    background-repeat: no-repeat;
}

.hannah-nick {
    background: linear-gradient(90deg, #BE84F9 25.89%, #BE84F9 84.8%);
    background-repeat: no-repeat;
}

.alex-tim {
    background: linear-gradient(90deg, #54F0E7 25.89%, #E2725A 84.8%);
    background-repeat: no-repeat;
}

.ashley-tyler {
    background: linear-gradient(90deg, #FF57EE 25.89%, #BE84F9 84.8%);
    background-repeat: no-repeat;
}

.taylor-garrett {
    background: linear-gradient(90deg, #007513 25.89%, #FFAFCC 84.8%);
    background-repeat: no-repeat;
}

.amy-johnny {
    background: linear-gradient(90deg, #6300B0 25.89%, rgba(84, 240, 231, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.chelsea-jimmy {
    background: linear-gradient(90deg, #A00000 25.89%, rgba(255, 87, 238, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.ad-clay {
    background: linear-gradient(90deg, #E2725A 25.89%, rgba(160, 0, 0, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.brittany-kenneth {
    background: #E2725A;
}

.laura-jeramey {
    background: linear-gradient(90deg, #A00000 25.89%, rgba(226, 114, 90, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.taylor-jp {
    background: linear-gradient(90deg, #6F3515 25.89%, rgba(159, 234, 0, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.lydia-milton {
    background: linear-gradient(90deg, #FF57EE 16.25%, rgba(226, 114, 90, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.stacy-izzy {
    background: linear-gradient(90deg, #FF57EE 16.25%, rgba(226, 114, 90, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.tiffany-brett {
    background: linear-gradient(90deg, #6300B0 16.25%, rgba(160, 0, 0, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.micah-paul {
    background: linear-gradient(90deg, #FF782C 16.25%, rgba(255, 175, 204, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.jackie-marshall {
    background: linear-gradient(90deg, #6F3515 16.25%, rgba(226, 114, 90, 0.87) 84.8%, rgba(226, 114, 90, 0.87) 84.8%);    background-repeat: no-repeat;
}

.bliss-zack {
    background: linear-gradient(90deg, #FF57EE 16.25%, rgba(255, 120, 44, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.chelsea-kwame {
    background: linear-gradient(90deg, #FF782C 16.25%, rgba(0, 117, 19, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.alexa-brennon {
    background: linear-gradient(90deg, #FF57EE 13.55%, rgba(111, 53, 21, 0.85) 79.9%);
    background-repeat: no-repeat;
}

.raven-sk {
    background: linear-gradient(90deg, #A00000 11.2%, rgba(255, 120, 44, 0.8) 79.95%);
    background-repeat: no-repeat;
}

.nancy-bartise {
    background: linear-gradient(90deg, #A00000 11.45%, rgba(0, 105, 228, 0.79) 86.65%);
    background-repeat: no-repeat;
}

.zanab-cole {
    background: linear-gradient(90deg, #FF782C 11.9%, rgba(0, 117, 19, 0.87) 89.5%);
    background-repeat: no-repeat;
}

.colleen-matt {
    background: linear-gradient(270deg, #A00000 20.5%, rgba(255, 120, 44, 0.8) 85.55%);
    background-repeat: no-repeat;
}

.natalie-shayne {
    background: linear-gradient(90deg, #BE84F9 16.25%, rgba(0, 117, 19, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.shaina-kyle {
    background: linear-gradient(90deg, #54F0E7 16.25%, rgba(226, 114, 90, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.danielle-nick {
    background: linear-gradient(90deg, #007513 16.25%, rgba(160, 0, 0, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.iyanna-jarrette {
    background: linear-gradient(90deg, #A00000 16.25%, rgba(255, 120, 44, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.mallory-sal {
    background: linear-gradient(90deg, #FFAFCC 16.25%, rgba(255, 120, 44, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.deepti-shake {
    background: linear-gradient(90deg, #BE84F9 16.25%, rgba(255, 120, 44, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.lauren-cameron {
    background: linear-gradient(90deg, #0069E4 16.25%, rgba(160, 0, 0, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.giannina-damian {
    background: linear-gradient(90deg, #FF782C 16.25%, rgba(159, 234, 0, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.kelly-kenny {
    background: linear-gradient(90deg, #FF782C 16.25%, rgba(84, 240, 231, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.jessica-mark {
    background: linear-gradient(90deg, #0069E4 16.25%, rgba(255, 175, 204, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.amber-barnett {
    background: linear-gradient(90deg, #A00000 16.25%, rgba(255, 120, 44, 0.87) 84.8%);
    background-repeat: no-repeat;
}

.diamond-carlton {
    background: linear-gradient(90deg, #A00000 16.25%, rgba(99, 0, 176, 0.87) 84.8%);
    background-repeat: no-repeat;
}

/* Layout for all couple pages */
body {
    font-family: obviously, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    padding: 1em;
}

.couple__site-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(6, auto) 1fr;
    column-gap: 0.5em;
    min-height: 100vh;
}

@media screen and (min-width: 800px) {
    .couple__site-wrapper {
        grid-template-rows: repeat(6, auto);
    }
}

.couple__back-arrow {
    margin-top: 0.8em;
    cursor: pointer;
}

.couple-name {
    font-family: 'Miss Fajardose', cursive;
    font-size: 4em;
    line-height: 1;
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

@media screen and (min-width: 800px) {
    .couple-name {
        font-size: 10em;
        line-height: 1;
    }
}

.zodiac_left {
    display: block;
    width: 50%;
    grid-column: 1;
    grid-row: 2;
    margin-left: auto;
    margin-right: auto;
    align-self: end;
}

.name_left {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    align-self: end;
    color: black;
    display: none;
}

.birthday_left {
    grid-column: 1;
    grid-row: 3;
    font-weight: 500;
    text-align: center;
    color: black;
}

@media screen and (min-width: 800px) {
    .birthday_left {
        font-size: 1.3em;
    }
}

.main-image {
    grid-column: 2;
    grid-row: 2 / 5;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
}

.zodiac_right {
    display: block;
    width: 50%;
    grid-column: 3;
    grid-row: 2;
    margin-left: auto;
    margin-right: auto;
    align-self: end;
}

.name_right {
    grid-column: 3;
    grid-row: 1;
    text-align: center;
    align-self: end;
    color: black;
    display: none;
}

.birthday_right {
    grid-column: 3;
    grid-row: 3;
    font-weight: 500;
    text-align: center;
    color: black;
}

@media screen and (min-width: 800px) {
    .birthday_right {
        font-size: 1.3em;
    }
}

.question {
    grid-column: 2;
    grid-row: 5;
    text-align: center;
    padding-bottom: 1em;
    font-style: italic;
    margin-top: 1em;
}

@media screen and (min-width: 800px) {
    .question {
        padding-bottom: 0;
    }
}

@media screen and (min-width: 800px) {
    .question {
        font-size: 1.4em;
    }
}

.buttons {
    grid-column: 2;
    grid-row: 6;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1em;
    margin-top: 1em;
    cursor: pointer;
}

.answer {
    font-family: 'Obviously';
    color: white;
    background-color: green;
    padding: 0.5em 0.5em;
    border-radius: 4px;
    display: block;
    text-decoration: none;
}

@media screen and (min-width: 800px) {
    .answer {
        font-size: 1.5em;
    }
}

/* Layout for all couple analysis pages */
:root {
    --together: white;
    --not-together: black;
    --together-text: black;
    --not-together-text: white;
}

.together {
    background-color: var(--together);
    color: var(--together-text);
    padding: 4em;
}

.not-together {
    background-color: var(--not-together);
    color: var(--not-together-text);
    padding: 4em;
}

.close-window {
    margin-top: 1em;
    float: right;
    margin-bottom: 1em;
}

.analysis__headline {
    clear: both;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.2em;
}

@media screen and (min-width: 800px) {
    .analysis__headline {
        font-size: 2em;
    }
}

.analysis__image {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    margin-bottom: 1em;
}

@media screen and (min-width: 800px) {
    .analysis__image {
        width: 60%;
    }
}

.zodiac-traits-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-row-gap: 1em;
    grid-column-gap: 1em;
    /*padding-left: 2em;
    padding-right: 2em;*/
}

@media screen and (min-width: 800px) {
    .zodiac-traits-wrapper {
        padding-left: 2em;
        padding-right: 2em;
    }
}

.zodiac-traits__name {
    font-family: 'Miss Fajardose', cursive;
    font-size: 3em;
    text-align: center;
}

@media screen and (min-width: 800px) {
    .zodiac-traits__name {
        font-size: 4.5em;
    }
    
    .zodiac-traits__name-left {
        grid-column: 1;
        grid-row: 1;
    }

    .zodiac-traits__name-right {
        grid-column: 2;
        grid-row: 1;
    }
}

.zodiac-traits__list {
    /*padding-left: 3em;
    padding-right: 3em;*/
    list-style-type: circle;
    font-size: 0.8em;
}

@media screen and (min-width: 800px) {
    .zodiac-traits__list {
        padding-left: 3em;
        padding-right: 3em;
        font-size: 1em;
    }
}

.analysis__paragraph {
    margin-top: 1em;
    margin-bottom: 1.7em;
    max-width: 70ch;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.8em;
}

@media screen and (min-width: 800px) {
    .analysis__paragraph {
        font-size: 1em;
    }
}

.back-to-couples {
    display: block;
    text-decoration: none;
    text-align: center;
    width: 20%;
    color: black;
    margin-right: auto;
    margin-left: auto;
    background-color: lightgray;
    padding: 0.8em 1em;
    border-radius: 4px;
    font-family: 'Obviously';
    font-size: 0.8em;
}



/* Popup
/*.mfp-bg {
    background-color: #fff;
}*/

.mfp-container {
    padding: 4em;
}

.mfp-close-btn-in .mfp-close {
    color: white;
}