@font-face {
  font-family: 'Recoleta Alt';
  src: url('./RecoletaAltMedium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional: improves loading speed */
}

*, *::before, *::after {
  box-sizing: border-box; /* Includes padding/border in element width */
  margin: 0;
  padding: 0;
  border: 0;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    padding: 16px;
    background-color: #FFEBC6;
    width: 100vw;
    height: 98vh;
    margin: 0;
    overflow: hidden;
}

h1 {
    font-family: 'Recoleta Alt';
    font-size: 32px;
    color: #B3450F;
}

p {
    font-family: 'Poppins';
    font-size: '16px';
    color: #B3450F;

}

.button {
    width: 140px;
    height: auto;
}


.header {
    text-align: center;
}
.column {
    width: 100%;
    max-width: 768px;
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction:column;
    align-items: center;
}
.row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;

}


.main {
    height: 100%;
    justify-content: space-between;
}

.logo {
    width: 240px;
    height: auto;
}
.spacer {
    height: 32px;
}
.footer-text {
    text-align: center;
    font-size: 12px;
    line-height: 14px;
}
.content {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 60px;
}

.squiggle {
    position: absolute;
    bottom: 20%;
    width: 160vw;
    min-width: 1600px;
}


@media (max-width: 600px) {
   h1 {
    font-size: 24px;
   }
   p {
    font-size: 12px;
   }
   .content {
    margin-top: 200px;
   }
   .footer-text {
    font-size: 10px;
    line-height: 12px;
   }


}

@media (max-width: 400px) {
    .squiggle {
        bottom: 12%;
   }
}
/* 
yelllow -  #FCBF3C

cream - #FFEBC6

brown -#B3450F */