/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

@font-face {
    font-family: "Mirage";
    src: url('../fonts/Mirage.woff');
}

@font-face {
    font-family: "OldNewspaperTypes";
    src: url('../fonts/OldNewspaperTypes.woff');
    size-adjust: 90%;
}
            
* {
    box-sizing: border-box;
}

body {
    font-family: "OldNewspaperTypes";
    margin: 0;
    background-image: url("../backgrounds/lawrencebg2.png");
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-align: center;
    color: #ffffff;
}

a:link {
  color:#c50202;
  text-decoration: none;
  text-decoration-color: #c50202;
}

a:visited {
  color:#c50202;
  text-decoration: none;
  text-decoration-color: #c50202;
}

a:hover {
  color:#a49cba;
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

#container {
  width: 1000px;
  display: grid;
  margin: 0 auto;
  grid-gap: 0;
  grid-template:
    "header header"
    "nav nav"
    "leftSidebar main"
    "footer footer"
    / 1fr 3fr;
}

main {
    grid-area: main;
    margin: 0 auto;
    width: 750px;
    background-color: #260202;
    padding: 20px;
    text-align: left;
    border-style: double;
    border-color: #000000;
    
}

main ul li {
    font-family: "Mirage"
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header { 
    grid-area: header;
    margin: 0 auto;
    width: 1000px;
    font-family: "Mirage";
}

#header_area {
    width: 100%;
    height: 200px;
    background-size: 100%;
    background-position: center;
}

#header_image {
    width: 1000px;
    height: 150px;
    background-image: url("../headers/redcity.gif");
    background-attachment: fixed; 
    background-size: 100% 100%;
    border-style: solid;
    border-color: #000000;
}

nav {
    grid-area: nav;
    height: 50px;
    background-color: #0d0000;
    width: 1000px;
    margin: 0 auto;
    border-style: double;
    border-color: #000000;
}
            
#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-around;
    align-items: center;
}

#navbar li {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 18px;
}

#navbar li a {
    color: #c50202;
    font-weight: 800;
    text-decoration: none;
}

#navbar li a:hover {
    color: #a49cba;
    text-decoration: underline;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

#flex {
    display: flex;
}

/* what's this "order" stuff about?? allow me to explain! 
if you're using both sidebars, the "order" value tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */

#leftSidebar {
    grid-area: leftSidebar;
    background-color: #260202;
    width: 250px;
    padding: 20px;
    margin: 0 auto;
    border-style: double;
    border-color: #000000;
}

#leftSidebar ul li {
    font-family: "Mirage";
    font-size: 20px;
}
            
footer {
    grid-area: footer;
    background-color: #0d0000;
    width: 1000px;
    height: auto;
    margin: auto; 
}

#footer_box {
    width: 1000px;
    height: auto;
    overflow: hidden;
    position: relative;
    background: #0d0000;
    border-style: double;
    border-color: #000000;
}

#footer_box img {
    width: auto;
    height: 62px;
}

#footer_text {
    height: 40px;
    width: 1000px;
    padding-bottom: 10px;
    text-align: center;
    font-family: "Mirage";
    color: #c50202;
    border-style: double;
    border-color: #000000;    
}

h1 {
    text-align: center;
    color: #c50202;
    margin: 7px;
    font-family: "Mirage";
}

h2 {
    text-align: center;
    color: #c50202;
    margin: 7px;
    font-family: "Mirage";
}

h3 {
    text-align: center;
    color: #c50202;
    margin: 7px;
    font-family: "Mirage";
}

p {
    margin: 5px;
    padding: 5px 0 5px 0;
}

strong {
    color: #c50202;
}

ul li {
    list-style-image: url(../pixels/cigarette.gif);
    margin-top: 5px;
    margin-bottom: 5px;
    padding-right: 5px;
}

.contain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: hidden;
}
            
.acbutton {
    background-color: #0d0000;
    border: 1px solid #c50202;
    padding: 5px;
    color: #c50202;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
            
.button {
    background-color: #0d0000;
    border: 1px solid #c50202;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin: 10px 0 10px 0;
}

.smallerbutton {
    font-size: smaller;
    background-color: #0d0000;
    border: 1px solid #c50202;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    margin: 7px 0 7px 0;
}

.box {
    background-color: #0d0000;
    border: 1px solid #c50202;
    padding: 5px;
    display: inline-block;
}
            
.journalbox {
    background-color: #0d0000;
    border: 1px solid #c50202;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    overflow-y: auto;
    height: 550px;
    width: 1000px;                
    text-align: left;
}

.title {
    z-index: 0;
}

.imgcontainer {
  display: flex;
  align-items: flex-start;
  max-height: 450px;
}

.lawrenceimg img {
  float: left;
  width: 200px;
  height: 100%;
  z-index: 2;
  position: relative;
  bottom: 50px;
  -webkit-filter: drop-shadow(5px 5px 5px #0d0000);
  filter: drop-shadow(5px 5px 5px #0d0000);
}

.imgtxt {
  padding-left: 20px;
  align-items: flex-start;
}

.mediacontainer {
  display: grid;
  margin: 0 auto;
  grid-gap: 0;
  grid-template:
    "mediatitle mediatxt"
    "mediaimg mediatxt";
}

.mediatitle {
  grid-area: mediatitle;
  height: 40px;
}

.mediaimg {
  grid-area: mediaimg;
  width: 175px;
}

.mediaimg img {
  width: 175px;
  object-fit: contain;
}

.mediaimg img:hover {
  transform: scale(1.1);
}

.mediatxt {
  grid-area: mediatxt;
  float: left;
  padding-left: 20px;
}





            
    /* BELOW THIS POINT IS MEDIA QUERY */

    /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below */

@media only screen and (max-width: 900px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    /* the order of the items is adjusted here for responsiveness!
    since the sidebars would be too small on a mobile device.
    feel free to play around with the order! */
                
    main {
        order: 1;
    }
          
    #leftSidebar {            
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}