main.css

:root {
    --grey: #D5D8DC;
    --white: #ffffff;
    --dark_grey: #383838;
    --black: #000000; 
    --middle_grey: #868686; 
  }

  * {
    color: var(--fontColor);
    font-family: Monospace, Monaco;
  }
  body {
      background: var(--bg);
  }

ul {
    font-family: helvetica;
}

li {
    list-style: circle;
  }
    .list {
    list-style: square;
  }
  .light-theme {
    --bg: var(--white);
    --fontColor: var(--black);
    --btnBg: var(--dark_grey);
    --btnFontColor: var(--white);
    --background: var(--grey);
  }
  .dark-theme {
    --bg: var(--dark_grey);
    --fontColor: var(--white);
    --btnBg: var(--grey);
    --btnFontColor: var(--black);
    --background: var(--middle_grey);
  }

/* Style the navigation bar */
.navbar {
    width: 100%;
    background-color: #555;
    overflow: auto;
    margin-bottom: 15px;
  }

  /* Navbar links */
  .navbar a {
    float: left;
    text-align: center;
    padding: 8px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 17px;
  }
  .btn {
    position: absolute;
    border: none;
    text-align: center;
    color: var(--btnFontColor);
    background-color: var(--btnBg);
  }
  .btn:focus { outline-style: none; }

  
  /* Navbar links on mouse-over */
  .navbar a:hover {
    background-color: #000;
  }
  
  /* Current/active navbar link */
  .active {
    background-color: #04AA6D;
  }
  
  /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
  @media screen and (max-width: 500px) {
    .navbar a {
      float: none;
      display: block;
    }
  }

.header {
  background-color: var(--background);
  text-align: center;
  padding: 20px;
}

.footer {
  background-color: var(--background);
  text-align: left;
  padding: 20px;
  margin-top: 15px;
}

/* Create two unequal columns that floats next to each other */
.column {
  padding: 10px;
  float: left;
}

/* Left column */
.column.side {
  width: 74.8%;
  background-color: var(--background);
  padding: 10px;
  margin-right: 10px;
  height: 262px;
}

/* Right column */
.column.middle {
  width: 20%;
  background-color: var(--background);
  padding: 20px;
  height: 262px;
}

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

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}