/* UNIVERSAL STYLES */

* {
    box-sizing: border-box;
    /*border: 1px solid red;*/
}

html, 
body {
    font-size: 10px;
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', sans-serif; 
    text-align: center;
}

main {
    position: relative;
    left: 0;
    top: 10.5rem;
}

span.cursive {
    font-family: 'Fleur De Leah', cursive;;
}

span.bold {
    font-weight: bold;
}

h2, 
h3, 
h4 {
    font-family: 'Cinzel Decorative', cursive;
}

img {
    max-width: 100%;
    height: auto;
}

li {
    list-style: none;
    vertical-align: bottom;
}

nav li {
    display: inline-block;
}

a {
    text-decoration: none;
}

/* HEADER */

header {
    width: 100%;
    height: auto;
    background-color: #f4f3ec;
    position: fixed;
    z-index: 10;
}

header .content {
    display: flex;
    flex-flow: column nowrap;
}

header .top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    margin: 1rem 2rem 1rem 2rem;
}

header .logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: 10rem;
    height: 5rem;
    flex-shrink: 2;
}

h1 {
    font-size: 5rem;
    color: #4a4428;
}

.top-header nav ul {
    margin: auto;
    flex-shrink: 2;
}

.top-header a:hover {
    opacity: 0.5;
}

.icon {
    height: auto;
}

.potion {
    width: 3.5rem
}

.menu {
    width: 2.5rem;
    flex-shrink: 2;
} 

.search {
    width: 2rem;
}

.cart {
    width: 3rem;
    margin-left: 4rem;
}

header .bottom-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row nowrap;
    width: 100%;
    height: auto;
    background-color: #a9c479;
}

.bottom-header nav ul {
    margin-top: 1rem;
    font-family: 'Cinzel Decorative', cursive;
    font-weight: bold;
}

.bottom-header nav li {
    padding: 0 6rem;
}

.bottom-header nav a {
    font-size: 1.4rem;
    color: #f4f3ec;
}

.bottom-header nav a:hover {
    font-size: 1.6rem;
    color: #734F96;
}

/* PAGE HERO */

.page-hero {
    width: 100%;
    height: 57rem;
    background-image: url(./page-hero.jpeg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-hero h2 {
    font-size: 4rem;
    color: #4a4428;
    text-shadow: 2px 2px 3px #a9c479, 0 0 1em #4a4428, 0 0 0.2em #4a4428;
}

.page-hero button {
    padding: 1rem 2rem;
    background-color: #a9c479;
    border: 1px solid #4a4428;
    color: #4a4428;
    font-size: 2rem;
    font-family: 'Times New Roman', serif;
}

.page-hero button:hover {
    background-color: #734F96;
    color: #f4f3ec;
    border: 1px solid #f4f3ec;
    font-size: 2.2rem;
}

/* PRODUCTS / SERVICES */

.services {
    background-color: #f4f3ec;
    height: 58rem;
    width: 100%;
}

.services .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    padding-top: 4.5rem;
}

.services h3 {
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0;
    padding: 1rem;
    color: #4a4428;
}

.services h5 {
    font-size: 1.8rem;
    margin: 0;
    padding: 2rem;
    color: #4a4428;
}

.services span.cursive {
    font-size: 2rem;
}

.services .container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 1.5rem;
}

.feature {
    width: 28%;
    height: 35rem;
    color: black;
    vertical-align: middle;
    border: 1px solid #4a4428;
    padding: 1rem;
}

.feature:hover {
    width: 29%;
    height: 35.5rem;
    border: 2px solid #734F96;
}

.magic {
    background-image: url(./magic.jpeg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.reading {
    background-image: url(./reading.jpeg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.ritual {
    background-image: url(./ritual.jpeg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.feature h4 {
    font-size: 2.5rem;
    text-shadow: 2px 2px 3px #a9c479, 0 0 1em #4a4428, 0 0 0.2em #4a4428;
    background-color: rgba(115, 79, 150, .5);
}

.feature p {
    font-size: 1.8rem;
    text-shadow: 2px 2px 3px #a9c479, 0 0 1em #4a4428, 0 0 0.2em #4a4428;
    background-color: rgba(244,243,236, .7);
}

/* MEET THE OWNERS*/

.owners {
    width: 100%;
    height: 45rem;
    background-color: rgba(115, 79, 150, 0.4);
    color: #f4f3ec;
}

.owners .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    padding-top: 2.5rem;
}

.owners h3 {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
    padding: 0.5rem;
}

.owners p {
    font-size: 1.8rem;
    margin: 0;
    padding: 0.5rem 2rem 0 2rem;
}

.owners .container {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 10%;
}

.owners .container div {
    width: 30rem;
}

.owners img {
    width: auto;
    height: 25rem;
    border: 2px solid #4a4428;
}

.owners h4 {
    font-size: 1.8rem;
    margin: 0;
    padding: 0.5rem;
    text-shadow: 2px 2px 3px #a9c479, 0 0 1em #4a4428, 0 0 0.2em #4a4428;
}

.owners h4:hover {
    font-size: 2rem;
}

/* ABOUT */

.about {
    background-color: #a9c479;
    height: 48rem;
    width: 100%;
    color: #4a4428;
}

.about .content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about h3 {
    font-size: 2.5rem;
}

.about p,
.about li {
    font-size: 1.8rem;
    line-height: 2;
}

.about-info,
.store-info {
    width: 50%;
    padding: 3rem;
    height: 48rem;
}

.about-info {
    text-align: left;
    margin-left: 2rem;
}

.store-info ul {
    padding: 0;
    margin: 0;
}

/* SUBSCRIPTION */

.subscription {
    width: 100%;
    height: 25rem;
    background-color: #4a4428;
    color: #f4f3ec;
}

.subscription .content {
    padding: 2rem;
}

.subscription h3 {
    font-size: 2.5rem;
}

.subscription p {
    font-size: 1.8rem;
}

.subscription input {
    width: 25rem;
    height: 4rem;
}

.subscription button {
    width: 7rem;
    height: 4rem;
    padding: 0;
    font-family: 'Times New Roman', serif;
    background-color: #a9c479;
    color: #4a4428;
    border: none;
    text-transform: uppercase;
}

.subscription button:hover {
    background-color: #734F96;
    color: #f4f3ec;
    border: 1px solid #f4f3ec;
}

/* FOOTER */

footer {
    height: auto;
    width: 100%;
    background-color: #f4f3ec;
    color: #4a4428;
}

footer .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2rem;
    font-size: 1.2rem;
    padding: 0.5rem 0;
}

@media only screen and (max-width: 760px) {
    header .bottom-header {
        display: none;
    }

    main {
        top: 7rem;
    }

    h1 {
        font-size: 4rem;
    }

    .icon {
        width: 2rem;
    }
    .page-hero {
        height: 50rem;
    }

    .page-hero h2 {
        font-size: 3.5rem;
    }

    .page-hero button {
        font-size: 1.5rem;
    }

    .page-hero button:hover {
        font-size: 1rem;
    }

    .services {
        height: auto;
    }

    .services h5, 
    .feature h4 {
        font-size: 1.8rem;
    }

    .owners {
        height: auto;
        justify-content: center;
    }

    .services h3,
    .about h3,
    .about p:not(:first-of-type),
    .about li,
    .subscription h3, 
    .subscription p {
        font-size: 2rem;
    }

    .about-info p {
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 450px) {
    header .bottom-header {
        display: none;
    }

    main {
        top: 7rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    .menu {
        display: none;
    }
    .page-hero h2 {
        font-size: 3rem;
    }

    .page-hero button,
    .about-info p {
        font-size: 1rem;
    }

    .page-hero button:hover {
        font-size: 0.7rem;
    }
    .services h3 {
        font-size: 1.6rem;
    }

    .services h5,
    .feature h4 {
        font-size: 1.3rem;

    }

    .feature {
        background-color: #f4f3ec;
        background-image: none;
        height: auto;
        width: 25vw;
    }

    .feature p {
        display: none;
    }

    .feature:hover {
        width: 25vw;
        height: 20vh;
    }
    .about h3,
    .about p:not(:first-of-type),
    .about li,
    .subscription h3, 
    .subscription p {
        font-size: 1.5rem;
    }
}

@media only screen and (max-resolution: 150dpi) {
    .logo {
      background-image: url(./page-hero-medium.jpeg);
    }
}