@import url("https://fonts.googleapis.com/css2?family=Gulzar&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap");

:root {
  --font-formal: "Scheherazade New", serif;
  --font-style: "Gulzar", serif;

  --theme-clr: rgb(10, 39, 37);
}

* {
  font-family: var(--font-style);
}

html {
  font-size: clamp(12px, 2vw, 18px);
  list-style-type: none;
  color: blanchedalmond;
}

h1 {
  font-size: clamp(16px, 2.5vw, 27px);
}

body {
  overflow-x: hidden;
  position: relative;
  display: block;
  background-color: var(--theme-clr);
}

header {
  position: sticky;
  top: 0px;
  z-index: 5;
}

nav {
  color: rgb(0, 238, 255);
  background-color: var(--theme-clr);

  & h1 {
    font-weight: 400;
  }

  &.navbar {
    display: flex;
    width: 100vw;

    margin: auto;
    justify-content: space-around;
    align-items: center;

    & .brand {
      font-size: 2.5rem;
    }

    & .menubar {
      display: flex;
      gap: 2vw;
      list-style-type: none;
      padding-inline-start: 0;

      @media screen and (max-width: 444px) {
        display: none;
      }
    }
    & .candy {
      display: none;

      @media screen and (max-width: 444px) {
        display: inline-block;
      }
    }
  }
}

a {
  text-decoration: none;
  color: rgb(226, 183, 89);
}

.spacer {
  height: 100px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  font-size: 0.8rem;
  text-align: center;
}

.http404 {
  height: 100%;
}

.hero {
  display: block;

  height: 95%;

  & > div {
    position: relative;

    & img {
      position: absolute;
      overflow-x: hidden;
    }

    & p {
      position: absolute;
      font-size: large;
    }

    &.bubble1 {
      display: block;
      height: 500px;
      overflow-x: hidden;

      & img {
        right: 0px;
      }

      & p {
        top: 157px;
        right: 106px;
      }
    }

    &.bubble2 {
      display: block;
      height: 700px;
      overflow-x: hidden;

      & p {
        top: 160px;
        left: 62px;
      }
    }

    &.bubble3 {
      display: block;
      height: 700px;
      overflow-x: hidden;

      & p {
        top: 156px;
        left: 116px;
      }
    }

    &.bubble4 {
      display: block;
      height: 700px;

      & img {
        right: -45px;
      }

      & p {
        top: 170px;
        right: 28px;
      }
    }

    &.bubble5 {
      display: block;
      height: 700px;

      & p {
        top: 148px;
        left: 93px;
      }
    }

    &.bubble6 {
      display: block;
      height: 700px;

      & img {
        right: -33px;
      }

      & p {
        top: 159px;
        right: 64px;
      }
    }

    &.bubble7 {
      display: block;
      height: 700px;

      & p {
        top: 169px;
        left: 53px;
      }
    }
  }
}

.topics {
  margin: 5vh;

  & .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5vw;
    font-size: smaller;
    margin: auto;

    & * {
      list-style-type: none;
      padding-inline-start: 0;

      & p {
        font-weight: 600;
      }

      & li {
        font-style: italic;
      }
    }
  }
}

.get-started {
  padding-bottom: 10vh;
  margin: auto;
  width: 80%;
  text-align: center;

  & p {
    text-align: center;
  }

  & input[type="text"] {
    width: 75vw;
    border-radius: 50px;
    padding: 0.5rem;
    background-color: var(--theme-clr);
    border: 1px solid white;
    color: white;

    &::placeholder {
      padding-left: 1.8rem;
    }
  }
}