@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=IM+Fell+English+SC&display=swap');

h1,
h2,
h3 {
    font-family: IM Fell English SC, sans-serif;
}

p {
    font-family: Cairo, sans-serif;
}

/* base.html page */

.site-flex {
    display: flex;
    min-height: 100vh;
}

.w-icon {
    font-size: 25px;
}

.nav-menu {
    font-size: 18px;
    font-family: IM Fell English SC, sans-serif;
}

.nav-menu a:hover {
    border-bottom: 1px solid white;
}

.copyright {
    font-family: IM Fell English SC, sans-serif;
}

.social-links {
    font-size: 160%;
    clear: both;
    word-spacing: 20px;
    color: white;
    text-decoration: none;
}


/* index.html page */

.hero-book {
    background-size: cover;
    background-position: center center;
    max-width: 100%;
    height: 630px;
    flex-grow: 5;
}

/* index.html page --> Unauthenticated page */

.welcome-card {
    top: 10%;
    max-width: 100%;
    background-color: rgba(233, 18, 18, 0);
    border-color: rgba(0, 0, 0, 0.0);
    color: white;
}

.btn-welcome {
    font-family: IM Fell English SC, sans-serif;
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.0);
    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);
    font-size: 20px;
}

.btn-welcome:hover {
    transform: scale(1.3);
    background-color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.0);
}

/*index.html page --> Authenticated page */

.card-align {
    text-align: center;
}

.big-story-card {
    background-color: rgba(0, 0, 0, 0.5);
    width: 20rem;
}

.story-card {
    top: 10%;
    background-color: rgba(0, 0, 0, 0.0);
    border-color: rgba(0, 0, 0, 0.0);
    color: white;
    width: 20rem;
}

.card-img-top {
    width: 200px;
    height: 200px;
}

.card-img-placeholder {
    width: 90%;
}

.text-blurb{
    font-size: 14px;
}

/*index.html page --> Delete Defence */

.hidden-defence {
    text-align: center;
}

#hide {
    display: none;
}

#show-delete {
    display: block;
}

/*index.html page --> Paginator */

.paginator {
    margin-top: 1rem;
}

/* about.html */

.about {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    width: 70%;
    height: 40rem;
    font-size: 20px;
}

/* Allauth templates */

.form {
    background-color: rgba(0, 0, 0, 0.5);
    height: 300px;
    margin-top: 2%;
}

.logged-img {
    background-size: cover;
    background-position: center center;
    max-width: 100%;
    height: 600px;
    flex-grow: 5;
}

.form-lg-in {
    width: 55rem;
}

.form-lg-out {
    width: 35rem;
}

.form-reg {
    width: 55rem;
    height: 35rem;
}

.form-verify {
    width: 25rem;
}

/* create_story.html / edit_story.html */

.hero-create {
    background-size: cover;
    flex-grow: 5;
}

.successful-div {
    height: 40rem;
}

.create-div {
    width: 100%;
    margin-top: 2%;
    text-align: center;
}

/* view_story.html */

.read-div {
    text-align: center;
    flex-grow: 5;
}

/* forms.py content */

.title {
    width: 30%;

}

.blurb {
    width: 50%;

}

.content {
    width: 90%;
}

/* Media Queries */

@media screen and (max-width: 790px) {
    .about {
        font-size: 15px;
    }
}

@media screen and (max-width: 750px) {
    .title {
        width: 40%;
    }

    .blurb {
        width: 70%;
    }

    .content {
        width: 90%;
    }
}

@media screen and (max-width: 690px) {
    .hero-book {
        height: auto;
        width: 100%;
    }

    .form-verify {
        width: 20rem;
    }
}

@media screen and (max-width: 600px) {
    .logged-img {
        height: auto;
        width: 100%;
    }

    .reg-img {
        height: 480px;
    }

    .form-reg {
        width: 25rem;
        height: 35rem;
        font-size: small;
    }
}

@media screen and (max-width: 576px) {
    .form-lg-in {
        width: 18rem;
        height: 23rem;
        font-size: small;
    }

    .form-lg-out {
        width: 18rem;
    }
}

@media screen and (max-width: 500px) {
    .title {
        width: 50%;
    }

    .blurb {
        width: 80%;
    }

    .content {
        width: 95%;
    }
}

@media screen and (max-width: 450px) {
    .about {
        font-size: 14px;
        width: 90%;
    }
}

@media screen and (max-width: 420px) {
    .form-reg {
        width: 18rem;
        height: 35rem;
    }

    .reg-img {
        height: auto;
    }
}

@media screen and (max-width: 400px) {
    .title {
        width: 70%;
    }

    .blurb {
        width: 90%;
    }

    .content {
        width: 100%;
    }

    .page-text {
        font-size: x-small;
    }
}