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

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 0;
}

/* Fonts */
@font-face {
  font-family: 'JohnnyFont';
  src: url('/fonts/JohnnyFont.ttf') format('truetype'), url('/fonts/JohnnyFont.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'JohnnyFont', sans-serif;
}

.view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10%;
  height: 100vh;
  width: auto;
  position: relative;
  padding: 20px;
}

.view h1 {
  font-size: 200px;
  font-weight: 300;
  letter-spacing: 5px;
  text-align: center;
}

@media (max-width: 450px) {
  .view h1 {
    font-size: 100px;
  }
}

.view nav {
  width: 100%;
  max-width: 600px;
}

.view nav ul {
  display: flex;
  justify-content: center;
  gap: 20%;
  margin-top: 20px;
}

.view nav ul li a {
  text-decoration: none;
  font-size: 50px;
  font-weight: 300;
  transition: all 0.3s;
  color: inherit;
}

.view nav ul li a:hover {
  font-size: 60px;
}

.view.january {
  background-color: #d0dff1;
  color: #8cc7e3;
}

.view.february {
  background-color: #ffcae1;
  color: #fa0000;
}

.view.march {
  background-color: #2d4e3c;
  color: #8dc3de;
}

.view.april {
  background-color: #a8a8d7;
  color: #d45157;
}

.view.may {
  background-color: #9f9a96;
  color: #f4f1eb;
}

.view.june {
  background-color: #dfae3f;
  color: #ffff00;
}

.view.july {
  background-color: #ff8b03;
  color: #727880;
}

.view.august {
  background-color: #501d40;
  color: #ff8b03;
}

.view.september {
  background-color: #5d350b;
  color: #ff3131;
}

.view.october {
  background-color: #161616;
  color: #ff8b03;
}

.view.november {
  background-color: #1c2143;
  color: #2f5972;
}

.view.december {
  background-color: #b9c8e0;
  color: #ff3131;
}