:root {
  --bulma-primary-h: 206deg;
  --bulma-primary-s: 70%;
  --bulma-primary-l: 90%;
  --bulma-body-background-l: 9%;
  --bulma-body-background-color: hsla(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-body-background-l),
    100
  );
  --bulma-scheme-h: var(--bulma-primary-h);
  --bulma-scheme-s: var(--bulma-primary-s);
  --bulma-scheme-main-l: calc(min(100%, var(--bulma-body-background-l) + 30%));
  --bulma-text-strong-h: var(--bulma-primary-h);
  --bulma-text-strong-s: var(--bulma-primary-s);
  --bulma-text-strong-l: var(--bulma-primary-l);
  --bulma-navbar-background-hover-color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    calc(min(100%, var(--bulma-body-background-l) + 5%))
  );
}

html {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}

.home-main {
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page-main {
  min-height: calc(80vh - 2px);
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr; /* One column with equal width */
  gap: 7vh; /* Gap between vertical items */
}

.home-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

.entry-btn-container {
  width: 250px;
}

.message-body {
  width: 240px;
  height: 250px;
}

nav {
  height: 10vh;
  display: flex;
  flex-direction: row;
  padding-left: calc(40vw - 130px);
  margin-left: 10px;
  background-color: var(--bulma-body-background-color);
}

.navbar-item {
  display: flex;
  align-items: center;
  font-size: 1.5em;
  background-color: var(--bulma-body-background-color);
  color: var(--bulma-scheme-main);
}

.navbar-item:hover {
  background-color: var(--bulma-body-background-color);
  color: var(--bulma-primary);
}

hr {
  padding: 0;
  margin: 0;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.336),
    rgba(255, 255, 255, 0)
  );
}

.title {
  padding-top: 30px;
  padding-bottom: 20px;
}

footer {
  display: flex;
  height: 10vh;
  align-items: end;
  justify-content: center;
  padding-bottom: 10px;
}