:root {
  --c-color: black;
  --c-toggle-btn-bg: white;
  --c-toggle-light-stroke: #67676c;
  --c-toggle-light-fill: white;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  --gray2:#bcd3ee;
  --gray4:#454e56;
  --text-color:var(--gray4);
  --tag-bg:var(--gray2);  
}

.dark-theme {
  --c-color: white;
  --c-toggle-btn-bg: black;
  --c-link: #9ebdc3;
}

* {
  box-sizing: border-box;
  font-family: var(--font-family-code);
}

body {
 padding: 10px;
 background-color: white;
 color: black;
}

.dark-theme {
  background-color: #1e232a;
  color: white;
}

.dark-theme a:visited {
  color: #809fff;
}

.tag {
  display: inline-block;
  border-radius: 3px;
  padding: .2em .5em .3em;
  border-radius: 2px;
  background: var(--tag-bg);
  color: var(--text-color);
  font-weight: 600;
  margin: .25em .1em
}

.tag-news {
  background: #eee8bd;
  color: #000
}


/* Style the header */
.header {
  text-align: center;
}

.button {
  border: none;
  background-color: transparent;
  color: var(--c-color);
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #f2f2f2;
  color: black;
}

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

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
  text-align: center;
}

.area.main {
  padding: 10px;
  background-color: #f1f1f1;
}

.area.news {
  padding: 10px;
}

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

/* Style the footer */
.footer {
  padding: 10px;
  text-align: center;
}