/* import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Roboto&display=swap');

/* add base styling */
* {
    margin: 0;
    padding: 0;
    border: none;
    scroll-padding-top: 7rem;
    scroll-behavior: smooth;
}

body {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    color: #000;
}

article {
    clear: both;
    padding-bottom: 1.875rem;
}

/* logo and headings */
h1, h2, h3, h4 {
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 0.625rem;
    text-align: center;
}

.heading-text {
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

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

p {
    padding-bottom: 5px;
}

/* add styling to in-text hyperlinks */
.hyperlink {
    font-weight: 600;
    color: #000000;
    text-decoration: none;
}

.hyperlink:hover {
    text-decoration: underline;
}

/* style horizontal rule */
hr {
    border-top: 1px solid #000000;
    padding-bottom: 1.25rem;
}

/* create clear class to clear floats and fully contain all child elements within parent elements  */
.clear {
    clear: both;
    line-height: 0px;
}

/* header */
.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #000000;
    background-color: #000000;
    overflow: hidden;
    z-index: 1;
}

.header-logo, .header-nav {
    text-align: center;
}

.header-logo a {
    text-decoration: none;
}

#logo {
    font-size: 2rem;
    color: #daa520;
    margin: 0 auto;
    padding: 0.625rem 0;
    display: inline-block;
}

#logo:hover {
    color: #ffffff;
}

/* navigation bar */
#menu {
    letter-spacing: 1px;
    text-transform: uppercase;
}

#menu a {
    text-decoration: none;
    color: inherit;
}

#menu div {
    float: left;
    width: 33.3333%;
    list-style-type: none;
    color: #000000;
    background-color: #daa520;
    border: 1px solid #000000;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0.625rem;
}

#menu div:hover, #menu .active div:hover {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #000000;
}

#menu .active div {
    color: #daa520;
    border: 2px solid #daa520;
    background-color: #000000;
}


/* background image */
#background-image-main {
    clear: both;
    background: url('../images/twin-beer-bottles.webp') no-repeat center center / cover;
    width: 100%;
}

/* section */
section {
    clear: both;
}

.container {
    clear: both;
    width: 60%;
    margin: 0 auto;
    padding: 1.875rem 5%;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
}


/* footer */
footer {
    clear: both;
    background-color: #000000;
    width: 100%;
}

.social-networks {
    text-align: center;
    list-style-type: none;
}

.social-networks li {
    display: inline;
}

.social-networks i {
    color: #daa520;
    font-size: 1.6rem;
    margin: 1.25rem;
    padding: 5px;
}


/* hero images */
.hero-outer {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #000000;
    position: relative;
}

.hero-image-spilled {
    background: url('../images/beer-spilled-lower.webp') center center / cover;
    height: 25rem;
    text-align: center;

    /* animates zoom effect on loading page */
    animation-name: hero-zoom;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

/* creates the level of zoom for hero image */
@keyframes hero-zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

#hero-image-contact {
    background: url('../images/people-enjoying-beer.webp') center center / cover;
    min-height: 50rem;
    text-align: center;
}

/* style hero block and contact section */
.page-title, #contact-container {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 1.25rem;
    padding: 1.25rem 2.5rem;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#contact-container {
    width: 40%;
}

.page-title h2 {
    padding-bottom: 0;
    margin: auto 0;
}

/* style home page images */
.image-gallery {
    margin: 1.25rem 0;
}

.slim-image {
    float: left;
    width: 50%;
    overflow: hidden;
}

.slim-image img {
    width: 100%;
    border-radius: 0.625rem;
    box-sizing: border-box;
    padding: 5px;
}

.wide-image img {
    width: 100%;
    border-radius: 0.625rem;
}

/* style form elements */
form {
    text-align: left;
    padding-top: 1.25rem;
    line-height: 1.875rem;
}

.text-input {
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 5px;
    width: 100%;
    height: 1.6rem;
    margin: 5px 0 1.25rem 0;
    padding: 5px;
}

#message {
    height: 5rem;
    font-family: Roboto, sans-serif;
}

form p {
    padding-bottom: 0;
}

.radio-set {
    margin: 5px 0 1.25rem 0;
}

input[type="submit"] {
    display: block;
    margin: 0 auto;
}

/* style sub-menu navigation bars */
section nav {
    text-align: center;
}

.sub-menu {
    background: url('../images/beer-body-2.webp') no-repeat center center / cover;
    padding: 0;
    overflow: hidden;

    /* animates background scroll effect on loading page */
    animation-name: background-scroll;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
}

/* creates parameters for background scrolling */
@keyframes background-scroll {
    from {
        background-position: 50% 100%;
    }
    from {
        background-position: 50% 0;
    }
}

.sub-menu div {
    background-color: rgba(210, 182, 67, 0.7);
    float: left;
    height: 3.125rem;
    padding-top: 1.25rem;
    text-align: center;
    border: 1px solid #000000;
    box-sizing: border-box;
    color: #000000;
    font-size: 1.2rem;
    text-transform: uppercase;
}

#recipe-menu div {
    width: 25%;
}

#resources-menu div {
    width: 33.3333%;
}

.sub-menu div:hover {
    background-color: rgba(245, 255, 255, 0.7);
    color: #000000;
}

.return-menu {
    text-align: center;
}

.button {
    display: inline-block;
    width: 30%;
    list-style-type: none;
    font-size: 0.8rem;
    color: #000000;
    background-color: #daa520;
    border: 1px solid #000000;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0.75rem 0.625rem 0.625rem 0.625rem;
    text-decoration: none;
    text-align: center;
}

.button:hover {
    background-color: #000000;
    color: #daa520;
    border: 1px solid #daa520;
}

/* style article list elements */
article ul, article ol {
    margin: 5px 0 0.625rem 2.5rem;
}

/* style tips boxes */
.tips-box {
    border: 1px solid #000000;
    border-radius: 0.625rem;
    width: 90%;
    margin: 1.25rem auto;
    padding: 1.25rem;
}

/* style image boxes */
.image-container {
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 0.625rem;
    white-space: nowrap;
    box-sizing: border-box;
    margin: 1.25rem 0.625rem 5px 0.625rem;

    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* style block images */
.center-image {
    width: 60%;
    margin: 0 auto;
    padding-bottom: 1.25rem;
}

.center-image .image-container {
    padding-top: 0;
}

/* target specific block images */
#equipment img {
    width: 110%;
    transform: translate(-50%, -45%);
}
#sanitise img {
    width: 140%;
    transform: translate(-40%, -50%);
}
#ferment img {
    width: 150%;
}

#bottle img {
    width: 130%;
}

#carbonate img {
    width: 120%;
}

#enjoy img {
    width: 110%;
}

#repeat img {
    width: 140%;
    transform: translate(-50%, -48%);
}

/* style floating anchor elements */
.float-link {
    float: left;
    width: 50%;
    text-align: center;
    color: #000000;
    text-decoration: underline #000000;
    margin: 1.25rem 0 0.625rem 0;
}

.float-margin-adjust {
    margin-top: 1.25rem;
}

.beer-kit-caption {
    height: 3.125rem;
}

/* style individual images */
#love-brewing-logo, #balliihoo-logo, #northern-brewer-logo {
    width: 90%;
}

#love-brewing-kit, #balliihoo-kit {
    width: 60%;
}

#northern-brewer-kit {
    width: 80%;
}

/* embed youtube videos */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
    margin: 0.625rem 0 1.25rem 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#videos h4 {
    padding-top: 1.875rem;
}

/* media queries for responsive design */

/* For larger to medium screen sizes from 1200px wide and down */
@media screen and (max-width: 1200px) {
    #contact-container {
        width: 50%;
    }
}

/* For medium screen sizes from 950px wide and down */
@media screen and (max-width: 950px) {
    .container {
        width: 80%;
    }

    #contact-container {
        width: 70%;
    }

    .sub-menu {
        background-size: 200%;
    }

    #recipe-menu div {
        width: 50%;
    }
    
    #resources-menu div {
        width: 100%;
    }
}

/* For smaller screen sizes from 800px wide and down */
@media screen and (max-width: 800px) {
    .container {
        width: 100%;
    }

    #contact-container {
        width: 80%;
    }

    #logo {
        font-size: 1.5rem;
    }

    #menu {
        font-size: 0.8rem;    
    }

    .page-title {
        width: 80%;
    }

    .button {
        width: 50%;
        font-size: 0.6rem;
    }

    .center-image {
        width: 70%;
    }
}

/* For small screen sizes from 400px wide and down */
@media screen and (max-width: 400px) {
    .sub-menu {
        background-size: 300%;
    }
    
    .center-image {
        width: 100%;
    }

    .social-networks i {
        font-size: 1.2rem;
        margin: 0.625rem;
    }
}