/**********************
thanksgiving2021.css
Copyright 2021 Derek Erb Solutions
https://derekerb.solutions

Styles for Thanksgiving 2021 event page
**********************/

a {
    border-block-end: 0.125em solid var(--PgFore);
    transition: border 0.3s;
}

a:hover,
a:focus {
    border-block-end: 0.125em solid black;
}

h2,
h3 {
    margin-inline-start: 2%;
}

h3 {
    font-size: 1.7em;
    font-family: var(--FontZ);
    font-weight: 900;
    color: black;
}

h4 {
    color: black;
}

p {
    color: black;
    text-align: justify;
    font-family: var(--Font13);
    font-size: 1.2em;
}

ul {
    text-align: center;
}

ul li {
    font-size: 1.1em;
}

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

.dEPConclusion p {
    text-align: center;
}

.dEPEmphasis p {
    text-align: center;
    border: 1px solid var(--PgFore);
    inline-size: 50%;
    margin: 2% auto;
}

.d3Images {
    display: flex;
    justify-content: center;
    align-items: center;
}

.d3Images img {
    max-inline-size: 30%;
    margin: 1%;
    box-shadow: 2px 2px 5px black;
    border-radius: 10px;
}

/******* TABLET & MOBILE *************/
@media screen and (max-width: 800px) {
    .d3Images {
        flex-direction: column;
    }

    .d3Images img {
        max-inline-size: 100%;
        inline-size: 100%;
        margin: 4% 0;
    }

    .dEPDescription {
        padding: 0 1em;
    }
}

.dEPImgSolo {
    margin: 2% auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eventCTA {
    background-color: var(--EventsItem);
    color: var(--EventsText);
    padding: 1em 2em;
    border-radius: 15px;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
    font-weight: lighter;
    box-shadow: inset -2px -2px 5px #202020, inset 2px 2px 3px #FEFEFE;
    border-block-end: none;
}

.eventCTA:hover,
.eventCTA:focus {
    background-color: var(--PgBack);
    color: var(--EventsItem);
    text-decoration: none;
    border-block-end: none;
    box-shadow: inset 0 0 2px #202020;
}

/****** MOBILE VERSION ******/
@media screen and (max-width: 500px) {

    .eventCTA {
        padding-block-end: 4%;
    }
}

.eventList li {
    text-align: center;
    margin: 2% 0;
    font-size: 1.3em;
}

#addons {
    position: relative;
    padding-block-end: 2%;
}

@media screen and (max-width: 500px) {
    #addons {
        padding-block-end: 4%;
    }
}

#addons:after {
    content: "";
    inline-size: 50%;
    block-size: 3px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: black;
}

#addons h4 {
    margin-inline-start: -1%;
    padding-block-end: 1%;
}

#allergies {
    text-align: center;
}

#forgot {
    text-align: center;
    margin: 2% auto;
}

#fullmenu {
    border: 4px dotted var(--PgFore);
    padding-inline: 2%;
    padding-block-end: 4%;
}

@media screen and (max-width: 500px) {
    #price {
        inline-size: 90%;
        margin: 6% auto;
    }

    #price p {
        inline-size: 100%;
    }
}

#whatyouget p {
    text-align: center;
}

#wontget {
    margin-inline-start: 2%;
}

#wontget li {
    margin: 3% auto;
}

/****** MOBILE VERSION ******/
@media screen and (max-width: 500px) {

    #wontget {
        margin-inline-start: 6%;
    }

    #wontget li {
        margin: 4.5% auto;
    }

    #allergies {
        margin-inline-start: 8%;
    }
}