* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  background-color: whitesmoke;
  font-family: monospace;
  text-align: center;
}

::selection {
  color: orange;
}

.center {
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  padding: 1rem 5vw;
}

img {
  max-height: 20vh;
  min-height: 20vh;
  transition: 5s;
}

img:hover {
  transform: rotate(360deg) skew(0deg, 0deg);
  filter: drop-shadow(0px 0px 3px orange);
}

.title {
  transition: 5s;
}

.title:hover {
  transform: scale(3, 0.75);
}

.day {
  transition: 3s;
}

.day:hover {
  margin: 0.25rem;
  transform: skew(0deg, -5deg);
}

summary {
  transition: 5s;
}

summary:hover {
  cursor: default;
  transform: translateY(-0.25rem);
}

p {
  margin: 0;
  padding: 0;
}

a {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: auto-phrase;
}

details {
  transition: 3s;
}

details[open] {
  margin: 0.25rem;
}

.day[open] {
  margin: 1rem;
}

.day[open] .date:hover {
  text-shadow: 0 0 2px orange;
}

footer {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

footer a {
  color: lightgrey;
  text-decoration: none;
}

.year {
  color: orange;
  margin: 1rem 0 0.5rem 0;
}