:root {
    --green: #3DBDA5;
    --blue: #1D3557;
    --red: #BF3411;
    --white: #FAFAFA;
    --black: #28210E;
    --font: "Poppins", serif;
    --font--regular: 400;
    --font--semibold: 600;
}

@keyframes drop {
    from {
        transform: translateY(-150vh) scaleY(.8)
    }

    20% {
        transform: translateY(-150vh) scaleY(.8)
    }

    30% {
        transform: translateY(20%) scaleY(1.1)
    }

    35% {
        transform: translateY(-10%) scaleY(1)
    }

    40% {
        transform: translateY(0%)
    }

    to {
        transform: initial
    }
}

@keyframes flicker {
    from {
        filter: saturate(1) contrast(105%) opacity(.9)
    }

    4% {
        filter: saturate(1.25) contrast(115%) opacity(.9)
    }

    6% {
        filter: saturate(2.25) contrast(125%) opacity(.9)
    }

    8% {
        filter: saturate(2.05) contrast(120%) opacity(.9)
    }

    10% {
        filter: saturate(1.9) contrast(115%) opacity(.9)
    }

    11% {
        filter: saturate(1.922) contrast(116%) opacity(.9)
    }

    12% {
        filter: saturate(1.9) contrast(115%) opacity(.9)
    }

    14% {
        filter: saturate(1.95) contrast(120%) opacity(.9)
    }

    16% {
        filter: saturate(1.98) contrast(125%) opacity(.9)
    }

    17% {
        filter: saturate(1.9) contrast(125%) opacity(.9)
    }

    19% {
        filter: saturate(1.93) contrast(125%) opacity(.9)
    }

    20% {
        filter: saturate(1.99) contrast(125%) opacity(.9)
    }

    24% {
        filter: saturate(2) contrast(125%) opacity(.9)
    }

    26% {
        filter: saturate(1.94) contrast(125%) opacity(.9)
    }

    28% {
        filter: saturate(1.98) contrast(125%) opacity(.9)
    }

    37% {
        filter: saturate(1.93) contrast(125%) opacity(.9)
    }

    38% {
        filter: saturate(1.5) contrast(125%) opacity(.9)
    }

    39% {
        filter: saturate(1.96) contrast(125%) opacity(.9)
    }

    42% {
        filter: saturate(2) contrast(125%) opacity(.9)
    }

    44% {
        filter: saturate(1.97) contrast(125%) opacity(.9)
    }

    46% {
        filter: saturate(1.94) contrast(125%) opacity(.9)
    }

    56% {
        filter: saturate(1.9) contrast(125%) opacity(.9)
    }

    58% {
        filter: saturate(1.9) contrast(125%) opacity(.9)
    }

    60% {
        filter: saturate(1.99) contrast(125%) opacity(.9)
    }

    68% {
        filter: saturate(2) contrast(125%) opacity(.9)
    }

    70% {
        filter: saturate(1.9) contrast(125%) opacity(.9)
    }

    72% {
        filter: saturate(1.95) contrast(125%) opacity(.9)
    }

    93% {
        filter: saturate(1.93) contrast(125%) opacity(.9)
    }

    95% {
        filter: saturate(1.95) contrast(125%) opacity(.9)
    }

    97% {
        filter: saturate(1.93) contrast(125%) opacity(.9)
    }

    to {
        filter: saturate(2) contrast(125%) opacity(.9)
    }
}

@keyframes wobble {
    16.65% {
        transform: translateX(6px)
    }

    33.3% {
        transform: translateX(-5px)
    }

    49.95% {
        transform: translateX(4px)
    }

    66.6% {
        transform: translateX(-2px)
    }

    83.25% {
        transform: translateX(1px)
    }

    100% {
        transform: translateX(0)
    }
}

html {
    height: 100%;
    min-height: 100%;
    font-size: calc(14px + 2 * ((100vw - 960px)/ 680));
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body::before {
    position: fixed;
    height: calc(100vh + 80px);
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background: url("bg1.jpg") no-repeat fixed center center;
    background-size: cover;
    transform: translate3d(0, 0, 0);
    z-index: -110;
}

body::after {
    position: fixed;
    height: calc(100vh + 80px);
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    z-index: -100;
    border-left: clamp(.5em, 1vw, .75em) solid var(--green);
}

::selection {
    color: var(--white);
    background: var(--blue);
}

.wrapper {
    width: 100%;
    min-height: 100%;
}

.content {
    min-height: 100%;
    box-sizing: border-box;
    font-family: var(--font);
    font-style: normal;
    padding: 8vh 6vw;
}

.logo {
    height: auto;
    width: 85vh;
    max-width: 100%;
}

h2 {
    font-weight: var(--font--regular);
    font-size: 2.75em;
    line-height: 1.4;
    color: var(--blue);
    margin-bottom: 1em;
    margin-right: 25%;
    width: 50vw;
    max-width: 75vh;
}

nav {
    display: grid;
    gap: 1em;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 3.5em;
}

.button {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    border-radius: 9999px;
    border: 3px solid var(--green);
    box-shadow: 0px 16px 32px -16px rgba(0, 0, 0, .5), 0px 2px 2px 0px rgba(0, 0, 0, .05);
    padding: .75em 2.5em;
    font-weight: var(--font--semibold);
    font-size: 1em;
    color: var(--blue);
    text-decoration: none;
    transform: perspective(1px) translateZ(0);
    transition-duration: 0.3s;
    width: 100%;
}

.button:hover {
    box-shadow: 0px 16px 32px -16px var(--blue), 0px 2px 2px 0px rgba(0, 0, 0, .05);
}

.button:focus,
.button:active {
    outline: 0;
    border: 3px solid var(--blue);
}

.button:hover .icon--animated,
.button:focus .icon--animated,
.button:active .icon--animated {
    animation-name: wobble;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

.button--mail {
    background: var(--green);
}

.button--phone {
    background: var(--white);
}

.icon {
    width: 1.5em;
    height: 1.5em;
}

.icon--type {
    margin-right: 2em;
}

.icon--arrow {
    /* margin-left: 7.5em; */
    right: 0;
}

.icon--animated {
    transform: translateZ(0);
}

footer {
    max-width: max-content;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1em;
    color: var(--blue);
}

.footer__image {
    border: 1.5px solid var(--blue);
    border-radius: 9999px;
}

.footer__text {}

h3 {
    margin: 0 0 .25em;
}

p {
    margin: 0 0 .25em;
}

#lights {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-left: 50%;
    z-index: -50;
}

.bulb {
    width: clamp(40px, 20vw, 400px);
    height: clamp(80px, 40vw, 800px);
    /* transform: translate(-50%, -50%); */
}

.falling-element {
    animation-timing-function: ease-in;
    animation: drop 5s forwards;
}

.bulb--1 {
    margin-top: -50vh;
    margin-left: 50%;
    scale: 1.5;
    z-index: -10;
}

.leaves {
    position: absolute;
    width: 100%;
    margin-bottom: 0;
}

.leaves:before {
    position: absolute;
    box-sizing: border-box;
    bottom: 10%;
    right: calc(50% + 1.5vw);
    content: "";
    width: 8vw;
    height: 8vw;
    max-width: 180px;
    max-height: 180px;
    border-radius: 2px 5em 2px 5em;
    background: var(--green);
    opacity: .75;
}

.leaves:after {
    position: absolute;
    box-sizing: border-box;
    bottom: 10%;
    left: calc(50% + 1.5vw);
    content: "";
    width: 4vw;
    height: 4vw;
    max-width: 90px;
    max-height: 90px;
    border-radius: 4.5em 2px 4.5em 2px;
    border: .35em solid var(--red);
}

.bulb--2 {
    margin-top: -72vh;
    margin-left: 60%;
    scale: 1.1;
    filter: blur(2.5px);
    z-index: -20;
}

.bulb--3 {
    margin-top: -35vh;
    margin-left: 85%;
    scale: .65;
    filter: blur(5px);
    z-index: -30;
}

.bulb__wire {
    background: url("bulb__wire.png") 50% 50% repeat-y;
    background-size: contain;
    width: 100%;
    height: 75vh;
}

.bulb__top {
    background: url("bulb__top.png") 50% 50% no-repeat;
    background-size: contain;
    width: 100%;
    height: 25%;
}

.bulb__glass {
    background: url("bulb__glass.png") 50% 50% no-repeat;
    background-size: contain;
    width: 100%;
    height: 50%;
    filter: opacity(0.9);
}

.glass--lit {
    filter: contrast(125%) saturate(2) opacity(.9);
}

.glass--flicker {
    animation: flicker 3s forwards;
}