@font-face {
  font-family: "rainyhearts";
  src: url("https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf") format("truetype");
}

@font-face {
  font-family: "winkle";
  src: url("https://dl.dropbox.com/s/mes7b666uvig5wc/Winkle-Regular.otf") format("truetype");
}

@font-face {
  font-family: "bubbly";
  src: url("https://angeliic.neocities.org/Bubbly-Regular.otf") format("opentype");
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "winkle";
  background-image: url("https://i.pinimg.com/736x/a1/7f/a9/a17fa906ee8de76212ded6b350669393.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f4f4f4;
  color: #333;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.enter_button {
  background: transparent;
  color: #ff90bb;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 50px;
  font-weight: bold;
  text-decoration: none;
  font-family: "rainyhearts";
  opacity: 0;
  animation: fadeIn 1.5s ease forwards;
}

.enter_button:hover {
  font-size: 54px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .enter_button {
    font-size: 28px;
  }
}