@import url("https://fonts.googleapis.com/css2?family=Exo:wght@200;400&family=Square+Peg&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap");

:root {
  /* Screens */
  --smScreen: 425px;
  --mdScreen: 768px;
  --lgScreen: 1024px;

  /* Colors */
  --primary-color: #183a6e;
  --secondary-color: #5491c7;
  --section-color: #ffffffb1;
}
b {
  font-weight: 400;
}
h1,
h2,
h3,
p {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3 {
  font-family: "Kaushan Script", cursive;
}

h1 {
  color: var(--primary-color);
  font-size: 36px;
}

h2 {
  color: var(--secondary-color);
  font-size: 30px;
  margin-bottom: 15px;
}
h3 {
  color: var(--primary-color);
  margin-bottom: 5px;
  font-size: 20px;
}

a,
p {
  font-family: "Exo", sans-serif;
  font-weight: 200;
  color: var(--primary-color);
  font-size: 16px;
}

@media (min-width: 425px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 30px;
  }
  p {
    font-size: 18px;
  }
}

.background {
  position: fixed;

  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-image: url("tile.png");
  background-repeat: round;
}
body {
  text-align: left;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.wrapper {
  padding-block: 35px;
}
.container {
  width: min(100%, 100vw - 40px);
  max-width: 1200px;
  /* background-color: rgba(255, 255, 255, 0.98); */
  margin-inline: auto;
  filter: drop-shadow(0 0 30 rgba(0, 0, 0, 0.18));
  padding-block: 50px;
  position: relative;
}

.background-image {
  opacity: 0.97;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("./paper-tile.png");

  background-repeat: repeat;
  z-index: -1;
}

.add-gap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.large {
  gap: 35px;
}

.sections {
  display: flex;
  flex-direction: column;
  gap: 50px;
  z-index: 1;
}
.box {
  background-color: var(--section-color);
  margin-inline: auto;
  filter: drop-shadow(0 0 30 rgba(0, 0, 0, 0.18));
  width: 80%;
  padding: 3%;
}

.content {
  width: 92%;
  margin-top: 15px;
  margin-bottom: 10px;

  margin-inline: auto;
}

header {
  margin-top: 20px;
  margin-bottom: 50px;
  padding-inline: 50px;
  text-align: center;
}