/* aliases for imgs/colors */
:root {
  --header-image: url('https://eriselizabeth.net/moonstars.png');
  --body-bg-image: url('https://eriselizabeth.net/moonstars.png');

  /* colors */
  --lshadow: #2d2325;
  --mshadow: #18141A;
  --black: #060606;
  --mrose: #9769BF;
  --lrose: #Bpp0F5;
  --light: #C1AEF2;
  /* accents */
  --plum: #7a3933;
  --gold: #D9834E;
}


/* used for h1 text */
@font-face {
  font-family: 'Berolina';
  src: url('https://eriselizabeth.net/Condiment-Regular.ttf');
}

/* used for h2/h3 text */
@font-face {
  font-family: Della Respira;
  src: url('https://eriselizabeth.net/DellaRespira-Regular.ttf')
}

body {
  font-family: Georgia, serif;
  line-height: 1.6;tab
  margin: 0;
  background-color: #000;
  color: var(--light);
  background-image: var(--body-bg-image);
}

* {
  box-sizing: border-box;
}

/* below this line is CSS for the layout */

/* the "container" is what wraps your entire website */
#container {
  max-width: 900px;
  /* if you change the above value, scroll to the bottom
  and change the media query according to the comment! */
  margin: 0 auto;
  /* this centers the entire page */
}

/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
  color: var(--mrose);
  font-weight: bold;
}

#container a:hover {
  color: var(--lrose);
  font-weight: bold;
}

/* header */
#header {
  display: flex;
  width: 100%;
  background-size: 100%;
  border-bottom: 2px solid var(--mrose);
  justify-content: center;
  margin-top: 10px;
}

tulip {
  display: grid;
  align-content: end;
  padding: 20px;
}

eristitle {
  line-height: 3.5em;
}

/* navigation */
nav {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--mrose);
}

nav .navlink {
  display: inline-block;
  margin: 10px 5px;
  padding: 2px;
  font-size: 1.2em;
  text-decoration: none;
  font-family: Georgia, serif;
  font-weight: bold;
}

#flex {
  display: flex;
}

/* main content box */
main {
  background-color: var(--black);
  flex: 1;
  padding: 20px;
  order: 2;
  border: 5px var(--mrose) double;
}

footer {
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: small;
  color: var(--mrose);
  line-height: 1em;
}

h1 {
  color: var(--light);
  text-align: center;
  font-family: Berolina, Times New Roman, serif;
  margin: 15px;
  line-height: 1em;
  letter-spacing: 1px;
  font-size: 60px;
}

h2,
h3 {
  color: var(--gold);
  text-align: center;
  font-family: Della Respira, Times New Roman, serif;
  margin: 15px;
  line-height: 1.2em;
  border-bottom: 1px solid var(--mrose);
  padding-bottom: 10px;
}

h2 {
  font-size: 40px;
} 

h3 {
  font-size: 30px;
} 

h4 {
  font-size: 20px;
  color: var(--mrose);
  text-align: center;
  font-family: Della Respira, Times New Roman, serif;
  margin: 10px;
  border-bottom: 1px solid var(--mrose);
}

img {
  max-width: 100%;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-self: center;
  align-content: center;
  width: 100%;
}

#diana {
  align-self: center;
}

/* update box */
#updates {
  background-color: var(--black);
  width: 30%;
  min-height: 250px;
  min-width: 200px;
  margin: 10px;
  align-self: self-end;
  border: 1px solid var(--mrose);
}

#cell {
  text-align: center;
  align-self: flex-end;
  margin: 10px;
}

/* where updates actually go*/
.frame {
  height: 180px;
  width: 235px;
  margin: 10px;
  border: none;
}

/* smaller intro text for ambience */
.intro {
  font-size: small;
  font-style: italic;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--mrose);
}

/* hacky way of getting images to center */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.gallery {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 70%;
  border: 1px solid var(--mrose);
}

/* external link table */

table.links {
  width: 70%;
  margin: 10px auto 10px auto;
  border-collapse: collapse;
  border: solid 1px var(--mrose);
}

table.links td {
  border: solid 1px var(--mrose);
  padding: 5px;
}

table.links tr:nth-child(odd) {
  background-color: #18141A;
}

#sitename {
  text-align: center;
}

#sitedesc {
  width: 70%;
  font-size: small;
  line-height: 1.6;
}

/* for firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--mrose) var(--black);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--black);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--mrose);
  border-radius: 10px;
  border: 1px none #ffffff;
}

/* button for gallery select */

nav2 ul {
  width: 90%;
  margin: 5px auto 5px auto;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav2 li {
  list-style: none;
  font-family: Della Respira, sans-serif;
  font-weight: bold;
  font-size: 35px;
  text-align: center;
  background-color: var(--black);
  color: var(--mrose);
  border: 1px var(--mrose) solid;
  margin: 5px;
  padding: 10px;
  cursor: pointer;
  opacity: 0.9;
  width: 30%;
  flex: auto;
  align-self: center;
}

nav2 li:hover {
  opacity:1;
}

nav2 a {
  display: block;
  color: var(--lrose);
  text-decoration: none;
}

/* gallery for art */
gallery {
  display: flex;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 49%;
  max-width: 49%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* 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;
  }

  #container {
    max-width: 90%;
  }

  main {
    width: 100%;
    order: 1;
  }

  .flex-container {
    flex-direction: column;
  }

  #updates {
    width: 80%;
    height: 300px;
    align-self: center;
  }

  .frame {
    width: 95%;
    height: 220px;
  }

  #cell {
    align-items: center;
    width: 100%;
  }

  /*  #cell img {
  width: 120px;
} */

  .yw-body {
    width: 80%;
  }

  table.links {
    width: 95%;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
  .column {
    flex: 49%;
    max-width: 49%;
    padding: 0 2px;
  }

  .row {
    padding: 0 2px;
  }

  .column img {
    margin-top: 4px;
  }

}

@media only screen and (max-width: 600px) {

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  .column {
    flex: 100%;
    max-width: 100%;
  }

  #container {
    max-width: 90%;
  }

  #header {
    flex-direction: column-reverse;
  }

  #header h1 {
    font-size: 50px;
  }

  tulip {
    padding: 10px;
    margin-top: -10px;
  }

  #second {
    display: none;
  }

  figure {
    width: 80%;
  }

  figure img {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 96px;
    height: 100px;
    image-rendering: pixelated;
  }

  nav2 ul {
    flex-direction: column;
  }

  nav2 li {
    width: 75%;
  }

}