*,
*::before,
*::after {
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", sans-serif;
  box-sizing: border-box;
  margin: 0;
}

:root {
  color-scheme: dark;
  --primary-clr: 168, 80, 255;
  --red: hsl(0, 75%, 50%);
  --green: hsl(100, 75%, 50%);
}

html {
  min-height: 100vh;
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #333;
  /* background-image: linear-gradient(-30deg, skyblue, aquamarine); */
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
}

section:nth-child(1) {
  display: flex;
}

section:nth-child(1) .heading::before {
  content: "EdBud: ";
  text-shadow: none;
  background: -webkit-linear-gradient(
    10deg,
    rgb(185, 115, 255) 60%,
    rgb(160, 65, 255)
  );
  font-size: 1.2em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section:nth-child(1) .heading {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.75);
  display: inline;
  font-size: 3.75em;
  color: white;
  font-weight: bold;
  transform: translate(10%) skew(-10deg);
  text-transform: uppercase;
}

section:nth-child(1) > * {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

section:nth-child(1) .edbud {
  aspect-ratio: 3 / 4;
  width: 300px;
  background-color: silver;
  border-radius: 0.5em;
  transform: skew(-10deg, 5deg);
}

section:nth-child(1) .edbud::after {
  content: "EdBud";
  font-family: Rubik;
  display: grid;
  place-items: center;
  color: rgb(var(--primary-clr));
  font-weight: bold;
  font-size: 2.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 85%;
  background-color: aliceblue;
}

section:nth-child(1) .edbud::before {
  content: "";
  width: 8%;
  aspect-ratio: 1;
  background-color: silver;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
}

section:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 10em;
  overflow: hidden;
}

section:nth-child(2) > * {
  z-index: 5;
}

section:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -65%) rotate(-5deg);
  background-color: rgb(var(--primary-clr));
  width: 200%;
  height: 65%;
}

section:nth-child(2) > .heading {
  font-size: 2em;
  color: white;
  padding: 3em 0;
}

section:nth-child(2) > p {
  color: white;
  line-height: 1.6;
  font-size: 1.3em;
  text-indent: 2em;
  font-weight: light;
}

.problem-grid {
  padding: 5em 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  position: relative;
  z-index: 10;
}

.problem-grid__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0;
  z-index: -1;
  font-size: 4.5em;
  font-family: Kanit, cursive;
}

.problem-grid__bg > *:nth-child(1) {
  color: var(--red);
}

.problem-grid__bg > *:nth-child(2) {
  color: gray;
}

.problem-grid__bg > *:nth-child(3) {
  color: var(--green);
}

.problem-container {
  position: relative;
  cursor: pointer;
  color: white;
  font-size: 1.1em;
}

.problem-container > * {
  padding: 2em 1.5em;
  border-radius: 1.5em;
  text-align: center;
}

.problem {
  background-color: var(--red);
  transform: translateY(-100%);
  box-shadow: 0 0 3px 0 var(--red);
}

.solution {
  background-color: var(--green);
  transform: translateY(0) scaleY(-1);
  transition: transform 200ms ease-out;
}

.problem-container:hover > .solution {
  transform: translateY(100%) scaleY(1);
  box-shadow: 0 0 5px 1px var(--green);
}

section:nth-child(4) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em 0;
  gap: 5em;
  justify-content: center;
}

section:nth-child(4) > .heading {
  color: white;
  font-size: 4em;
}

.contact-form {
  border: 3px solid rgb(var(--primary-clr));
  border-radius: 0.5em;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  font-size: 1.1em;
  color: white;
  padding: 3em;
  box-shadow: 0 0 5px 2px rgba(var(--primary-clr), 0.75);
}

.contact-form input,
.contact-form textarea {
  resize: none;
  background: none;
  color: white;
  border: 1px solid rgb(var(--primary-clr));
  border-radius: 0.25em;
  padding: 0.5em;
  font-size: 1em;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
}

/* message container */
.input-container:nth-child(3) {
  grid-column: 1 / span 2;
}

#contact-sbmt-btn {
  grid-column: 1 / span 2;
  background-color: rgb(var(--primary-clr));
  color: white;
  border-radius: 0.5em;
  border: none;
  margin: 1em;
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 200ms linear;
}

#contact-sbmt-btn:hover {
  background-color: color-mix(
    in srgb,
    rgb(var(--primary-clr)),
    rgb(50, 50, 50)
  );
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.shortcuts {
  position: fixed;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1em;
  z-index: 100;
}

.shortcut {
  background-color: white;
  border-radius: 50%;
  aspect-ratio: 1;
  width: 1em;
  cursor: pointer;
  transition: background-color 150ms, transform 150ms;
}

.shortcut:hover {
  filter: brightness(150%);
  transform: scale(1.25);
}

#copyright {
  margin: auto;
  margin-bottom: 10px;
  opacity: 0.9;
}