/* ##### META ##### */

@font-face {
    font-family: "Cocogoose";
    src: url('assets/Cocogoose.ttf');
}

* {
    margin: 0;
}


/* ##### CLASS ##### */

.bg {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    user-select: none;
}


/* ##### index.html ##### */

.main-bg {
    background-image: url('assets/images/main_bg.jpg');
    align-items: flex-start;
}

.main-bg .candies {
    width: 10.5vw;
    max-width: 60px;
    height: auto;
    position: absolute;
    top: 1.25em;
    left: 1.25em;
    filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.3));
    -webkit-filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.3));
    transition-duration: 0.2s;
}
.main-bg .candies:hover {
    transform: scale(112%);
    transition-duration: 0.2s;
}

.main-bg .candies > img {
    width: 100%;
    height: auto;
}

.main-bg .title {
    display: flex;
    height: calc(31% + 1em);
    align-items: flex-end;
}

.main-bg .title > h1 {
    white-space: nowrap;
    font-size: clamp(15px, 10vw, 70px);
    font-family: Cocogoose;
    background: -webkit-linear-gradient(white, white, rgba(255, 255, 255, 0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.5em;
}


/* ##### candies.html ##### */

.candies-bg {
    background-image: url('assets/images/candies_bg.jpg');
    backdrop-filter: brightness(10%);
}
@keyframes candies-bg-bounce {
    0% {
        background-size: 120%;
    }
    15%, 85% {
        background-size: 100%;
    }
    100% {
        background-size: 120%;
    }
}

.candies-bg .overlay {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px) saturate(110%);
    -webkit-backdrop-filter: blur(5px) saturate(110%);
}

.candies-bg .overlay > div {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.candies-bg .candies {
    width: 100%;
    max-width: 350px;
    height: auto;
    filter: drop-shadow(2px 2px white)
        drop-shadow(-2px -2px white)
        drop-shadow(2px -2px white)
        drop-shadow(-2px 2px white)
        drop-shadow(0 0 20px white);
    -webkit-filter: drop-shadow(2px 2px white)
        drop-shadow(-2px -2px white)
        drop-shadow(2px -2px white)
        drop-shadow(-2px 2px white)
        drop-shadow(0 0 20px white);
    animation: candies-animation 5s ease-in-out infinite;
}
@keyframes candies-animation {
    0% {
        transform: rotate(30deg);
    }
    50% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(30deg);
    }
}

.candies-bg .title {
    white-space: nowrap;
    margin-top: 1.2em;
    font-size: clamp(15px, 8.5vw, 60px);
    font-family: Cocogoose;
    line-height: 1.5em;
    animation: candies-title-animation-color 1s alternate-reverse infinite,
      candies-title-animation-bounce 1s ease-in-out infinite;
}
@keyframes candies-title-animation-bounce {
    0% {
        transform: scale(100%);
    }
    50% {
        transform: scale(120%);
    }
    100% {
        transform: scale(100%);
    }
}
@keyframes candies-title-animation-color {
    0% {
        color: #8F00F2;
        text-shadow: 0 0 10px #8F00F2;
    }
    16% {
        color: #00CFFB;
        text-shadow: 0 0 10px #00CFFB;
    }
    32% {
        color: #5CFF00;
        text-shadow: 0 0 10px #5CFF00;
    }
    48% {
        color: #FDFB00;
        text-shadow: 0 0 10px #FDFB00;
    }
    64% {
        color: #FDAE32;
        text-shadow: 0 0 10px #FDAE32;
    }
    100% {
        color: #FF0C12;
        text-shadow: 0 0 10px #FF0C12;
    }
}