* {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica", "Segoe UI", Roboto, Ubuntu;
  font-size: 16px;
  line-height: 1.5em;
}

hr {
  margin: 15px 0px;
  border: none;
  border-width: 0.5px;
  border-style: solid;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

h1 {
  font-size: 28px;
  padding-top: 16px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

.wrapper {
  margin: 16px auto;
  max-width: 800px;
}

header {
  text-align: center;
  padding: 16px;
}

header img {
  width: 64px;
}

header nav {
  margin-top: 16px;
  margin-bottom: 16px;
}

main {
  margin-top: 16px;
}

#content {
  padding: 0px 16px;
}

#blog img {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#blog article {
  margin: 32px 0px;
}

@media (max-width: 599px) {}

@media (min-width: 600px) {}

@media (min-width: 900px) {}

@media (min-width: 1200px) {}

@media (min-width: 1800px) {}


/* light mode colors */

body {
  background: #fff;
  color: #222;
}

hr {
  border-color: #ccc;
}

a {
  color: #2B7DF6;
}

a:hover {
  color: #555BCF;
}

a:visited {
  color: #A35CD7;
}

header {
  background: #efefef;
}

header h1 {
  color: #000;
}


/* dark mode colors */

@media (prefers-color-scheme: dark) {
  body {
    background: #222;
    color: #fff;
  }
  hr {
    border-color: #333;
  }
  a {
    color: #3386F7;
  }
  a:hover {
    color: #5B61DE;
  }
  a:visited {
    color: #B365EA;
  }
  header {
    background: #000;
  }
  header h1 {
    color: #fff;
  }
}

label {
  display: block;
  margin-bottom: 8px;
}

input {
  display: block;
  padding: 8px;
  margin-bottom: 16px;
  font-size: 16px;
}

input.field {
  background: #fff;
  color: #000;
}

input.submit {
  border-width: 4px;
  border-style: solid;
  padding: 8px 16px;
}

input.submit:hover {
  cursor: pointer;
}

input.submit {
  color: #fff;
  background: #2B7DF6;
  border-color: #2B7DF6;
}

input.submit:hover {
  background: #555BCF;
  border-color: #555BCF;
}


/* dark mode colors */

@media (prefers-color-scheme: dark) {
  input.field {
    background: #000;
    color: #fff;
  }
  input.submit {
    color: #fff;
    background: #3386F7;
    border-color: #3386F7;
  }
  input.submit:hover {
    background: #5B61DE;
    border-color: #5B61DE;
  }
}

/* Calendar */
.Grid {
  display: flex;
  flex-wrap: wrap;
}

.Grid-item {
  margin-top: 2%;
  width: 12.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Grid-item:not(:nth-child(7n)) {
  margin-right: 2%;
}

.Grid-item:before {
  content: "";
  float: left;
  padding-top: 100%;
}

.month {
  margin-top: 2%;
  padding: 5%;
  margin-right: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 18rem) {
  .number {
    font-size: 2em;
  }
  .monthNumber {
    font-size: 3em;
  }
}

@media (min-width: 48rem) {
  .number {
    font-size: 3em;
  }
  .monthNumber {
    font-size: 4em;
  }
}

@media (min-width: 62rem) {
  .number {
    font-size: 5em;
  }
  .monthNumber {
    font-size: 6em;
  }
}

.calendar {
  margin: 16px auto;
  max-width: 1000px;
}

/* light theme colors for calendar */
.Grid-item {
  background: #D8D8D8;
}
.Grid-item:nth-child(7n+1) {
  background: #979797;
}
.Grid-item:nth-child(7n) {
  background: #979797;
}
.monthNumber {
  color: #222;
}
.number {
  color: #fff;
}
#placeholder {
  background: white;
}
.Grid-item a:visited {
  color: #fff;
}

/* dark theme colors for calendar */
@media (prefers-color-scheme: dark) {
  .Grid-item {
    background: #333333;
  }
  .Grid-item:nth-child(7n+1) {
    background: #666666;
  }
  .Grid-item:nth-child(7n) {
    background: #666;
  }
  .monthNumber {
    color: #fff;
  }
  .number {
    color: #fff;
  }
  #placeholder {
    background: #222;
  }
  .Grid-item a:visited {
    color: #222;
  }
}