@import url("https://fonts.googleapis.com/css2?family=Fugaz+one&family=Nunito&display=swap");
/* |reset| */
*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img{
    display: block;
    max-width: 100%;
    height: auto;
}
input,button, textarea{
    font: inherit;
}
/* |variables| */

:root{
    /* Fonts */
    --FF:"Nunito",sans-serif;
    --FF-HEADINGS:"Fugaz One",cursive;
    --FS: clamp(1rem,2.2vh,1.5rem);

    /* Colors */
    --BGCOLOR-FADE: rgb(252,220,160);
    --BGCOLOR: orange;
    --BGIMAGE: linear-gradient(to bottom, var(--BGCOLOR),var(--BGCOLOR-FADE));
    --BODY-BGCOLOR:#FFF;
    --BORDER-COLOR:#333;
    --BUTTON-COLOR:#FFF;
    --FONT-COLOR: #000;
    --HEADER-BGCOLOR:#000;
    --HEADER-COLOR:#FFF;
    --HERO-BGCOLOR:rgba(51,178,51,0.75);
    --HERO-COLOR:#FFF;
    --HIGHLIGHT-COLOR:rgb(51,178,51);
    --LINK-ACTIVE:orange;
    --LINK-COLOR:#000;
    --LINK-HOVER:hsla(0,0%,0%,0.6);
    --NAV-BGCOLOR:#FFF;
    
    /* Borders */
    --BORDERS: 1px solid var(--BORDER-COLOR);
    --BORDER-RADIUS:15px;

    /* Standard Padding */
    --PADDING-TB:0.25em;
    --PADDING-SIDE:2.5%;

    /* Standard Margin */
    --MARGIN:Clamp(1em,2.5vh,1.5em)0;
}

@media(prefers-color-scheme:day){
    :root{
        --BGCOLOR-FADE:GRAY;
        --BGCOLOR:#000;
        --BODY-BGCOLOR:#333;
        --BORDER-COLOR:whitesmoke;
        --BUTTON-COLOR:#000;
        --FONT-COLOR:whitesmoke;
        --HEADER-COLOR:whitesmoke;
        --HERRO-COLOR:#333;
        --HIGHLIGHT-COLOR:whitesmoke;
        --lINK-ACTIVE:rgb(252,200,103);
        --LINK-COLOR:whitesmoke;
        --NAV-BGCOLOR:rgb(20,20,20);
    }
}
/* |Utility classes| */
.offscreen{
    position: absolute;
    left:-10000px;
}
.nowrap{
    white-space:nowrap;
}
.center{
    text-align: center;
}

/* |General styels| */
html{
    scroll-behavior: smooth;
    font-size: var(--FS);
    font-family: var(--FS);
    background-color: var(--BGCOLOR);
    background-image: var(--BGIMAGE);
}
body{
    background-color: var(--BODY-BGCOLOR);
    color:var(--FONT-COLOR);
    min-height: 100vh;
    max-width: 800px;
    margin: 0 auto;
    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}
h1,
h2,
h3{
    font-family: var(--FF-HEADINGS);
    letter-spacing: 0.1em;
}

h2,
h3{
    margin-bottom: 1em;
    color: var(--HIGHLIGHT-COLOR);
}

p{
    line-height: 1.5;
}
a:any-link{
    color: var(--LINK-COLOR);
}
a:hover,
a:focus-visible{
    color: var(--LINK-HOVER);
}
a:active{
    color:var(--LINK-ACTIVE);
}
/* |Header| */
.header{
    position: sticky;
    top: 0;
    z-index: 1;
}
.header__h1{
    text-align: center;
    background-color: var(--HEADER-BGCOLOR);
    color: var(--HEADER-COLOR);
    padding: var(--PADDING-TB) var(--PADDING-SIDE);

}
.header__nav{
    background-color: var(--NAV-BGCOLOR);
    border-bottom: var(--BORDERS);
    font-weight: bold;
    box-shadow: 0 6px 5px -5px var(--BORDER-COLOR);
}
.header__ul{
    padding: var(--PADDING-TB) var(--PADDING-SIDE);
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    gap:1rem;
}

/* |Hero Section| */
.hero{
    position: relative;
}
.hero__h2{
    background-color:var(--HERO-BGCOLOR) ;
    color: var(--HERO-COLOR);
    padding: 0.25em 0.5em;
    letter-spacing: 0.1rem;
    text-shadow: 2px 2px 5px var(--BORDER-COLOR);
    position: absolute;
    left: 20px;
    top:-100px;
    animation: showWelcome 0.5s ease-in-out 1s forwards;
}

@keyframes showWelcome{
    0%{
        top: -20px;
        transform: skew(10deg,-5deg)
        scaleY(0);
    }
    80%{
        top: 30px;
        transform: skew(10deg,-5deg)
        scaleY(1.2);
    }
    100%{
        top: 20px;
        transform: skew(-10deg,-5deg)
        scaleY(1);
    }

}

/* |Footer| */
.footer{
    position: sticky;
    bottom: 0;
    background-color: var(--HEADER-BGCOLOR);
    color: var(--HEADER-COLOR);
    padding: var(--PADDING-TB) var(--PADDING-SIDE);
    text-align: center;
}

/* |Main| */
.main{
    padding:var(--PADDING-TB) var(--PADDING-SIDE) ;
}
.main__article{
    scroll-margin-top: 6.5rem;
    margin: var(--MARGIN);
}

.main__article:first-child{
    margin-top: 1em;
}
.main__article:last-child{
    min-height: calc(100vh-20rem);
}

/* |About| */
.about__trivia{
    margin: var(--MARGIN);
}
.about__trivia-answer{
    margin-top: 1em;
}
/*  |CONTACT|*/
.contact__h2{
    margin: 0;
}
.contact__fieldset{
    border:none;
}
.contact__p{
    margin: 1em 0;
}
.contact__input,
.contact__textarea{
    padding: 0.5em;
    border-radius: var(--BORDER-RADIUS);
    border-width: 2px;
    width:100%
}
.contact__button{
    padding:0.5em;
    border-radius: var(--BORDER-RADIUS);
    background-color: var(--HIGHLIGHT-COLOR);
    color: var(--BUTTON-COLOR);
    font-weight: bold;
}

/* |Menu| */

thead,tbody,tfoot,tr{
    display: contents;
}
.menu__container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-areas:
    "hd1 hd2 hd3"
    "cr cr1 cr1p"
    "cr cr2 cr2p"
    "cr cr3 cr3p"
    "sf sf1 sf1p"
    "sf sf2 sf2p"
    "sf sf3 sf3p"
    "cs cs cs";
    gap: 0.1em;
    margin-bottom: 1em;
}
.menu__cr{
    grid-area:cr;
}
.menu__sf{
    grid-area:sf;
}
.menu__cs{
    grid-area:cs;
    color: var(--HIGHLIGHT-COLOR);
    font-weight: bold;
}
.menu__cr,
.menu__sf,
.menu__cs,
.menu__header{
    color:var(--HIGHLIGHT-COLOR);
    font-weight: bold;
    height: 100%;
    display: grid;
    place-content: center;
}
.menu__header{
    border-bottom: var(--BORDERS);
}
.menu__header,
.menu__item{
    width: 100%;
    padding: 1em;
    border: medium ridge var(--BORDER-COLOR)

}
.menu__item{
    display: grid;
    place-content: center;
}
thead th:first-child{
    border-top-left-radius: var(--BORDER-RADIUS);
}
thead th:last-child{
    border-top-right-radius: var(--BORDER-RADIUS);
}
tfoot th{
    border-bottom-left-radius: var(--BORDER-RADIUS);
    border-bottom-right-radius: var(--BORDER-RADIUS);
}

@media screen and (min-width:576px){
    .header__h1::before{
        content:'🌮 '
    }
    .header__h1::after{
        content:' 🌮'
    }
    .menu__header,
    .menu__cr,
    .menu__sf,
    .menu__cs{
        font-size: 125%;
    }

}