:root {
    --heycon-green: rgb(0,120,0);
    --heycon-blue: rgb(0,80,140);
    --heycon-light-green: rgb(200,230,200);
    --heycon-light-blue: rgb(122,157,183);
}

* {
    font-family: 'Montserrat', sans-serif;
}

a {
    color: var(--heycon-blue);
}
a:hover {
    color: var(--heycon-green);
    text-decoration: none;
}

h1 {
    color: var(--heycon-green);
    font-size: 2rem;
}

textarea:focus, input:focus, button:focus {
    outline: none;
}

/* -- Header -- */
#header nav {
    background-color: rgba(255,255,255,.9);
    box-shadow: 0 0 30px gray;
}

#header nav .navbar-brand {
    color: var(--heycon-green);
    font-family: Arial, sans-serif;
}

#header nav .active {
    text-decoration-line: underline ;
    text-decoration-color: var(--heycon-green);
    text-decoration-style: dotted;
}

/* -- Main -- */
#home {
    min-height: 100vh;
    background-image: url("images/home.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#home div {
    background-color: rgba(255,255,255,.9);
}

#safety {
    min-height: 500px;
}

#safety .slogan p {
    font-size: 70px;
    color: var(--heycon-green);
    font-family: 'Fredericka the Great', cursive;
}

#safety .slogan:hover {
    cursor: default;
}

#quality {
    background-image: url("images/chain_gold.jpg");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    min-height: 500px;
}

#quality h1, #quality p {
    color: rgb(200,200,200);
}

#contact {
    background-image: url("images/contact.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.contact-info {
    background-color: var(--heycon-light-green);
    box-shadow: 0 0 20px rgb(100,100,100);
}

#google-map {
    background-color: var(--heycon-light-green);
    box-shadow: 0 0 30px rgb(100,100,100);
    height: 400px;
}

#contact-form input, #contact-form textarea {
    width: 100%;
    margin: 0 0 15px;
    height: 36px;
    padding: calc((36px - 1rem)/2) 15px;
    border: none;
    border-radius: 18px;
    box-shadow: inset 0 0 10px rgb(100,100,100);
}

#contact-form textarea {
    resize: none;
    min-height: 100px;
}

.form-submit {
    width: 100%;
    height: 36px;
    padding: calc((36px - 1rem)/2) 15px;
    border: none;
    border-radius: 18px;
    background-color: var(--heycon-light-blue);
    box-shadow: inset 0 0 10px rgb(80,80,80);
    transition: all .3s;
}

.form-submit:hover {
    cursor: pointer;
    background-color: var(--heycon-blue);
    box-shadow: inset 0 0 10px rgb(50,50,50);
}

/* -- Modals -- */
.modal-content {
    border-radius: 0;
    border: none;
    box-shadow: 0 0 50px rgb(0,0,0);
}

.modal-header {
    border-radius: 0;
}

.modal-body h2 {
    font-size: 24px;
    color: rgb(70,70,70);
}

.modal-body h3 {
    font-size: 20px;
    color: rgb(100,100,100);
}

.modal-body p {
    text-align: justify;
}

.button-more {
    background-color: transparent;
    color: var(--heycon-blue);
    border: none;
}
.button-more:hover {
    color: var(--heycon-green);
    cursor: pointer;
}

/* -- Cookie consent buttons -- */
.consent-button {
    padding: 7px 15px;
    background-color: transparent;
    color: var(--heycon-green);
    border: 2px solid var(--heycon-green);
    font-weight: bold;
}

.consent-button-filled {
    color: rgb(255,255,255);
    background-color: var(--heycon-green);
}