/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Colors: #EFD9CE - pale pinkish beige; #CEA2AC - rosy taupe; #A675A1 - light purple; #8F3985 - grape soda; #25283D - space indigo */
body {
  background: #A675A1;
  min-height: 100vh;
  color: #25283D;
  font-family: Verdana;
  font-size: 12px;
}
/* Ensure proper sizing */
* {
  box-sizing: border-box;
}

/* Column container */
.row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin-right: 50px;
  margin-left: 50px;
  height: 75vh;
}

.sidenav {
  flex: 15%; 
  padding: 20px;
  background-color: #EFD9CE;
  color: #25283D;
  border-radius: 10px;
  outline-style: solid;
  outline-color: #CEA2AC;
  outline-width: 3px;
  text-align: center;
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.sidenav a {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 6px;
  gap: 10px;
  margin: 10px;
  text-align: center;
  align-content: center;
  align-items: center;
  justify-content:center;
  color: #25283D;
  outline-color: #CEA2AC;
  outline-style: solid;
  border-radius: 10px;
  text-decoration: none;
}

.sidenav a:hover {
  color: #8F3985;
  background: #CEA2AC;
}

.main {
  flex: 70%; 
  background-color: #EFD9CE; 
  padding: 20px;
  border-radius: 10px;
  outline-style: solid;
  outline-color: #CEA2AC;
  outline-width: 3px;
  overflow: auto;
}

.side2 {
  flex: 15%; 
  padding: 5px;
  background-color: #EFD9CE;
  color: #25283D;
  border-radius: 10px;
  outline-style: solid;
  outline-color: #CEA2AC;
  outline-width: 3px;
  display: flex;
  flex-flow: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.Updates {
  flex: 1;
  padding: 10px;
  background-color: #EFD9CE;
  color: #25283D;
  border-radius: 10px;
  outline-style: solid;
  outline-color: #CEA2AC;
  outline-width: 3px;
  overflow: scroll;
}

.Buttons {
  flex: 1;
  padding: 10px;
  background-color: #EFD9CE;
  color: #25283D;
  border-radius: 10px;
  outline-style: solid;
  outline-color: #CEA2AC;
  outline-width: 3px;
  overflow: scroll;
}

.entrylist {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
  padding: 5px;
  gap: 10px;
  width: 100%;
  height: 87%;
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: flex-end;
}

.entrylist a{
  text-decoration: none;
}

.entry {
  flex: 1;
  color: #25283D;
  border-radius: 10px;
  outline-style: solid;
  outline-color: #CEA2AC;
  outline-width: 3px;
  padding: 3px;
}

.entry h3 {
  font-size: 2vh;
}

.header {
  padding: 25px; 
  text-align: center; 
  background-color: #EFD9CE;
  color: #25283D;
  border-radius: 10px;
  outline-style: solid;
  outline-color: #CEA2AC;
  outline-width: 3px;
  margin: 25px 50px 15px;
}

/* Increase the font size of the <h1> element */
.header h1 {
  font-size: 4vh;
  font-family: 'Homemade Apple';
}

.main h2 {
  font-size: 3vh;
  font-family: 'Homemade Apple';
  margin: 0px;
  text-align: center;
  overflow: scroll;
}

@media (max-width:700px) {
      .row{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        height:auto;
        
      }
      .sidenav a{
        display: inline-flex;
        flex-direction:row;
        gap:1vh;
        margin:0.25vh;
        align-items:center;
        justify-content:center;
        max-width: 5vh;
        
      }
      .sidenav{
        flex-direction: row;
        display: inline-flex;
        width:100%;
        align-items:center;
        justify-content:center;
      }
      .side2{
        flex-direction:column;
        flex:1;
        width:100%;
        align-items:center;
        justify-content:center;
        align-content:center;
      }
      .main{
        width:100%;
        height:100%;
        overflow:auto;
      }
      .header h1 {
        font-size: 3vh;
        font-family: 'Homemade Apple';
      }
      .main h2 {
        font-size: 2vh;
        font-family: 'Homemade Apple';
        margin: 0px;
        text-align: center;
        overflow: scroll;
      }
    }