@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #0A0903;
}
 
body {
    font-family: "Work Sans", serif;
    background-color: #C4A381;
    margin: 0 0;
    overflow-x: hidden;
    padding: 0;
    width: 100vw;
}

.container {
    width: 100vw;
    display: block;
    position: relative;
}
.header {
    position: fixed;
    width: 100vw;
    height: 8vh;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.donate {
    height: 90%;
    display: block;
    width: 10%;
    text-align: center;
    background-color: rgba(51, 101, 138, 0.1);
    backdrop-filter: blur(5px);
    align-content: center;
    border-radius: 1vw;
    cursor: pointer;
    margin-right: 1vw;
    font-size: 1.5vw;
    font-weight: 500;
}

.lang {
    width: 5vw;
    display: block;
    height: 5vw;
    text-align: center;
    align-content: center;
    img {
        width: 50%;
        height: 50%;
        object-fit: cover;
        transition: 0.2s ease-in-out;
    }
    img:hover {
        width: 60%;
        height: 60%;
    }
}

.hero, .goals  {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-text {
    width: 50%;
    height: auto;
    display: inline-block;
    text-align: center;
    align-content: center;
    h1 {
        font-size: 4.3vw;
        font-weight: 700;
    }
    p {
        font-size: 1.5vw;
        font-weight: 400;
        text-align: left;
        width: 40vw;
        margin: 0 auto;
    } 
}

.hero-images {
    width: 50%;
    height: 70vh;
    position: relative;
    display: grid;
    grid-template-areas: 
        "img1"
        "img2"
        "img3";
    justify-items: center;
    align-items: center;
    .img1 {
        width: 45%;
        aspect-ratio: 50/60;
        top: 0%;
        left: 10%;
        grid-area: img1;
        z-index: 10;
    }
    .img2 {
        width: 41%;
        aspect-ratio: 28/20;
        top: 90%;
        left: 15%;
        grid-area: img2;
        z-index: 12;
    }
    .img3 {
        width: 35%;
        aspect-ratio: 30/40;
        grid-area: img3;
        top: -140%;
        left: 50%;
        z-index: 11;
    }
    .img1, .img2, .img3 {
        position: absolute;
        overflow: hidden;
        border-radius: 1vw;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.hero-bits{
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    .hero-bits-container{
        width: 100%;
        height: 100%;
        position: relative;
        display: grid;
        grid-template-areas: 
            "star"
            "pill"
            "square";
        justify-items: center;
        align-items: center;
        .star , .pill , .square {
            position: absolute;
        }
        .star {
            width: 8vw;
            height: 8vw;
            grid-area: star;
            top: 225%;
            left: 65%;
            transition: transform 0.1s linear;
            z-index: 20;
            img {
                width: 80%;
                height: 80%;
                object-fit: cover;
            }
        }
        .pill {
            width: 5vw;
            height: 5vw;
            top: 135%;
            left: 10%;
            grid-area: pill;
            z-index: 20;
            overflow: hidden;
            text-align: center;
            align-content: center;
            .pill-child {
                width: 1vw;
                height: 3vw;
                transform: rotate(-45deg);
                background-color: #33658A;
                margin: 0 auto;
                border-radius: 1vw;
            }
        }
        .square {
            width: 8vw;
            height: 8vw;
            border-radius: 1vw;
            top: -155%;
            left: 60%;
            grid-area: square;
            z-index: 20;
            .square-child {
                width: 5vw;
                height: 5vw;
                background-color: #33658A;
                margin: 0 auto;
                border-radius: 1vw;
                transform: rotate(45deg);
            }
        }
    }
}

#goals-text {
    width: 40%;
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: left;
    h1 {
        font-size: 4.3vw;
        font-weight: 700;
    }
    p {
        font-size: 1vw;
        font-weight: 400;
        text-align: justify;
    }  
}

#goals-image {
    width: 50%; 
    display: inline-block;
    align-content: center;
    height: 80vh;
    .img {
        width: 80vh;
        height: 70vh;
        border-radius: 1vw;
        overflow: hidden;
        margin: 0 auto;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.end-screen {
    width: 100vw;
    position: relative;
    height: 100vh;
    text-align: center;
    align-content: center;

    .donate-link{
        width: 50%;
        text-align: center;
        align-content: center;
        margin: 0 auto;
        cursor: pointer;
    }

    h1 {
        font-size: 11vw;
        font-weight: 700;
        z-index: 15;
        transition: 0.2s; 
        position: relative;
        color: beige;
    }

    .donate-link:hover h1{
        font-weight: 900;
    }

    .contact {
        position: absolute;
        font-size: 1.5vw;
        right: 0;
        bottom: 0;
        margin: 1vw 1vw;
        text-align: right;
        a {
            transition: 0.5s;
        }
    }

    .contact a:hover {
        padding-right: 10px;
    }
}

.end-images {
    width: 50%;
    height: 70vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-areas: 
        "img1"
        "img2"
        "img3";
    justify-items: center;
    align-items: center;
    z-index: 10;
    .img1 {
        width: 50%;
        aspect-ratio: 50/60;
        grid-area: img1;
        top: -35%;
        left: 30%;
        z-index: 10;
    }

    .img2 {
        width: 46%;
        aspect-ratio: 28/20;
        top: 0%;
        left: 10%;
        grid-area: img2;
        z-index: 10;
    }
    .img3 {
        width: 40%;
        aspect-ratio: 30/40;
        top: -80%;
        left: 50%;
        grid-area: img3;
        z-index: 10;
    }
    .img1, .img2, .img3 {
        position: absolute;
        overflow: hidden;
        border-radius: 1vw;
        transition: 0.2s;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.donate-link:hover .end-images > .img1 {
    left: 33%;
    top:-40%
}

.donate-link:hover .end-images > .img2 {
    left: 5%;
    top:5%
}

.donate-link:hover .end-images > .img3 {
    top:-75%;
    left: 55%;
}

.hidden {
    opacity: 0;
    transform: translate(0, 20%);
    filter: blur(5px);
    transition: all 0.75s ease-in-out;
}

.show {
    opacity: 1;
    filter: blur(0px);
    transform: translate(0, 0);
    transition: all 0.75s ease-in-out;
}

#goals-text-mobile, #goals-image-mobile,  #goals-mobile {
    display: none;
}

.donate-card-holder {
    width: 100vw;
    height: 100vh;
    position: fixed;
    align-content: center;
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    transition: all 0.75s ease-in-out;
    background-color: rgba(63, 100, 135, 0.2);
    pointer-events: all;
}

.donate-card {
    width: 50%;
    height: 80%;
    background-color: saddlebrown;
    z-index: 10001;
    pointer-events: all;
    opacity: 0;
    transition: all 0.75s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.exit-donate {
    width: 5vw;
    height: 5vw;
    position: relative;
    right: 0%;
    margin: 1vw;
    padding: 0;
    background-color: #ac482a;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10002;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        width: 50%;
        height: 50%;
        object-fit: cover;
    }
}

@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutCard {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes fadeInHolder {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
}

@keyframes fadeOutHolder {
    from {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}