@media screen and (max-width: 900px) {html {margin-inline: 0%}}
@media screen and (min-width: 901px) {html {margin-inline: 20%}}

@media screen and (max-width: 550px) {header h1 {font-size: 5vw !important}}
@media screen and (min-width: 901px) {header h1 {font-size: 3vw; align-content: center; padding-bottom: 1.5vh;}}
@media screen and (min-width: 1000px) {#header-left-logo {width: 6.5vw !important}}
@media screen and (max-width: 500px) {#logo-img {display: none !important}}

/* Center Body @ 500 */
@media screen and (max-width: 500px) {
    main {
        padding-left: 10%;
        padding-right: 10%;
    }    
}
@media screen and (min-width: 1800px) {main {font-size: large}} /* Upscale font @ 1800 */

/* Media query for Tablets or smaller */
@media (max-width: 780px) {
    #body-container {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        flex-wrap: wrap;
    }

    .event-month {
        width: 100%;
    }

    #left-col, #right-col {
        width: 100%;
    }


    #middle-col {
        width: 100%;
        margin-inline: 0px;
    }
    .buy-now-btn{
        width: 100px;
        align-self: flex-end;
    }
    .right-flex-container {
        align-self: center;
    }
}

header {z-index: 2}
body {z-index: 1}
footer {z-index: 2}

html {
    background-color: #262626;
    color: white;
}

/* === Judson FONT === */
.judson-regular {
    font-family: "Judson", serif;
    font-weight: 400;
    font-style: normal;
}
.judson-bold {
    font-family: "Judson", serif;
    font-weight: 700;
    font-style: normal;
}
.judson-regular-italic {
    font-family: "Judson", serif;
    font-weight: 400;
    font-style: italic;
}

/* === Lato FONT === */
.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

/* ===== HEADER ===== */
header {
    background-color: #434343;
    padding: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
}
header::after { /* Header Bottom Line */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #383838;
    opacity: 65%;
}
header h1 {
    color: #F7C873;
    margin: 0;
    width: 100%;
    padding-top: 5px;
}
#logo-img {
    width: 120%;
    flex-shrink: 0;

    position: absolute;
    transform: translateY(-40%);

    opacity: 15%;
    filter: saturate(0%);
}
#logo-container {
    margin-left: auto;
    position: relative;
    width: 50%;
}
#header-intro-container {display: flex}
#header-left-logo {
    width: 9vw;
    height: auto;
}


/* ===== BODY ===== */
body {
    background-color: #323232;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    position: relative;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    padding-left: 3%;
    padding-right: 25%;
    padding-block: 2%;
    position: relative;
    z-index: 1;
}

section {margin-bottom: 10px}

.form-container {
    display: flex;
    flex-direction: row;
}

.fade-img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
  
.background-gradient {
    position: absolute;
    width: calc(100% + 140px);
    height: 100%;
    background: radial-gradient(
        circle at 100%,
        #32323200,
        #323232 40%,
        #323232 75%,
        #323232 75%
    );
    z-index: 1;
}
  
#background-image {
    width: auto;
    height: 100%;
    float: right;
    transform: translateX(8rem);
    
}

/* Moves the background Image when resizing */
@media screen and (max-width: 500px) {
    #background-image{margin-left: 4rem}
    .background-gradient{
        background: radial-gradient(
            circle at 90%,
            #32323200,
            #323232 40%,
            #323232 75%,
            #323232 75%
        );
    }
}

/* ---Header Image / Date--- */
#body-header, #lower-body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
#coming-soon {margin-bottom: 8px;}
#lower-body {align-items: center;}
#body-header img {
    width: 20%;
    max-width: 200px;
    height: auto;
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}
#body-header p {
    font-size: smaller;
    margin: 0;
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}


/* ---User Input Field & Button--- */
#lower-body {
    margin-bottom: 25px;
    margin-top: 40px;
}
#lower-body p {
    font-size: medium;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 1%;
    text-align: center;
}
#form-message {
    margin-top: 2px;
    text-align: right !important;
    font-style: normal !important;
}

/* ---Unique Styles--- */
.form__group {
  position: relative;
  margin-top: 5px;
  padding: 15px 0 0;
  width: 100%;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid rgb(202, 202, 202);
  outline: 0;
  font-weight: 400;
  font-size: 1rem;
  color: #F7C873;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;

  &::placeholder {
    color: transparent;
  }

  &:placeholder-shown ~ .form__label {
    font-size: 1rem;
    cursor: text;
    top: 26px;
  }
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: rgb(202, 202, 202);
}

.form__field:focus {
  ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 0.8rem;
    color: #F7C873;
    font-weight:700;    
  }
  padding-bottom: 6px;  
  font-weight: 700;
  color: rgb(202, 202, 202);
  border-width: 3px;
  border-image: linear-gradient(to right, #F7C873,rgb(202, 202, 202));
  border-image-slice: 1;
}
/* reset input */
.form__field{
  &:required,&:invalid { box-shadow:none; }
}

/* ---Form Button--- */
#form__button {
    border: none;
    background-color: rgb(202, 202, 202);
    color: #262626;
    margin-top: 25px;
    padding-inline: 0.9rem;
    padding-top: 0px;
    padding-bottom: 0px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-right-radius: 3px;
    font-weight: 600;
    font-style: italic;
    font-size: 1rem;
}
#form__button:hover {background-color:#F7C873}


/* ===== FOOTER ===== */

footer {
    background-color: #383838;
    padding-inline: 2%;
    padding-block: 0;
    margin-top: auto;
    font-size: small;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---Left--- */
#left-center-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
    margin: 0;
}
#left-footer {
    display: block;
    flex-grow: 1;
    align-self: auto;
}

/* ---Center--- */
#center-footer {
    color: #ffffff40;
    display: block;
    flex-grow: 1;
    align-self: auto;
}
/* ---Right--- */
#right-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    flex-grow: 1;
}

/* ---Content--- */
.footer-links {
    display: flex;
    align-items: center;
}
.footer-links p,a {
    margin-right: 8px;
}
a {
    color: #F7C873;
    text-decoration: none;
}
a:hover {color: #866c3c;}
a:active  {color: #c5c8e5;}

#right-footer img {
    height: 30px;
    margin: 2% 0;
    filter: invert(80%);
}

/* Footer Resize */
@media screen and (min-width: 1100px) {
    #left-center-footer {
        flex-grow: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: stretch;
    }
    #left-footer {flex-grow: 1}
    #center-footer {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #right-footer {
        flex-grow: 0;
        width: 33.3%;
    }
}