@import url("https://fonts.googleapis.com/css2?family=Mukta&family=Nova+Square&family=Roboto&display=swap");

@font-face {
  font-family: "Paint Drops";
  src: url("../fonts/PaintDropsRegular-0WaJo.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --primary-color: #e70000;
  --secondary-color: #c50000;
  --text-color: #fffdef;
  --background-color: #f1f1f1;

  /* Font */
  --font-family-main: "Paint Drops";
  --font-family-primary: "Mukta", sans-serif;
  --font-family-secondary: "Roboto", sans-serif;

  --heading-1: 2rem;
  --heading-2: 1.5rem;
  --font-size: 16px;

  /* Spacing */
  --spacing-unit: 8px;
  --container-padding: 20px;

  /* Breakpoints */
  --mobile: 767px;
  --tablet: 1023px;
  --desktop: 1024px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 1550px;
  margin: 0 auto;
  /* overflow: hidden; */
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.311);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.523);
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-track-piece {
  background-color: #e0e0e0;
}

#banner {
  height: 100vh;
  max-height: 950px;
  background: linear-gradient(
      180deg,
      rgba(234, 234, 234, 0.212) 3%,
      rgba(0, 0, 0, 0.09576330532212884) 12%,
      rgba(233, 206, 206, 0) 94%,
      rgba(255, 255, 255, 0.308) 100%
    ),
    url("../assets/park-3116883.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#canvas1 {
  background: transparent;
  position: fixed;
  overflow: hidden;
}

#welcome {
  color: var(--text-color);
  font-size: calc(var(--heading-1) + 2rem);
  font-family: var(--font-family-main);
  z-index: 5;
  position: fixed;
  transition: transform 0.5s ease;
}

#grass_container {
  width: 100%;
  height: 300px;
  background-image: url("../assets/grass.png");
  background-position: 0% 100%;
  background-size: contain;
  position: absolute;
  background-repeat: repeat-x;
  left: 0;
  bottom: -5px;
  z-index: 10;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  #welcome {
    font-size: calc(var(--heading-1) + 1rem);
  }
}

#scrollCircle {
  /* width: 100px;
  height: 150px; */
  position: fixed;
  top: 100%;
  left: 100%;
  transform: translate(-120%, -120%);
  z-index: 110;
  border-radius: 50%;
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
    rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

/* .section{
  display: none;
}

.loading{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
} */