* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', serif;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/*main*/

body {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
        url("/front-assets/img/bg.jpg");
    background-repeat: repeat-y;
    background-size: cover;
}

nav.text-bg-light, footer.text-bg-light {
    background-color: transparent !important;
}

footer .btn-light {
    background-color: transparent;
}

#gallery-form {
    position: relative;
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/*#fullscreenBtn {*/
/*    position: absolute;*/
/*    top: 5px;*/
/*    right: 5px;*/
/*    z-index: 10;*/
/*    width: 4vw;*/
/*    height: 4vw;*/
/*    margin: 1px;*/
/*    border: none;*/
/*    background: transparent;*/
/*    font-size: 3vw;*/
/*    cursor: pointer;*/
/*}*/

#controls, #hand {
    position: absolute;
    bottom: 20px;
    right: -10px;
    transform: translateX(-50%);
    z-index: 999;
}

#controls button {
    width: 4vw;
    height: 4vw;
    margin: 1px;
    border: none;
    background: transparent;
    font-size: 3vw;
    cursor: pointer;
}

#hand img {
    width: 50px;
    height: 50px;
}

.hero {
    background: #fcd206;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.hero h1 {
    font-size: 4rem;
}

.hero span {
    background: url('https://i.pinimg.com/736x/bc/0d/97/bc0d97381439c6248388014a6140c280.jpg') no-repeat center;
    background-size: cover;
    -webkit-background-clip: text;
    color: transparent;
}

.category img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.category-title {
    font-weight: bold;
    font-size: 1.25rem;
    margin-top: 0.5rem;
}

.gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.words {
    height: 500px;
    width: 95vw;
    overflow: hidden;
}

.letter {
    position: absolute;
    white-space: pre;
}

@media (min-width: 426px) {
    .hero {
        height: calc(90vh - 50px);
    }
    .words {
        width: calc(95vw - 50px);
    }
}

@media (min-width: 550px) {
    .words {
        width: 70vw;
    }
}

@media (min-width: 768px) {
    .hero {
        height: 100vh;
        background: linear-gradient(90deg, #fcd206 50%, #ffffff 50%);
    }

    .words {
        height: 90vh;
        width: 57vw;
    }
}

@media (min-width: 1024px) {
    .words {
        width: 49vw;
    }
}

@media (min-width: 1440px) {
    .words {
        width: 33vw;
    }
}