/* colors - if you want to swap out colors, just replace the hex codes here! */
:root {

  --white:#f7f7f7;
  --accent:#af2916;
  --dark:#59122a;
  --light:#eed3da;
  --bg:#f7f7f7;
  --text:#252525; 
}


/*      fonts:      */

@font-face {
font-family: "WaterResistant";
src: url("../_fonts/WaterResistant.ttf?#iefix") format("truetype"); }

@font-face {
font-family: "Merriweather";
font-style:none;
src: url("../_fonts/Merriweather/Merriweather-Regular.ttf") format("truetype"); }

@font-face {
font-family: "Merriweather";
font-style:italic;
src: url("../_fonts/Merriweather/Merriweather-LightItalic.ttf") format("truetype"); }

@font-face {
font-family: "Merriweather";
font-style:none;
font-weight:bold;
src: url("../_fonts/Merriweather/Merriweather-Bold.ttf") format("truetype"); }

@font-face {
font-family: "Merriweather";
font-style:italic;
font-weight:bold;
src: url("../_fonts/Merriweather/Merriweather-BoldItalic.ttf") format("truetype"); }

@font-face {
font-family: "Raleway";
font-style:none;
font-weight:normal;
src: url("../_fonts/Raleway/Raleway-Regular.ttf") format("truetype"); }

@font-face {
font-family: "Raleway";
font-style:italic;

src: url("../_fonts/Raleway/Raleway-LightItalic.ttf") format("truetype"); }

@font-face {
font-family: "Raleway";
font-style:none;
font-weight:bold;
src: url("../_fonts/Raleway/Raleway-Bold.ttf") format("truetype"); }

@font-face {
font-family: "Raleway";
font-style:italic;
font-weight:bold
src: url("../_fonts/Raleway/Raleway-BoldItalic.ttf") format("truetype"); }

* {
    box-sizing: border-box;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
   scrollbar-width: none;
}


/*      arranges the different building blocks of your page:      */
body {
    margin:0;padding:0;
overflow-x:hidden;
overflow-y:scroll;
background-color:var(--bg);
}

#flex {
  display:flex;
}

#container {
margin:0 auto;
flex:1;
order:1;
padding:10px;
width:80vw;
}

#top {
padding:30px;
padding-bottom:15px;
order: 1;
}

#title {
font-family:'WaterResistant';
text-transform:uppercase;
font-weight:bold;
font-size:max(12vmin, 50px);

margin-bottom:0;
margin-top:5vh;
color:var(--dark);
letter-spacing:-5px;
line-height:max(8vmin,.7em) }

 #subtitle {
   font-family:'Raleway';
   font-size:3vmin;
   padding-left:15%;
   padding-right:10%;
   margin-left:3vw;
   background-color:var(--light);
   padding-top:15px;
   margin-top:-20px;
   border-bottom:var(--accent) 3px dashed;

 }

#maintext {
  position:relative;
  order: 2;
width:80%;
  padding-top:10px;
  padding-right:10%;
  padding-left:10%;
  padding-bottom:30px;
  font-family: 'Merriweather', serif;
  font-size:14px;
    line-height:1.6em;
  color:var(--text);
  text-align:justify;
  text-align-last:left;
  margin-right:0px;
  background-color:var(--white);
    box-sizing:border-box;
    border-right:5px double var(--light);
  border-radius:10px;
  min-height:100vh;

}

#maintext p + p {
 text-indent: 2em;
} 

.leftimage {
  float:left;


border:double 5px var(--white);

}

.leftimage img {
  object-fit:scale-down;margin:0;padding:0;
width:100%;height:100%;
}


/*      TEXT STYLING:      */
/* bold text */
b, strong {
  font-weight:bold;
}
/* italic text */
i, em {
  font-weight:300;
  font-style:italic;
}
/* links */
a {
color:var(--accent);
}
/* hovering over links */
a:hover {
text-decoration-style:wavy;
cursor:crosshair;
}
/* underlines */
u {
text-decoration:underline;
text-decoration-style:wavy;
}
/* headers */
h1 {
  font-size:26px;
  text-align:center;
  text-align-last:center;
  font-family:'Raleway';
  font-weight:normal;
color:var(--accent);


}

h2 {
  position:relative;
  display:block;
  margin:auto;
text-align:center;
text-align-last:center;
font-size:13px;
background-color:var(--light);
width:50%;
min-width:10vw;
color:var(--dark);
padding:8px;
text-transform:uppercase;
font-family:raleway;

}

h3 {
  text-align:center;
  text-align-last:center;
  color:var(--dark);
font-size:12px;
  font-weight:normal;
  width:80%;
  margin:10px auto;
}

h3:after {
  content: "";
  display:block;
  margin:0 auto;
  width:10%;
  margin-top:5px;
    border-bottom:var(--light) 5px double;
}

h4 {
  font-size:15px;
  font-weight:bold;
}

#maintext ul li {
margin:0 auto;
  text-align:center;
  text-align-last:center;
  margin-left:-20px;}


blockquote {
  width:70%;
  background-color:var(--light);
  font-size:13px;
  padding:30px;
margin:20px auto;
border:double var(--white) 8px;
}

/* dropcap - delete this bit if you don't want that */
blockquote p:first-child:first-letter {
  color: var(--dark);
  float: left;
  font-size: 70px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

.box {
  position:relative;
  font-family: "Raleway";
width:70%;
display:block;
background-color:var(--accent);
color:var(--bg);
margin:30px auto;
padding:20px;
border:double var(--white) 2px;
font-size:13px;
text-align:center;
text-align-last:center;
box-shadow:5px 5px 0 var(--light);
max-width:100%;
overflow:hidden;
}

.box a {
  font-style:Italic;
  font-weight:light;
  transition:background-color .5s;
  padding:1px;

}

.box a:hover {
background-color:var(--accent);}

.box h1, .box h2, .box h3, .box h4, .box a {
color:inherit;}

#navigation {
  order: 3;
  font-family:'Raleway';
padding:0;
margin:0;
width:20vw;
max-width:250px;
min-width:100px;
font-size:11px;
font-weight:bold;
padding-top:30px;
text-transform:uppercase;
position:fixed;
top:30%;
right:10vw;
}


#navigation ul {
  padding:0;
margin:0;
}

#navigation li a {
    text-decoration: none;
    color:var(--dark);
}

#navigation li {
  max-width:100%;
       list-style:none;
       margin: 0;
       background-color: var(--light);
       padding:10px;
       overflow:hidden;
       margin-top:20px;
       display:block;
       text-align:center;
       text-align-last:center;
transition:background-color .5s;
}

#navigation li:hover {
  background-color:var(--white);
  cursor:crosshair;


}

#navigation summary {
     list-style:none;
}

#navigation details ul li {
  background-color:var(--white);
  font-size:11px;
  margin:8px;
  padding:10px;
       font-weight:400;
       text-transform:none;
}

#navigation details ul li a {
    color:var(--accent);
}



#footer {
  order:4;
  margin-top:20px;
padding-top:20px;
padding-bottom:10px;
  width: 100%;
  min-height: 40px;
  font-size:.8em;
  background-color:var(--dark);
  color:var(--white);
  text-align: center;
  text-align-last:center;
bottom:0px;
  position:relative;
}
#menu-control, #menu-label {
  display:none}



/* small screen support - so people can view on their phones and etc */
@media only screen and (max-width: 800px) {
  
     #flex {
         flex-wrap: wrap;
    }
     #maintext, #top, #footer, #navigation, #container {
         width:100%;
      margin:0 auto;
      padding:10px;
         text-align:center;
         text-align-last:center;
    }
    .leftimage {
width:100%; 
order:3;
height:auto;
padding:0;margin:0;}
    
    #maintext {
      order: 4;
      border-right:none;

    }
    #top {
      order: 1;
    }

    #top #title {
      letter-spacing:normal;
    }
    #navigation {
      order: 2;
padding:0;
position:relative;
margin:0 auto;
right:0;

    }
    #footer {
      order: 5;
    }


    .menu-see {
       max-height: 0px;
       overflow: hidden;
    }
    .menu-see ul {
       list-style-type: none;
       padding: 0;
    }
    .menu-see a {
       display: block;
    }

    input#menu-control {
       display: none;
    }
    label#menu-label {
       display: block;
       font-size:5em;
       padding:0;
       margin:0;
       color:var(--accent)

    }
    input#menu-control:checked ~ label#menu-label {
       color:var(--dark);

    }
    input#menu-control:checked ~ .menu-see {
      max-height:100%;
    }
    
  

    
   }