html {
  font-size: 14px;
}

.text-qlassy {
    font-family: 'Qlassy', sans-serif;
    color: rgb(201, 52, 18)
}

.text-handwritten {
    font-family: 'Present Anthem', sans-serif;
}

.error-background {
    height: 30rem;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url(/img/oops.webp);
}

.title-background {
    height: 90vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: radial-gradient(circle, rgba(0,0,0,0.5) 13%, rgba(0,0,0,0.80) 55%), url(/img/Mark-John-light.webp);
}

.stories-background {
    height: 5rem;
    width: 20rem;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url(/img/stories.webp);
}

.storypage-background {
    height: 55rem;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url(/img/stories.webp);
}

.mystory-background {
    height: 55rem;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.85)), url(/img/butterflies.webp);
}

.theirstories-background {
    height: 55rem;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.85)), url(/img/campfire1.webp);
}

.action-background {
    height: 5rem;
    width: 20rem;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url(/img/action.webp);
}

.actionpage-background {
    height: 40rem;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url(/img/action.webp);
}

.fp-card-img {
    height: 8rem;
    object-fit: contain;
    object-position: top;
}

.movie {
    width: 100%;
    border: solid;
}

.signin-img {
    width: 40%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9)), url(/img/Mark-John-light.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.btn-discord {
    color: white;
    background-color: #7289da;
}

.btn-google {
    color: white;
    background-color: #ea4335;
}

.btn-facebook {
    color: white;
    background-color: #3b5998;
}

.story-textarea {
    height: 30rem!important;
}

.grecaptcha-badge {
    visibility: hidden;
}

body {
    margin-top: 50px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }

    .title-background {
        height: 95vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: radial-gradient(circle, rgba(0,0,0,0.5) 13%, rgba(0,0,0,0.80) 55%), url(/img/Mark-John-light.webp);
    }

    .stories-background {
        height: 10rem;
        width: 20rem;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url(/img/stories.webp);
    }

    .storypage-background {
        height: 30rem;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url(/img/stories.webp);
    }

    .mystory-background {
        height: 30rem;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.85)), url(/img/butterflies.webp);
    }

    .theirstories-background {
        height: 30rem;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.75)), url(/img/campfire2.webp);
    }

    .action-background {
        height: 10rem;
        width: 20rem;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url(/img/action.webp);
    }

    .actionpage-background {
        height: 30rem;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url(/img/action.webp);
    }

    .story-textarea {
        height: 25rem !important;
    }

    .movie {
        width: 100%;
        border: solid;
    }

    body {
        margin-top: 58px;        
    }
}

/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/

html {
    position: relative;
    min-height: 100%;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}