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

* {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

html, body {
    background-color: #68412c;
}

#page_outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: #492e1c;
    backdrop-filter: blur(25px);

    padding: 10pt;
    border-radius: 5pt;
}

#testimonials {
    margin-top: 24pt;

    display: flex;
    flex-direction: column;
    gap: 12pt;
}

.testimonial {
    background-color: #492e1c;
    backdrop-filter: blur(25px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 160pt;

    padding: 10pt;
    border-radius: 5pt;
}

.testimonial-date {
    align-self: end;
}

.testimonial-desc {
    align-self: start;
}

.testimonial-date, .testimonial-desc {
    margin: 4pt;
}

h1, h2, h3, h4, h5, h6, p {
    color: #ec9c52;
    filter: drop-shadow(1pt 1pt 1pt rgba(0, 0, 0, 100%));

    margin: 5pt;
}

#heading {
    font-weight: 400;

    margin-top: 10pt;
    margin-bottom: 30pt;
}

#num_burritos_text {
    font-weight: 400;
}

p {
    margin: 0;
}

#modal {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;

    background-color: rgba(0, 0, 0, 50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#modal_inner {
    background-color: #492e1c;
    backdrop-filter: blur(25px);

    padding: 16pt;
    border-radius: 5pt;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#modal_title {
    padding-bottom: 12pt;
}

#modal_footer {
    align-self: stretch;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

button {
    margin: 8pt;
    padding: 4pt;

    background-color: #A15B3AFF;
    color: #4E3220FF;
    font-weight: bolder;

    border-radius: 2pt;

    border: 1pt solid #4E3220FF;
}

button:focus {
    border: 1pt solid #d48855;
}

button:hover {
    filter: brightness(150%);
}

textarea, textarea:focus {
    margin: 8pt;
    padding: 12pt;

    border: 0 !important;
    color: #ec9c52;
    background-color: #6c4732;
    resize: none;

    outline: 0;
    box-shadow: initial;
}

textarea:focus {
    border: 0 !important;
}

#secret {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    z-index: 2;
}

.modal-closed {
    display: none !important;
}

#open_modal {
    margin-top: 8pt;
    margin-bottom: 8pt;
}