:root {
    --seasalt: #fafafa;
    --muted-gold: #daa520;
    --bordeaux: #4c0013;
    --black: #000000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a:hover {
    color: var(--seasalt);
}

/* Fonts */
.font-parisienne {
    font-family: 'Parisienne', cursive;
}

.font-montserrat {
    font-family: "Montserrat", sans-serif;
}

/* Colors */
.custom-white {
    color: var(--seasalt);
}

.custom-black {
    color: var(--black);
}

.custom-maroon {
    color: var(--bordeaux);
    font-weight: 600;
}

.custom-gold {
    color: var(--muted-gold);
}

body,
.bg-body-tertiary,
footer {
    background-color: var(--black) !important;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='29' height='50.115' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 0%, 1)'/><path d='M14.498 16.858L0 8.488.002-8.257l14.5-8.374L29-8.26l-.002 16.745zm0 50.06L0 58.548l.002-16.745 14.5-8.373L29 41.8l-.002 16.744zM28.996 41.8l-14.498-8.37.002-16.744L29 8.312l14.498 8.37-.002 16.745zm-29 0l-14.498-8.37.002-16.744L0 8.312l14.498 8.37-.002 16.745z'  stroke-width='1' stroke='hsla(47, 8%, 5%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    background-size: cover;
}

.navbar-expand-lg .navbar-collapse {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar {
    padding: 1rem;
}

.navbar-nav,
.navbar-nav .nav-link,
a.nav-link {
    color: var(--seasalt);
    font-family: "Montserrat", sans-serif;
}

.nav-link:hover,
.nav-link.active:hover {
    color: var(--muted-gold);
}

a.nav-link.active {
    color: var(--muted-gold) !important;
}

.my-toggler {
    background-color: var(--muted-gold);
    opacity: 0.8;
}

.cellar-name:hover {
    color: var(--muted-gold);
}

.hero-img {
    margin: 4rem 0;
    position: relative;
}

/* Footer */
footer {
    padding: 1rem;
    width: 100%;
}

.fa-github,
.fa-linkedin {
    font-size: 1.5rem;
}

.opening-hours {
    padding-top: 1rem;
}

/* Buttons */
.button {
    background-color: var(--black);
    font-family: "Montserrat", sans-serif;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.button:hover {
    background-color: var(--bordeaux);
    color: var(--muted-gold);
}

.secondary-btn {
    background-color: var(--bordeaux);
    opacity: 0.8;
    text-decoration: none;
}

.secondary-btn:hover {
    background-color: var(--bordeaux);
    opacity: 1;
}

.delete-comment {
    background-color: var(--bordeaux);
}

.button-delete {
    background-color: var(--bordeaux);
}

.close {
    font-size: 1.3rem;
    font-weight: 500;
}

.close:hover {
    font-weight: 700;
}

/* Form styling */
label {
    color: var(--seasalt);
    font-family: "Montserrat", sans-serif;
    padding-top: 0.2rem;
}

.label-fixed-width {
    width: 7rem;
}

input {
    border-radius: 5px;
    font-family: 'Montserrat';
    padding: 0.3rem;
    margin: auto;
}

a {
    text-decoration: none;
}

li {
    color: var(--muted-gold);
    font-family: "Montserrat", sans-serif;
    padding: 0.3rem;
}

b {
    color: var(--muted-gold);
}

.errorlist {
    list-style-type: none;
}

textarea {
    border-radius: 5px;
    font-family: 'Montserrat';
    margin: 0.5rem;
    width: -webkit-fill-available;
}

.form-control {
    width: -webkit-fill-available;
}

.text-center.card-body {
    padding: 5px;
}

/* Modal */
.modal-dialog {
    color: var(--muted-gold);
}

.modal-content {
    background-color: var(--black);
    background-size: cover;
}

/* Blog */
.card,
.card-body {
    background-color: var(--black);
}

.card-title {
    font-family: 'Parisienne', cursive;
    padding-top: 0.3rem;
}

p {
    color: var(--seasalt);
}

.image-container {
    position: relative;
}

.image-flash {
    bottom: 5%;
    left: -2px;
    min-width: 30%;
    position: absolute;
}

.post {
    padding-bottom: 1rem;
}

.scale {
    height: auto;
    width: 100%;
}

.author {
    background-color: var(--bordeaux);
    color: var(--muted-gold);
    margin: 4px;
    padding: 0.3rem;
}

.masthead {
    display: inline-block;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.masthead-text {
    background-color: transparent;
    color: var(--seasalt);
    position: relative;
}

.masthead-image {
    position: relative;
    overflow: hidden;
}

.masthead-image:after {
    content: "";
    height: 100%;
    position: absolute;
    right: 90%;
    top: 0;
    width: 150%;
}

.post-link {
    color: var(--muted-gold);
    text-decoration: none;
}

.post-link:hover {
    padding: 0.3rem;
}

.post-title {
    margin-left: 5%;
}

.post-subtitle {
    color: var(--seasalt);
    margin-left: 5%;
}

.link {
    color: var(--muted-gold);
    font-size: 1.5rem;
    text-decoration: none;
}

.link:hover,
.link:active {
    color: var(--muted-gold);
}

.page-btn:hover {
    color: var(--muted-gold);
}

.btn-like {
    background: transparent;
    color: var(--muted-gold);
}

.btn-like:hover,
.btn-like:active {
    color: var(--muted-gold);
    background: transparent;
    border: none;
}

.faded {
    color: var(--bordeaux);
    opacity: 0.8;
}

.fa-comments {
    color: var(--seasalt);
}

.text-secondary {
    color: var(--muted-gold) !important;
}

/* Reviews */
.col-md-4.card {
    margin: 0 auto;
}

.review-btn {
    background-color: var(--black);
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 1rem;
    position: relative;
}

.new-review {
    background-color: var(--black);
}

.user {
    font-size: 24px;
}

input#id_image {
    color: var(--seasalt) !important;
}

.review-link {
    font-size: 20px;
}

.review-link:hover {
    color: var(--muted-gold);
}

.review-heading {
    font-size: 40px;
}

/* Contact page */
.contact-form {
    background-color: var(--black);
}

@-moz-document url-prefix() {
    .contact-form textarea {
        width: 97%;
    }
}

/* Gallery page */
.gallery-text {
    padding-bottom: 2rem;
}

/* Login, logout & Sign Up page */
.helptext {
    color: var(--muted-gold);
    font-family: "Montserrat", sans-serif;
    opacity: 0.6;
}

.reg-link {
    padding-top: 1rem;
}

.user-form {
    background-color: var(--black);
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
}

.form-group input {
    width: 100%;
    box-sizing: border-box;
}

@media only screen and (min-width: 320px) {
    .cellar-name {
        padding: 0;
        width: 33vw;
    }

    button.navbar-toggler {
        margin-right: -1.5rem;
    }

    .logo {
        margin-left: -0.5rem;
        width: 2.5rem;
    }

    .secondary-btn {
        font-size: 16px;
        padding: 0.1rem;
    }

    .font-montserrat {
        font-size: 16px;
    }
}

@media only screen and (min-width: 576px) {
    .logo {
        margin-left: -0.5rem;
        width: 3rem;
    }

    .secondary-btn {
        padding: 0.3rem;
    }
}

@media only screen and (min-width: 768px) {
    .author {
        margin: -1rem;
        margin-left: -1.8rem;
        margin-top: -8rem;
    }

    p {
        margin-top: 1rem;
    }

    .logo {
        width: 4rem;
    }

    .my-toggler {
        height: 2.5rem;
        width: 2.5rem;
    }

    .secondary-btn {
        padding: 0.5rem;
    }

    ul {
        list-style: none;
    }
}

@media only screen and (min-width: 992px) {
    .my-toggler {
        margin-right: 1.5rem;
    }

    .logo {
        margin-left: 0.5rem;
        width: 3rem;
    }

    li.nav-item {
        padding: 0;
    }

    .secondary-btn {
        font-size: 1.2rem;
    }

    .author {
        margin-top: -10rem;
    }

    .footer-text {
        font-size: 1.4rem;
    }

    .button {
        font-size: 1.2rem;
        padding: 0.8rem;
    }
}

@media only screen and (min-width: 1010px) {
    .navbar-expand-lg .navbar-collapse {
        right: 1.5rem;
    }
}

@media only screen and (min-width: 1200px) {
    a.nav-link {
        padding: 0.3rem;
    }

    .my-toggler {
        height: 3.5rem;
        width: 3.5rem;
    }

    .footer-text {
        font-size: 1.8rem;
    }

    .quote {
        font-size: 1.5rem;
    }

    .author {
        margin-top: -12.3rem;
    }

    .card-text:last-child {
        margin-bottom: 1.5rem;
    }
}