:root {
  --color-orange: oklab(77.183% 0.08323 0.1252);
  --color-yellow: oklab(86.387% 0.00911 0.14489);
  --color-green: oklab(86.577% -0.1241 0.0835);
  --color-purple: oklab(62.305% 0.05129 -0.16692);
  --color-orangepurple: oklab(70.97% 0.07807 0.04625);
  --color-dullpurple: oklab(67.816% 0.04901 -0.14801);
  --color-dullmaroon: oklab(74.066% 0.15999 -0.07855 / 0.5);
  --color-landing-background: oklab(18.255% 0.02184 -0.04872);
}

@import url("adwaita-sans/adwaita-sans.css");

html {
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  padding: 0px;
  color: #cedcff;
  font-family: "Adwaita Sans", sans-serif;
  overflow-x: hidden;
  background: oklab(30.141% 0.0213 -0.05846);
}

body::selection {
  background-color: oklab(74.066% 0.15999 -0.07855 / 0.5);
}

/* Styling for the landing area */

#welcome-section {
  background: var(--color-landing-background);
  width: 100vw;
  height: 100vh;
  background-attachment: fixed;
  text-align: center;
  place-content: center;
  display: grid;
  grid-template-areas:
  'welcome'
  'button';
}

/* Styling for the header */

#welcome-container {
  grid-area: 'welcome';
}

#welcome {
  font-size: 55px;
  text-wrap: nowrap;
}

.welcome-letter {
  transition: 2s ease-out;
}

.welcome-letter:hover {
  transition: initial;
  color: var(--color-orangepurple);
}

/* Styling for the button */

#welcome-button-container {
  grid-area: 'button';
}

#welcome-button {
  padding: 15px;
  background-color: var(--color-purple);
  border-radius: 50px;
  border-style: none;
  transition: 0.1s;
  cursor: pointer;
}

#welcome-button:hover {
  transform: scale(1.2);
  background: var(--color-orange);
}

#welcome-button:active {
  transform: scale(1);
  background: var(--color-green);
}

#button-text {
  font-size: 18px;
  font-weight: bold;
}

#button-arrow-symbol {
  vertical-align: middle;
  padding-left: 5;
}

/* Styling for the content area */

#content-section {
  width: 100vw;
  min-height: 20vh;
  place-content: center;
}

#content-notice {
  text-align: center;
  max-height: 20vh;
}

.content-information-header {
  color: var(--color-yellow);
}


@media (width <=600px) and (height >=674px) {
  #welcome {
    top: 0;
    bottom: 0;
    writing-mode: vertical-rl;
    width: 50%;
  }

  #welcome-section {
    row-gap: 30px;
  }

  #content-section {
    height: 100vh;
  }
}

@media (height <=674px) {
  #welcome {
    text-wrap: wrap;
  }
}