*{box-sizing:border-box;margin:0;padding:0;font-family:anton,sans-serif}body{display:grid;height:100vh;grid-template-rows:120px 50px 1fr 80px;.sponsors { p { text-align: center; text-decoration: underline; margin-bottom: 10px; font-size: 14px; } } .header { background-color: #FFFFFF; display: grid; place-items: center; img { height: 110px; } } .navigation { background-color: #EB2426; font-weight: bolder; font-size: 15px; border-top: 2px solid #1E2A5A; border-bottom: 2px solid #1E2A5A; ul { list-style: none; display: grid; grid-template-columns: auto auto auto auto; margin: 0 0; } ul li { display: inline-block; height: 46px; line-height: 46px; text-align: center; &:hover, &:active, &:focus { background-color: #1E2A5A; cursor: pointer; } a, a:hover, a:active, a:focus, a:link, a:visited { display: block; color: #FFFFFF; text-decoration: none; text-transform: uppercase; cursor: pointer; } } } .main { display: grid; grid-template-rows: auto 1fr auto; row-gap: 10px; margin: 10px 10px 10px 10px; font-size: 20px; color: #1E2A5A; .right-sidebar { order: 0; justify-self: center; } .content { order: 1; text-align: justify; } .left-sidebar { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; row-gap: 5px; order: 2; img { max-width: 100%; height: auto; } } p { line-height: 1.25; } p + p, ul + p { margin-top: 25px; } figure { figcaption { display: none; } } } .main.home { .content { text-align: justify; } } .main.default { grid-template-rows: auto 1fr; .left-sidebar { display: none; } h4 { margin: 15px 0; font-weight: normal; text-decoration: underline; } h5 { margin: 15px 0; } h4 + h5 { margin: 0 0 15px 0; } ul { list-style: disc; padding: 0 15px; } ul li { margin-left: 20px; } } .main.default.faq { details { padding: 4px 0; cursor: pointer; summary { font-size: 1rem; font-weight: bold; } p { margin: 0 0 0 20px; line-height: 1.2; font-size: 1.1rem; padding: 10px 0; } table { margin: 0 0 0 20px; border-collapse: collapse; th { padding: 6px; color: #FFFFFF; background-color: #1E2A5A; text-align: center; } tbody tr:nth-child(odd) { } tbody tr:nth-child(even) { color: #FFFFFF; background-color: #EB2426; } td { padding: 6px; border: 1px solid #000000; text-align: center; } } ul { font-size: 1.1rem; } } } .footer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; color: #FFFFFF; background-color: #1E2A5A; font-size: 12px; padding: 0 10px; .social-media { display: none; } p { opacity: 0.4; justify-self: start; } a { opacity: 0.4; justify-self: end; } div { text-align: center; a { opacity: 0.4; justify-self: center; } } }}@media(min-width:577px){}@media(min-width:769px){body .navigation{font-size:20px}}@media(min-width:900px){body{grid-template-rows:120px 50px 1fr 80px;.navigation { ul { margin: 0 15vw; } } .main { grid-template-columns: 1fr 5fr 280px; grid-template-rows: auto; .left-sidebar { order: 0; } .content { order: 1; } .right-sidebar { order: 2; } } .main.home { grid-template-columns: 4fr 5fr 280px; column-gap: 20px; .content { text-align: left } .sponsors { display: block; text-align: center; } } .main.default { column-gap: 30px; .left-sidebar { display: grid; grid-template-columns: 1fr; grid-template-rows: 0.25fr 0.75fr; row-gap: 20px; margin: 10px 10px 0 20px; } .right-sidebar { order: 3; .sponsors { justify-self: center; } } } .footer { grid-template-columns: 1fr 1fr 1fr; font-size: 14px; .social-media { display: block; } }}}@media(min-width:1200px){body{.navigation { ul { margin: 0 25vw; } }}}