:root {
    --book-height: 500px;
    --intro-height: 900px;
}

body {
    background: #9f8de3;
    /* background: linear-gradient(to bottom, #faa51a 0%, #faa51a 50%, #145369 51%, #145369 100%); */
    /* text-shadow: 0px 1px #145369; */
}

.clouds {
    position: relative;
    /* height: calc(100vh - var(--nav-height)); */
    /* max-height: 1024px; */
    min-height: 900px;
    min-height: calc(100vh - var(--nav-height));
    background-image: url("../images/above-clouds.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
}


.intro {
    position: relative;
    /* height: calc(100vh - var(--nav-height));
    max-height: 1024px;
    min-height: 900px; */

    /* border: 5px solid red; */


    /* background-color: #5289c8; */
    /* background: linear-gradient(to bottom, #faa51a 0%, #faa51a 100%); */
    /* z-index: 9; */
    color: #fff;
}


.intro .container {
    /* position: absolute; */
    max-width: 1110px;
    margin: 0 auto;
    right: 0;
    left: 0;
    text-align: center;
    padding-top: 50px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    z-index: 2;
    /* border: 1px solid red; */
}

.intro .container p {
    text-transform: initial;
    letter-spacing: 0em;
    width: 80%;
    margin: 0 auto;
    /* border: 1px solid red; */
    position: relative;
}

@media screen and (max-width: 800px) {
    .intro .container p {
        width: 80vw;
        margin: 0 auto;
        left: 0;
    }
}

.container h1 {
    font-size: 50px;
    font-weight: normal;
    margin-bottom: 30px;
}

@media screen and (max-width: 800px) {
    .container h1 {
        font-size: 20px;
    }
}


/* *************************************************************************************************** */

.favorites-list {}


.favorites-list .container {
    /* position: absolute; */
    /* max-width: 1110px;
    margin: 0 auto; */
    right: 0;
    left: 0;
    letter-spacing: 0.2em;
    /* border: 1px solid red; */
}

.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    row-gap: 40px;
    flex-wrap: wrap;
    padding: 50px 0;
    /* border: 1px solid red; */
}

.card {
    position: relative;
    /* border: 1px solid red; */
    width: clamp(120px, calc(20vw * 1), 250px);
    height: clamp(180px, calc(20vw * 1.5), 375px);
    opacity: 0;
    animation: card-fade-in 0.7s forwards;
    container-type: inline-size;
}

@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.cards .card:nth-child(n) {
    animation-delay: calc(0.05s * (var(--card-index, 0)));
}

.cards .card:nth-child(1) { --card-index: 0; }
.cards .card:nth-child(2) { --card-index: 1; }
.cards .card:nth-child(3) { --card-index: 2; }
.cards .card:nth-child(4) { --card-index: 3; }
.cards .card:nth-child(5) { --card-index: 4; }
.cards .card:nth-child(6) { --card-index: 5; }
.cards .card:nth-child(7) { --card-index: 6; }
.cards .card:nth-child(8) { --card-index: 7; }
.cards .card:nth-child(9) { --card-index: 8; }
.cards .card:nth-child(10) { --card-index: 9; }
.cards .card:nth-child(11) { --card-index: 10; }
.cards .card:nth-child(12) { --card-index: 11; }
.cards .card:nth-child(13) { --card-index: 12; }
.cards .card:nth-child(14) { --card-index: 13; }
.cards .card:nth-child(15) { --card-index: 14; }
.cards .card:nth-child(16) { --card-index: 15; }
.cards .card:nth-child(17) { --card-index: 16; }
.cards .card:nth-child(18) { --card-index: 17; }
.cards .card:nth-child(19) { --card-index: 18; }
.cards .card:nth-child(20) { --card-index: 19; }
.cards .card:nth-child(21) { --card-index: 20; }
.cards .card:nth-child(22) { --card-index: 21; }
.cards .card:nth-child(23) { --card-index: 22; }
.cards .card:nth-child(24) { --card-index: 23; }
.cards .card:nth-child(25) { --card-index: 24; }
.cards .card:nth-child(26) { --card-index: 25; }
.cards .card:nth-child(27) { --card-index: 26; }
.cards .card:nth-child(28) { --card-index: 27; }
.cards .card:nth-child(29) { --card-index: 28; }
.cards .card:nth-child(30) { --card-index: 29; }
.cards .card:nth-child(31) { --card-index: 30; }
.cards .card:nth-child(32) { --card-index: 31; }
.cards .card:nth-child(33) { --card-index: 32; }
.cards .card:nth-child(34) { --card-index: 33; }
.cards .card:nth-child(35) { --card-index: 34; }
.cards .card:nth-child(36) { --card-index: 35; }
.cards .card:nth-child(37) { --card-index: 36; }
.cards .card:nth-child(38) { --card-index: 37; }
.cards .card:nth-child(39) { --card-index: 38; }
.cards .card:nth-child(40) { --card-index: 39; }    


.card .background, 
.card .avatar {
    position: absolute;
    width: 70%;
    height: 43%;
    left: 15%;
    top: 15%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-size: cover;
    background-position: center;
}

.card .background[data-variant="f-01"] { background-image: linear-gradient(to bottom, #8cc153, #41965a);}
.card .background[data-variant="f-02"] { background-image: linear-gradient(to bottom, #f6b26b, #e69138);}
.card .background[data-variant="f-03"] { background-image: linear-gradient(to bottom, #6fa8dc, #3d85c6);}
.card .background[data-variant="f-04"] { background-image: linear-gradient(to bottom, #a64d79, #852b5b);}
.card .background[data-variant="f-05"] { background-image: linear-gradient(to bottom, #e06666, #cc0000);}
.card .background[data-variant="f-06"] { background-image: linear-gradient(to bottom, #ffd966, #bf9000);}
.card .background[data-variant="f-07"] { background-image: linear-gradient(to bottom, #93c47d, #6aa84f);}
.card .background[data-variant="f-08"] { background-image: linear-gradient(to bottom, #76a5af, #45818e);}
.card .background[data-variant="f-09"] { background-image: linear-gradient(to bottom, #8e7cc3, #674ea7);}

.card .avatar[data-variant="f-01"] { background-image: url("../images/cards/avatar-f-face-01.svg"); }
.card .avatar[data-variant="f-02"] { background-image: url("../images/cards/avatar-f-face-02.svg"); }
.card .avatar[data-variant="f-03"] { background-image: url("../images/cards/avatar-f-face-03.svg"); }
.card .avatar[data-variant="f-04"] { background-image: url("../images/cards/avatar-f-face-04.svg"); }
.card .avatar[data-variant="f-05"] { background-image: url("../images/cards/avatar-f-face-05.svg"); }
.card .avatar[data-variant="f-06"] { background-image: url("../images/cards/avatar-f-face-06.svg"); }
.card .avatar[data-variant="f-07"] { background-image: url("../images/cards/avatar-f-face-07.svg"); }
.card .avatar[data-variant="f-08"] { background-image: url("../images/cards/avatar-f-face-08.svg"); }
.card .avatar[data-variant="f-09"] { background-image: url("../images/cards/avatar-f-face-09.svg"); }

.card .avatar[data-variant="m-01"] { background-image: url("../images/cards/avatar-m-face-01.svg"); }
.card .avatar[data-variant="m-02"] { background-image: url("../images/cards/avatar-m-face-02.svg"); }
.card .avatar[data-variant="m-03"] { background-image: url("../images/cards/avatar-m-face-03.svg"); }
.card .avatar[data-variant="m-04"] { background-image: url("../images/cards/avatar-m-face-04.svg"); }
.card .avatar[data-variant="m-05"] { background-image: url("../images/cards/avatar-m-face-05.svg"); }
.card .avatar[data-variant="m-06"] { background-image: url("../images/cards/avatar-m-face-06.svg"); }
.card .avatar[data-variant="m-07"] { background-image: url("../images/cards/avatar-m-face-07.svg"); }
.card .avatar[data-variant="m-08"] { background-image: url("../images/cards/avatar-m-face-08.svg"); }
.card .avatar[data-variant="m-09"] { background-image: url("../images/cards/avatar-m-face-09.svg"); }

.card .avatar .eyes,
.card .avatar .brows,
.card .avatar .mouth{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-size: cover;
    background-position: center;
}

.card .avatar .eyes[data-variant="f-01"] { background-image: url("../images/cards/avatar-f-eyes-01.svg"); }
.card .avatar .eyes[data-variant="f-02"] { background-image: url("../images/cards/avatar-f-eyes-02.svg"); }
.card .avatar .eyes[data-variant="f-03"] { background-image: url("../images/cards/avatar-f-eyes-03.svg"); }
.card .avatar .eyes[data-variant="f-04"] { background-image: url("../images/cards/avatar-f-eyes-04.svg"); }
.card .avatar .eyes[data-variant="f-05"] { background-image: url("../images/cards/avatar-f-eyes-05.svg"); }

.card .avatar .eyes[data-variant="m-01"] { background-image: url("../images/cards/avatar-m-eyes-01.svg"); }
.card .avatar .eyes[data-variant="m-02"] { background-image: url("../images/cards/avatar-m-eyes-02.svg"); }
.card .avatar .eyes[data-variant="m-03"] { background-image: url("../images/cards/avatar-m-eyes-03.svg"); }
.card .avatar .eyes[data-variant="m-04"] { background-image: url("../images/cards/avatar-m-eyes-04.svg"); }
.card .avatar .eyes[data-variant="m-05"] { background-image: url("../images/cards/avatar-m-eyes-05.svg"); }

.card .avatar .brows[data-variant="f-01"] { background-image: url("../images/cards/avatar-f-brows-01.svg"); }
.card .avatar .brows[data-variant="f-02"] { background-image: url("../images/cards/avatar-f-brows-02.svg"); }
.card .avatar .brows[data-variant="f-03"] { background-image: url("../images/cards/avatar-f-brows-03.svg"); }
.card .avatar .brows[data-variant="f-04"] { background-image: url("../images/cards/avatar-f-brows-04.svg"); }
.card .avatar .brows[data-variant="f-05"] { background-image: url("../images/cards/avatar-f-brows-05.svg"); }

.card .avatar .brows[data-variant="m-01"] { background-image: url("../images/cards/avatar-m-brows-01.svg"); }
.card .avatar .brows[data-variant="m-02"] { background-image: url("../images/cards/avatar-m-brows-02.svg"); }
.card .avatar .brows[data-variant="m-03"] { background-image: url("../images/cards/avatar-m-brows-03.svg"); }
.card .avatar .brows[data-variant="m-04"] { background-image: url("../images/cards/avatar-m-brows-04.svg"); }
.card .avatar .brows[data-variant="m-05"] { background-image: url("../images/cards/avatar-m-brows-05.svg"); }

.card .avatar .mouth[data-variant="f-01"] { background-image: url("../images/cards/avatar-f-mouth-01.svg"); }
.card .avatar .mouth[data-variant="f-02"] { background-image: url("../images/cards/avatar-f-mouth-02.svg"); }
.card .avatar .mouth[data-variant="f-03"] { background-image: url("../images/cards/avatar-f-mouth-03.svg"); }
.card .avatar .mouth[data-variant="f-04"] { background-image: url("../images/cards/avatar-f-mouth-04.svg"); }
.card .avatar .mouth[data-variant="f-05"] { background-image: url("../images/cards/avatar-f-mouth-05.svg"); }
.card .avatar .mouth[data-variant="f-06"] { background-image: url("../images/cards/avatar-f-mouth-06.svg"); }

.card .avatar .mouth[data-variant="m-01"] { background-image: url("../images/cards/avatar-m-mouth-01.svg"); }
.card .avatar .mouth[data-variant="m-02"] { background-image: url("../images/cards/avatar-m-mouth-02.svg"); }
.card .avatar .mouth[data-variant="m-03"] { background-image: url("../images/cards/avatar-m-mouth-03.svg"); }
.card .avatar .mouth[data-variant="m-04"] { background-image: url("../images/cards/avatar-m-mouth-04.svg"); }
.card .avatar .mouth[data-variant="m-05"] { background-image: url("../images/cards/avatar-m-mouth-05.svg"); }
.card .avatar .mouth[data-variant="m-06"] { background-image: url("../images/cards/avatar-m-mouth-06.svg"); }

.card .border {
    position: absolute;
    background-image: url("../images/cards/name-card02.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    /* opacity: 0.5; */
    width: 100%;
    height: 100%;
    container-type: size;
    cursor: pointer;
}

.card .border .name {
    position: absolute;
    width: 80%;
    height: 21%;
    left: 10%;
    top: 5%;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    color: #23232b;
    text-shadow: 0px 2px 0px white;
}

.curved-name {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
}

.card .border .flavor {
    position: absolute;
    width: 70%;
    height: 27%;
    left: 15%;
    top: 65%;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: normal;
    text-align: center;
    overflow: hidden;

    font-size: clamp(1px, 0.2cqw, 180px);
    font-size: calc(1.8cqw * 2);
    /* hyphens: auto;
    overflow-wrap: anywhere; */
}

.card .gender {
    position: absolute;
    width: 20%;
    height: 10%;
    width: 12%;
    height: 8%;
    left: 8.25%;
    top: 51.5%;
    /* width: 50px;
    height: 50px; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-size: cover;
    background-position: center;
    background-size: auto 100%;
    background-image: url("../images/gender-symbols.svg");
}

.card .gender[data-variant="f"] { background-position: 0% 0%; }
.card .gender[data-variant="u"] { background-position: 50% 0%; }
.card .gender[data-variant="m"] { background-position: 100% 0%; }


.card .noFavs {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed white;
    border-radius: 10px;
    color: white;
    /* font-size: 1.5rem; */
    text-align: center;
    font-size: calc(10cqw) ;
    padding: 5%;
}

.card .actions {
    position: absolute;
    bottom: -25px;
    width: 90%;
    left: 5%;
    height: 25px;
    display: flex;
    justify-content: space-between; /* <-- key change */
    align-items: center;
    color: white;
    text-shadow: 1px 1px black;
    font-size: 0.8em;
    letter-spacing: normal;
    /* background-color: #9e9eff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; */
}

/* .remove and .view only take up the space needed for their text */
.card .actions .remove,
.card .actions .view {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 20px 20px;
    /* border: 1px solid red; */
    width: auto; /* <-- key change */
    box-sizing: border-box;
    display: block;
    min-width: 24px;      /* ensures width for icon */
    min-height: 20px;     /* ensures height for icon */
    /* display: inline-block; ensures element is rendered */
    padding-right: 24px; /* space for icon */
    min-width: 24px;
    padding-left: 0;
    margin: 0;
    color:white;
}

/* .view icon on left, .remove icon on right */
.card .actions .view {
    background-image: url("../images/icon-book.svg");
    background-position: left center;
    padding-left: 24px; /* space for icon */
    padding-right: 0;
    text-align: left;
}

.card .actions .remove {
    background-image: url("../images/icon-trash.svg");
    background-position: right center;
    background-size: 20px 16px;
    padding-right: 24px; /* space for icon */
    padding-left: 0;
    text-align: right;
}

@media (hover: hover) {
    .card .actions {
        opacity: 0;
        transition: opacity 0.3s;
    }

    .card:hover .actions {
        opacity: 1;
    }
}

/* *************************************************************************************************** */

.footer .share {
    background-color: #8a9ef5;
}

.footer {
    background-color: #7486d3;
}