@charset "UTF-8"; 

:root{
    --hero-a: rgba(79, 184, 178, 0.36);
    --hero-b: rgba(47, 106, 74, 0.2);
    --sand: #e7f0e8;
    --foam: #f3faf5;
    --bg-base: #e7f3ec;
}

html {
    font-size: 14px;
}

body {
    position: relative;
    width: 100dvw;
    height: 100dvh;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #F5EDD6ee;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s linear;
    background: #F5EDD6ee;
     overflow: hidden;

}

body{
    background-color: #F5EDD6ee;
    background: radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%), radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%), radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%), linear-gradient(180deg, var(--sand) 0%, var(--foam) 44%, var(--bg-base) 100%);
}

body {
    @supports (color: color-mix(in lab, red, red)) {
        background: radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%), radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%), radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%), linear-gradient(180deg, 
color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%);
    }
}

* {
    box-sizing: border-box;
}

.page-wrapper{
    position: relative;
    width: fit-content;
    margin-top: -50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 100;
}


.copyright{
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #777;
    font-weight: 500;
}


.lottie_logo{
     width: 220px;
}

canvas {
    position: absolute;
    display: block;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 10;
}

@media screen and (max-width: 768px){
    #thodor_logo, .lottie_logo{
        width: 180px;
    }
}