.default-font {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.container {
  display: grid;
  height: 500px;
  background-color: #22333B;
  text-align: center;
  border-radius: 15px;
  grid-template-columns: auto auto auto;
  gap: 10px;
  padding: 10px;
}

.container p {
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  font-weight: 100;
  color:#EAE0d5;
  align-self: center;
  padding: 20px;
}

.container a {
  color: #EAE0d5;
  text-align: center;
  text-decoration: none;
}

.container h1 {
  font-family: "Rubik", sans-serif;
  font-size: 80px;
  font-weight: bold;
  grid-column: 1 / span 3;
  color: #EAE0d5;
}

.container div {
  font-family: "Rubik", sans-serif;
  width: 100px;
  transition: font-size 0.5s;
  font-size: 20px;
  color:#EAE0d5;
  align-self: end;
  justify-self: center;
  padding: 20px;
}

.container div:hover {
  font-size: 22px;
}

.scrollable {
  transition: all 2s;
}

.scrollable.hide{
  transition: all 1s;
  opacity: 1;
}

.shrink.hide {
  opacity: 0;
}

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 10px;
}

div.shrink {
  height: 40px;
}

h1.shrink {
  margin: 8px;
  font-size: 20px;
}

#container div {transition-timing-function: ease;}
#container h1 {transition-timing-function: ease;}