@font-face {
  font-family: "Doto";
  src: url("Doto/Doto-VariableFont_ROND\,wght.ttf");
}

@font-face {
  font-family: "Montserrat";
  src: url("Montserrat/Montserrat-VariableFont_wght.ttf");
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
}

nav {
  margin: 0%;
  padding: 0;
  padding-left: 1rem;
  top: 0%;
  left: 0%;
  position: static;
  display: flex;
  background-color: #adebb3;
  width: 100%;
}

.center {
  margin: 0%;
  width: 100%;
  display: flex;
  justify-content: center;
}

nav h1 {
  color: white;
  font-size: 2rem;
}

h1.title {
  font-family: "Doto";
  font-weight: 1000;
}

h1 {
  font-family: "Montserrat";
  font-size: 3rem;
  /* font-weight: 800; */
}

p {
  font-family: "Montserrat";
  font-size: 2rem;
  /* font-weight: 800; */
}

p,
li {
  overflow-wrap: break-word; /* Allows long words/emails to wrap */
  word-break: break-word; /* Extra support */
}

ul {
  list-style: none;
}

li {
  font-family: "Montserrat";
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

li small {
  font-weight: normal;
}

button {
  font-family: "Montserrat";
  background-color: #189e2f;
  color: white;
  font-size: 2rem;
  border-color: black;
  border-width: 3px;
  padding: 10x;
  border-style: solid;
  font-weight: bold;
  border-radius: 20px;
  transition: 400ms;
}

button:hover {
  cursor: pointer;
  background-color: #2ed93f;
  transform: scale(110%);
}

button:active {
  transform: scale(95%);
  background-color: #29c839;
}

footer {
  margin: 0%;
  margin-top: 5rem;
  bottom: 0%;
  left: 0%;
  display: block;
  background-color: #2f2f2f;
  width: 100%;
}

footer h1 {
  color: rgb(219, 219, 219);
  font-size: 2rem;
  margin: 0.4rem;
}
footer p {
  color: rgb(219, 219, 219);
  font-size: 1rem;
  margin: 0.4rem;
}

footer a {
  color: rgb(219, 219, 219);
}