/* -------------------------------------- utilities */
.clearFix:after{
	content: "";
	display: table;
	clear:both;
}
:root {
    --primary: #DDD9D3;
    --secondary: #A58913;
    --tertiary: #563F0B;
    --tertiary-dark: #2c2005;
    --supplementary: #B5AFA5;
    --supplementary-trans: #b5afa5c5;
}



/* ------------------------------------------------------------Typography */
html {
    font-family: 'Cabin', sans-serif;
    font-size: 125%;
    line-height: 1.5em;
    font-weight: normal;
}
  
body {
    color: var(--primary);
}

body.about {
    color: var(--tertiary-dark);
}
  
h1, h2, h3, h4, h5, h6, ul, ol, li, p {
    margin: 0;
    padding: 0;
}
  
h1 {
    font-family: 'Cabin Sketch', sans-serif;
    font-weight: 900;
    font-size: 2em;
    line-height: 1.5;
    margin-bottom: 0.75em;
}
/*logo icon, like text*/
h1 img {
    height: 2em;
}
  
h2 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 1em;
}
  
p {
    margin-bottom: 1.5em;
}
  
p:last-child {
    margin-bottom: 0;
}

nav a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}

nav ul, nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h2,h3 {
    text-transform: uppercase;
    font-family: "Love Ya Like a Sister", sans-serif;
    letter-spacing: 0.1em;
}
a.btn, button.btn {
    text-transform: uppercase;
    font-family: "Love Ya Like a Sister", sans-serif;
}

/* ------------------------------------------------------------ Layout */
header, main, footer  {
    padding: 0 1em;
}
  
@media (min-width: 80em) {
    header, main, footer {
        max-width: 64em;
        margin: 0 auto;
    }
}

.banner {
    height: 14em;
}

.banner div {
    padding: 2em 0;
}


/* ------------------------------------------------------------ General */
html {
    height: 100%;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-position: center;
}
body.about {
    background-color: var(--supplementary-trans);
}

a.btn, button.btn {
    text-decoration: none;
    border-radius: 2px;
    color: var(--tertiary);
    background:var(--primary);
    padding: 0.5em 1em;
}

a.btn:hover, button.btn:hover {
    background: var(--supplementary);
}

button.btn {
    border: none;
}

@media (min-width: 50em) {
    html {
        background-size: cover;
        /*background-position: 0 10em;*/
    }
}

/* ------------------------------------------------------------ Navigation */
.nav-area {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 10;
    left:-15em;
    background: var(--primary);
    color: var(--tertiary);
    width: 13em;
    padding: 1em;
}
.nav-area .primary {
    display:block;
}
.nav-area li {
    padding: 0.5em 0;
}

.sidenav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    width: auto;
    margin: 0;
    margin-top: -0.3em;
    padding: 0 1em 0 0;
    outline:none;
    z-index: 15;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    vertical-align: middle;
}
.bar {
    display: block;
    height: 0.25em;
    width: 2em;
    background-color: var(--secondary);
    border-radius:1px;
    margin: 10px auto;

    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}
.sidenav-toggle.active {
    position: fixed;
    top: 2.05em;
}
.sidenav-toggle.active .top {
    -webkit-transform: translateY(15px) rotateZ(45deg);
    -moz-transform: translateY(15px) rotateZ(45deg);
    -ms-transform: translateY(15px) rotateZ(45deg);
    -o-transform: translateY(15px) rotateZ(45deg);
    transform: translateY(15px) rotateZ(45deg);
}
  
.sidenav-toggle.active .bottom {
    -webkit-transform: translateY(-15px) rotateZ(-45deg);
    -moz-transform: translateY(-15px) rotateZ(-45deg);
    -ms-transform: translateY(-15px) rotateZ(-45deg);
    -o-transform: translateY(-15px) rotateZ(-45deg);
    transform: translateY(-15px) rotateZ(-45deg);
}
  
.sidenav-toggle.active .middle {
    width: 0;
}

.sidenav-toggle.active + h1 {
    margin-left: 1.6em;
}

.nav-area {
    -webkit-transition: transform .7s ease-in-out;
    -moz-transition: transform .7s ease-in-out;
    -ms-transition: transform .7s ease-in-out;
    -o-transition: transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
}

.nav-area.menu-open {
    -webkit-transform: translateX(15em);
    -moz-transform: translateX(15em);
    -ms-transform: translateX(15em);
    -o-transform: translateX(15em);
    transform: translateX(15em);
}

body.menu-open::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000073;
}


header nav {
    vertical-align: middle;
    float: right;
}
header nav.primary li {
    display: inline-block;
    padding: 1.75em 1em;
    text-transform: uppercase;
}

@media (min-width: 50em) {
    
}

/* ------------------------------------------------------------ Header */
header h1 {
    display:inline-block;
    vertical-align: middle;
    margin: 0.4em 0;
}

/* ------------------------------------------------------------ Banner */
.banner {
    text-align: center;
}

/* ------------------------------------------------------------ About */
.content--about article {
    padding: 1em;
    border-radius: 2px;
}
.content--about article h2{
    text-align: center;
}
#about {
    background-color: var(--supplementary-trans);
    border-radius: 2px;
    padding: 1em;
    color: var(--tertiary-dark);
}

/* ------------------------------------------------------------ Contact */
#contact {
    padding: 1em 0;
}

form {
    position: relative;
    font-size: 0.8em;
    line-height: 1.875em;
}
form input, form textarea {
    font-style: italic;
    width: 100%;
    background-color: #eee;
    font-size: 1em;
    padding: 5px;
    border-radius: 0;
    border: none;
    margin-bottom: 1.25em;
    line-height: 1.875em;
    box-sizing: border-box;
    color: var(--tertiary);
}

form textarea {
    height: (160/16) * 1em;
    margin-bottom: 1em;
}
form :-moz-placeholder{color: var(--supplementary);}
form ::-moz-placeholder{color: var(--supplementary);}
form ::-webkit-input-placeholder{color: var(--supplementary);}

.errors, .success {
    margin-bottom: 1em;
} 
.errors p, .success p{
    margin: 0;
    text-align: left;
}
.errors p {
    color:darkred;
}
.success p {
    color:darkgreen;
}

form button.btn {
    background: var(--secondary);
    color: var(--primary);
}
form button.btn:hover {
    background: var(--primary);
    color: var(--tertiary);
}


/* ------------------------------------------------------------ Social */

#social {
    margin-bottom: 0.5em;
    margin-top: 3em;
}
#social h3 {
    text-align: center;
    margin-bottom: 1em;
}

#social ul{
    display: flex;
    justify-content: center;
    margin: 0;
    column-gap: 1em;
    font-size: 1.5em;
}

#social ul li {
    margin: 0;
    list-style-type: none;
}
#social ul li a {
    text-decoration: none;
    color: var(--primary);
}
#social ul li a:hover, #social ul li a:focus {
    color: var(--secondary);
}
    


/* ------------------------------------------------------------ Footer */
footer p {
    text-align: center;
}

footer img {
    margin: 0 auto;
    display: block;
    width: 100px;
}