@media screen and (min-width: 45em) { .header { display: flex; flex-direction: row; justify-content: center; gap: 0; text-align: center; font-size: 9.75em; font-weight: bold; padding: 0; } .logo { width: inherit; } .header > span { margin: 0; } .subheader { margin: -1em 0 0 0; font-size: 3.47em; } .place { margin: 0; font-size: 2.145em; } .important { font-family: pfdintextcomppromedium; } .left { float: left; margin-right: 0.5em; } .right { float: right; margin-left: 0.5em; } .logo_partner { max-width: 250px; max-height: 250px; margin: 1em; } .button { font-size: 2.5em; transition-property: color; transition-duration: 1s; } .button:hover { color: var(--main-color); cursor: pointer; } .goodies, .food { text-align: justify; } .goodies_pic, .food_pic { max-width: 7em; } } @media screen and (max-width: 44em) { .header { display: flex; flex-direction: row; justify-content: center; gap: 0; text-align: center; font-size: 6.75em; font-weight: bold; padding: 0; } .header > span { margin: 0; } .logo { width: inherit; } .subheader { margin: -1em 0 0 0; font-size: 2.30em; } .place { margin: 0; font-size: 1.2em; } .important { font-family: pfdintextcomppromedium; } .left { float: left; margin-right: 0.25em; } .right { float: right; margin-left: 0.25em; } .logo_partner { max-width: 125px; max-height: 125px; margin: 0.25em; } .button { font-size: 1.2em; transition-property: color; transition-duration: 1s; } .button:hover { color: var(--main-color); cursor: pointer; } .goodies, .food { text-align: justify; } .goodies_pic, .food_pic { max-width: 7em; } }