/* ==========================
   1. UNIVERSIAL STYLES
========================== */

/* Basics 1rem= 16px*/
* {
  margin: 2px;
  padding: 2px;
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/*Keeps CSS variables inside here*/
:root{
 --primary-color: green;
}

body {
  text-size-adjust: 5em;
  background-color: #F3EBE3;
}

a:link {
  color: #259090;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #ffc0cb;
  background-color: transparent;
  text-decoration: none;
}

a:hover,
a:focus {
  color: red;
  background-color: transparent;
}

a:active {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}

/* ==========================
   2. LAYOUT
========================== */
/* =============
   2.2 Index LAYOUT
===============*/
#flex-container {
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 95vh;
}

#index-container {
  display: grid;
  grid-template-columns: repeat(2, 21.875rem);
  grid-template-rows: 4rem 27.80rem 1rem;
  grid-template-areas:
  "index-image ."
  "index-image index-text"
  "index-image .";
  background-color: #ee5d75;
  border: 2px solid black;
  border-style:dashed;
  width: 43.75rem;
  height: 33.12rem;
}

#index-img {
  width: 21.775em;
  height: 32em;
  grid-area: index-image;
}

#index-right{
  text-align: center;
  align-content:start;
  grid-area: index-text;
}

#index-h {
  font-size: 1.5em
}

#index-t {
  margin-left: 3em;
  margin-right: 3em; 
}
#index-link{
  grid-area: index-link;
}
 
#index-footer {
  background-color: yellow;
  text-align: center;
  grid-area: footer;
}

/* ============
   2.1 Homepage LAYOUT
================*/
.container {
  display: grid;
  row-gap: 5px;
  columns: 4px;
  grid-template-columns: 1.25rem 1fr 6fr 1fr 1.25rem;
  grid-template-rows: 1.25rem 1fr 20fr 1fr 1.25rem;
  grid-template-areas:
    ". . . . ."
    ". header header header ."
    ". leftside main-content rightside ."
    ". footer footer footer ."
    ". . . . .";
  padding: 2.25rem;
  padding-left: 6.25rem;
  padding-right: 6.25rem;
}

.main-content {
  background-color: #ffc0cb;
  grid-area: main-content;
  text-align: center;
  display: grid;
  row-gap: 0.3125em;
  column-gap: 0.25em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "n n n n n"
    "p m m m m"
    "v v p p p"
    "b b h h h";
}

.main-content-item{
  border: 2px soild black;
  background-color: var(--primary-color);
  grid-area:v;
}

.main-content-item{
  border: 2px soild black;
  background-color: var(--primary-color);
  grid-area:p;
  font-size: 2em;
}

.header {
  background-color: purple;
  grid-area: header;
  text-align: center;
}

.footer {
  background-color: yellow;
  grid-area: footer;
  text-align: center;
}

.leftsidebar {
  background-color: red;
  grid-area: leftside;
  display: flex;
  flex-direction: column;
  min-width: fit-content;
  text-align: center;
  align-items: center;
}

.rightsidebar {
  background-color: blue;
  grid-area: rightside;
  display: flex;
  flex-direction:column;
  align-items: stretch;
  text-align: center;
}

#update-logs {
  background-color: bisque;
  overflow-y: scroll;
  height: 25rem;
  text-align: center;
  background-color: aqua;
}

#to-do-list {
  background-color: aqua;
  overflow-y: scroll;
  height: 25rem;
  text-align: center;
}

#sideitems{
  background-color: greenyellow;
}

/* ==========================
   4. Diary
========================== */

#diary {
  display: flex;
  flex-flow: column wrap;
}

.entry h2 {
  color: #000000;
  font-size: 160%;
  margin: 10px, transparent;
}

.entry p {
  color: #000000;
  font-size: 0.90em;
  border: solid rgb(238, 184, 114);
  border-width: 10px 10px 10px 35px;
  border-radius: 2px;
  padding: 15px;
  text-align: left;
  overflow: auto;
}

/* ==========================
   5. Homepage Compotents
========================== */

.sidenav {
  padding: 10px;
  width: max-content;
  background-color: aliceblue;
}

.sidenav>ol {
  border: 1px solid rgb(149, 162, 158);
  background-color: #2a2a2a;
}

.sidenav a:hover,
.sidenav a:focus {
  color: white
}