@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;600&family=Notable&family=Raleway&family=Righteous&display=swap");

body {
  background-color: #ba2d0b;
  font-family: "Raleway", sans-serif;
}
.main {
  transform: skewY(15deg);
  margin-left: 22vw;
}
img {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
}
#caterpillar {
  width: 15vw;
}
#spacer {
  /* no cutoff above, no blur below */
  height: calc(40vw * tan(15deg));
  /* background-color: black; */
}
h1 {
  color: white;
  font-size: 350%;
}
#btn {
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  text-decoration: none;

  border-style: solid;
  border-width: 2px 4px 3px 2px;

  color: black;
  font-size: 150%;
}

.container {
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  outline: 3px solid black;
  max-width: 70vw;
  /* overflow-wrap: break-word; */
}
#contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
#contacts a {
  display: block;
  padding-bottom: 15px;
  color: blue;
  font-size: 150%;
  word-break: break-all;
}
#contacts p {
  font-size: 150%;
}

@media screen and (max-width: 1248px) {
  #contacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 820px) {
  #contacts {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}