/* Style Stuff */
html {
    box-sizing: border-box;
}   
*, *:before, *:after {
    box-sizing: inherit;
}
header, section, footer, aside, nav, article, figure, figcaption {
    display: block;
}
body {
    font-family: 'Nunito', sans-serif;
    background-color: #4279bd;
    margin: 0;
    color: #fceaff;
}
/* Formatting Stuff */
main {
  background-color: white;
  border-color:solid black;
  width: 45%;
  height: 90%;
  text-align:center;
  left:15%;
  top:10px;
}
#container {
  width: 97dvw;
  height: 96dvh;
  margin: .5em;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* Header Row fills for both the Meme in the top left and the header */
.header-row {
    display: flex;
    flex-direction: row;
    height: 10%;
    margin: .2%;
    gap: .2%; /* makes a gap between all content in the header row (no margins needed for content) */
}
.headermeme { /*Image container left of the header */
    width: 10%;
    object-fit:fill;
    display: flex;
    flex-shrink: 0;
  border-collapse: collapse;
  border-width: 5px;
  border-style:solid;
  border-color: #020c0f;
    overflow: hidden;
}
.memeimage { /*Image left of the header. Image size should be 200x100 */
  width: 100%; 
  height: auto;
}
.memeimage:hover {
  filter: hue-rotate(320deg) saturate(100%);
}
header { /*header inside header row*/
    flex: 1; /* based on width of headermeme */
    padding: .2%;
    gap: .2%;
    display: flex;
    position:relative;
    justify-content: flex-start;
    align-items: center;
      overflow-x:auto;
      overflow-y: hidden;
    flex-shrink: 0;
     border-width: 5px;
  border-style:dotted;
  border-color: #32a1ce;
  background-color: rgb(6, 29, 29, .4);
} 

/* middle row fills for both the navigation and content on a page*/
.middle-row {
  display: flex;
  flex-direction: row;
  flex: 1; /* Takes remaining space */
  min-height: 0; /* Prevents flex overflow issues */
  margin: .2%;
  gap: .2%; /* makes a gap between all content in the middle row (no margins needed for content) */
}

/* Navigation Stuff */
nav {
  flex: 0 0 10%;
  display: flex;
  flex-shrink: 0;
  position:relative;
}
.navbar {
  display: flex;
  object-fit:fill;
  border-collapse: collapse;
  position:relative;
  border-width: 5px;
  border-style:dotted;
  border-color: #32a1ce;
  overflow:auto;
  background-color: rgb(6, 29, 29, .4);
}
.navcell {
  flex: 1; /* Aligns columns evenly across rows */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  height: 100%;  
}
.navcell:hover {
  filter: hue-rotate(320deg) saturate(100%);
}

/* Content Stuff */
#content { /* contains main body */
  flex: 1; /* based on width of nav */
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
  overflow: auto;
  padding: .2%;
  gap: .2%;
  background-color: rgb(6, 29, 29, .4);
}
.article1 { /* contains the selfportrait and annotation */
  flex: 1; 
  min-width: 30%; 
  border: none;
  padding: .5em;
}

/* Footer Stuff */
footer {
    border: 2px solid black;
    margin: .2%;
    height: 5%;
    flex-shrink: 0; 
    display: flex;
     border-width: 5px;
    justify-content: flex-start;
    align-items: center;
  border-style:solid;
  border-color: #020c0f;
  background-color: rgba(0, 0, 0, 0.6);
  overflow:hidden;
}
.NeoButton { /* class for all buttons in the footer */
  height:90%;
  width: 5vw;
}

/* Random Classes */
.Blog {
  width: 1100px;
  border:2px Solid Black;
  background-color: Black;
  color: pink;
  display: grid;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 20px 10%;
}
.dropbtn {
  background-color:black;
  font-size: 16px;
  color:#4279bd;
  border: none;
  cursor: pointer;
}
.active, .dropbtn:hover {
  background-color: #ddd;
  color: black;;
}
.content {
  display: none;
}