@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;400;600;800&family=Lato:wght@100&family=Roboto:wght@100&display=swap');

main {
  background:  url("/static/images/background-placeholder.78d2f7d52197.jpg") 50% 0 repeat fixed;
}

.flex-container {
    display: flex;
    width: 95%;
    margin: 0.5rem auto 0 auto;
    flex-direction: column;
    box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.3);
}
.bigtext-title {
    background-color: #3a3a3a;
    font-size: 1.5rem;
    font-family: "Barlow Condensed";
    font-weight: bold;
}

.new-post__button {
    display: flex;
    width: 60%;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-family: "Roboto";
    font-weight: bold;
    margin: 0 auto;
    background-color: #252525;
    color: #c6c6c6;
    border-radius: 5px;
    text-shadow: 1px 1px #353434;
    box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.3);
}

.new-post__button:hover,
.new-post__button:active {
    text-decoration: none;
    color: white;
}

.blog-container {
    display: flex;
    width: 95%;
    flex-direction: column;
    margin: 0.5rem auto;
}

.blog-entry {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 0.5rem;
    color: #e5e5e5;
}

.blog-title__container {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    align-items: center;
    margin: 0 auto;
    width: 100%;
    align-items: stretch;
    border: 2px outset grey;
    text-shadow: 1px 1px #353434;
}

.blog-icon {
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    grid-column: span 1;
    background-color: rgb(81, 81, 81);
    border: 2px outset grey;
    grid-column: span 2;
    padding: 0.5rem 0;
}

.blog-title {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 0.2rem auto;
    color: rgb(222, 222, 222);
    font-size: 1.3rem;
    font-weight: bold;
    text-shadow: 1px 1px #353434;
    font-family: "Cormorant", serif;
    margin: 0 auto;
    height: 100%;
    grid-column: span 9;
    align-items: center;
}

.blog-title:active,
.blog-title:hover {
    text-decoration: none;
    color: white;
}

.blog-config__container {
    grid-column: span 1;
    display: flex;
    align-items: stretch;   /* 👈 important */
    height: 100%;
    justify-content: center;
    align-items: center;
}

.edit-button {
    height: 100%;
    margin: 0;              /* remove default margins */
    box-sizing: border-box; /* prevent overflow */
    display: flex !important;          /* 👈 key for vertical centering */
    align-items: center;     /* 👈 now they fill it */
    justify-content: center;
    border: 1px solid grey;
    padding: 0 0.5rem;
    background-color: green;
    color: rgb(207, 207, 207);
    text-shadow: 1px 1px #353434;
}

.edit-button:hover,
.edit-button:active {
    text-decoration: none;
    color: white;
    background-color: rgb(7, 146, 7);
}

.delete-button {
    height: 100%;
    margin: 0;              /* remove default margins */
    box-sizing: border-box; /* prevent overflow */
    display: flex !important;          /* 👈 key for vertical centering */
    align-items: center;
    border: 1px solid grey;
    padding: 0 0.5rem;
    background-color: #800507;
    color: rgb(207, 207, 207);
    text-shadow: 1px 1px #353434;
}

.delete-button:hover,
.delete-button:active {
    background-color: #9c080b;
    color: white;
    text-decoration: none;
}

.big-icon__size {
    display: flex !important;
    font-size: 12rem;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    background-color: rgb(62, 62, 62);
    width: 100%;
    border-radius: 0px;
    text-shadow: 1px 1px #353434;
    grid-column: span 2;
    padding: 1rem 0;
    color: white;
}

.no-news__text {
    display: flex;
    font-size: 1rem;
    margin: 0rem auto;
    text-align: center;
    text-shadow: 1px 1px #353434;
    width: 100%;
    justify-content: center;
    padding: 0.4rem 0;
    grid-column: span 2;
    border: 3px inset rgb(238, 238, 238);
    font-family: "Verdana";
    background-color: black;
    color: white;
}


.E-color {
    background-color: #2d2d2d;
}

.E-color__2 {
    background-color: #4b4b4b;
}

.E-color__2:hover,
.E-color__2:active {
    background-color: #6f6f6f;
}

.E-color__3 {
    background-color: #3b3b3b;
}

.T-color {
    background-color: #213696;
}

.T-color__2 {
    background-color: #2b44b3;
}

.T-color__2:hover,
.T-color__2:active {
    background-color: #3350d1;
}

.T-color__3 {
    background-color: #101f63;
}

.N-color {
    background-color: #904a8a;
}

.N-color__2 {
    background-color: #731a6c;
}

.N-color__2:hover,
.N-color__2:active {
    background-color: #8a2181;
}

.N-color__3 {
    background-color: #582954;
}

.blog-title__divider {
    display: flex;
    width: 100%;
    height: 100%;
}

.image-container {
    width: 95%;
    margin: 0.5rem auto;
    height: 300px;
    text-align: center;
}

.image-container img {
    max-height: 100%;
    width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

.blog-entry__data {
    display: flex;
    width: 100%;
}

.news-info__date,
.news-info__author {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    margin: 0 auto;
    padding: 0.3rem 0;
}

.news-icon {
    padding-right: 0.5rem;
}

.double-column {
    grid-column: span 2;
}

.flex-login {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0 auto;
}

.login-submenu {
    display: flex;
    width: 100%;
}

.divider {
    height: 1px;
    width: 95%;
    margin: 0.5rem auto 0.8rem auto;
    background-color: white;
}


.red-button {
    background-color: #700303;
    color: #ddd4d4;
    text-shadow: 1px 1px #353434;
    border: 3px outset rgb(198, 198, 198);
}

.red-button:active,
.red-button:hover {
    background-color: #8e0404;
    color:white;
}

.buttons-container {
    display: flex;
    width: 95%;
    margin: 0.5rem auto;
    justify-content: center;
    align-items: center;
}

.buttons-container a,
.buttons-container button {
    margin: 1rem auto; 
    width: 40%;
    align-items: center;
    padding:0.4rem;
    border-radius: 10px;
    text-align: center;
    border: 0;
    box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.3);
    background-color: #3a3a3a;
    color: #c9c9c9;
}

.buttons-container a p,
.buttons-container button p {
    margin: 0 auto;
}

.buttons-container a:hover,
.buttons-container a:active,
.buttons-container button:hover,
.buttons-container button:active {
    color: white;
    text-decoration: none
}

.logout-button {
    margin: 1rem auto; 
    width: 40%;
    align-items: center;
    padding:0.4rem;
    border-radius: 10px;
    text-align: center;
    border: 0;
    box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.3);
    background-color: #3a3a3a;
    color: #c9c9c9;
}

.logout-button p {
    margin: 0 auto;
    font-size: 0.8rem;
}

.logout-button:hover,
.logout-button:active {
    color: white;
    text-decoration: none
}

.divider {
    display: flex;
    width: 95%;
    height: 10px;
    background-color: transparent;
}

.pages-buttons__container {
    display: grid;
    width: 95%;
    grid-template-columns: repeat(12,1fr);
    margin: 0 auto 0.5rem auto;
    border: 3px ridge rgb(194, 193, 193);
    color: white
}

.pages-button {
    display: flex;
    font-size: 1.3rem;
    padding: 0.3rem 0;
    justify-content: center;
    align-items: center;
}

.pages-divider {
    display: flex;
    width: 100%;
    grid-column: span 10;
    justify-content: center;
    align-items: center;
}

@media (min-width: 50rem) {
    .form-container {
        width: 60%;
    }

    .bigtext-title {
        background-color: #3a3a3a;
        font-size: 1.8rem;
    }

    .new-post__button {
        width: 40%;
        font-size: 1.4rem;
        text-shadow: 2px 2px #353434;
        box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.3);
    }
    .flex-container {
        width: 60%;
    }

    .blog-container {
        width: 60%;
    }
    .edit-button {
        font-size: 1.4rem;
    }

    .delete-button {
        font-size: 1.4rem;
    }

    .big-icon__size {
        font-size: 15rem;
    }

    .no-news__text {
        font-size: 1.2rem;
    }

    .logged-in__button {
        text-shadow: 2px 2px #353434;
    }

    .logged-in__button span {
        font-size: 6rem;
        padding: 1rem 0;
    }

    .logged-in__button p {
        font-size: 1.2rem;
        padding-bottom: 0.4rem;
    }
    .blog-icon {
        font-size: 1.6rem;
        grid-column: span 1;
    }

    .blog-title {
        grid-column: span 10;
        font-size: 1.5rem;
    }

    .image-container {
        height: 500px;
    }
    
    .news-info__date,
    .news-info__author {
        font-size: 1.2rem;
    }

    .buttons-container a,
    .buttons-container button {
        width: 30%;
    }
    .buttons-container a p,
    .buttons-container button p {
        font-size: 1.4rem;
    }
    .buttons-container a span,
    .buttons-container button span {
        font-size: 1.6rem;
    }
    .pages-buttons__container {
        width: 60%;
    }

}

@media (min-width: 80rem) {
    .bigtext-title {
        font-size: 2.2rem;
    }
    .new-post__button {
        width: 30%;
        font-size: 1.6rem;
    }

    .blog-container {
        width: 40%;
}
    .edit-button {
        font-size: 1.6rem;
    }

    .delete-button {
        font-size: 1.6rem;
    }

    .big-icon__size {
        font-size: 20rem;
    }

    .no-news__text {
        font-size: 1.4rem;
    }

    .blog-title {
        font-size: 1.8rem;
    }
    .blog-icon {
        font-size: 1.8rem;
    }


    .logged-in__button span {
        font-size: 8rem;
        padding: 1rem 0;
    }

    .logged-in__button p {
        font-size: 1.4rem;
        padding-bottom: 0.4rem;
    }

    .news-info__date,
    .news-info__author {
        font-size: 1.4rem;
    }

    .buttons-container {
        width: 40%;
    }
    .pages-buttons__container {
        width: 40%;
    }
}