@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --padding: 7vh 10% 7vh 10%;
  --horizontal-padding: 30px;
  --main-background: white;
  --secondary-background: rgba(242, 242, 242, 0.323);
  --main-color: rgb(128, 206, 255);
  --secondary-color: rgb(49, 147, 208);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* Fixed header height */
}

body{
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
} 

p, h1, h2, h3, h4, input, button, img{
  user-select: none;
}

h1{
  font-size: 50px;
}

h2{
  font-size: 30px;
  text-align: center;
  padding-bottom: 30px;
}

h3{
  font-size: 22px;
}

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

a{
  text-decoration: none;
  border: none;
}

button{
  border: none;
}

button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-height: 35px;

  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;

  transition: 0.3s ease;

  justify-self: flex-start
}

p{
  color: rgb(85, 85, 85);
}