:root{
    --white-brown: rgb(255, 243, 225) ;
    --light-brown: rgba(238, 196, 142, 0.863);
    --dark-brown: rgba(46, 20, 6, 0.904);
    --glass-brown: rgba(235, 203, 162, 0.466);
}
*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body{
    position: relative;
}

.dark-brown-text{
    color: var(--dark-brown);
}

.main-container{
    min-height: 100vh;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    background-color: var(--light-brown);
    padding:0.6rem;
    
}

.birthday-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
}

.happy-birthday{
    max-width: 500px;
    width: 90vw;
    margin-bottom: 2rem;

    color: var(--white-brown);
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
}
i.happy-birthday{
    color: var(--dark-brown);
}
.necho-tag{
    position: fixed;
    top: 2vh;
    right: 10px;
    color: rgb(255, 243, 225);
    background-color: var(--glass-brown);
    padding: 0.5rem 0.9rem;
    border-radius: 3rem;
    box-shadow: 0px 0px 7px 0px var(--white-brown);
    z-index: 10;
}

@keyframes blobMotion {
    0%{
        transform: translate(0px, 0px);
        /* transform: translateX(0px); */
    }
    25% {
        transform: translate(-10vw, 40vh);
    }
    50%{
        transform: translate(90vw, 90vh);
        /* transform: translateX(50vw); */
    }
    75%{
        transform: translate(-10vw, 40vh);
    }
    100%{
        transform: translate(0px, 0px);
    }
    
}

.blob{
    position: fixed;
    /* top: 10px;
    left: 10px; */
    width: 200px;
    height: 200px;
    border-radius: 1000px;
    background-color: brown;
    animation: blobMotion 3s ease-in-out infinite;
}
.blob.one {
    top: -10px;
    left: 30px;
    width: 100px;
    height: 100px;
    background-color: rgba(218, 98, 98, 0.582);
    animation: blobMotion 14s ease-in-out infinite alternate;
}

.blob.two {
    top: -50px;
    right: 50vw;
    width: 50px;
    height: 50px;
    background-color: brown;
    animation: blobMotion 9s linear infinite alternate-reverse;
}

.blob.three {
    top: -10px;
    left: 30px;
    width: 300px;
    height: 300px;
    background-color: rgba(165, 42, 42, 0.623);
    animation: blobMotion 7s ease-in-out infinite alternate;
}


@keyframes danceAround {
    0%{
        transform: translate(0px, 0px);
    }
    25%{
        transform: translate(-5px, 5px);
    }
    50%{
        transform: translate(10px, 10px);
    }
    75% {
        transform: translate(5px, -5px);
    }

    100%{
        transform: translate(0px, 0px);
    }
    
}

.birthday-girl-image-container{
    display: flex;
    margin-bottom: 2rem;
    max-width: 400px;
    max-height: 400px;
    width: 90vw;
    height: 90vw;
    border-radius: 100%;
    padding: 1rem;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-brown);
    object-fit: cover;
    border-top: 0.5rem solid var(--light-brown);
    animation: danceAround 15s ease-in-out infinite alternate;
}
.birthday-girl-image{
    max-width: 700px;
    width: 90%;
    border-radius: 100%;
    border: 0.3rem solid var(--light-brown);
    background-size: cover;
    animation: danceAround 7s ease-in-out infinite alternate-reverse;
}

.remarks-container{
    max-width: 700px;
    width: 90vw;
    backdrop-filter: blur(1px);
    border-radius: 2rem;
    background-color: rgba(165, 97, 42, 0.445);
    /* outline: 0.3rem solid var(--white-brown);
    outline-offset: 2rem; */
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0px 0px 7px 0px var(--white-brown);
}

.remarks-paragraph{
    text-align: center;
    color: var(--white-brown);
    font-size: 1.2rem;
    text-transform: uppercase;
}

footer{
    text-align: center;
    min-height: 30vh;
    background-color: var(--dark-brown);
    color: var(--white-brown);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}