*{box-sizing:border-box;margin:0;padding:0;font-family:anton,sans-serif}:root{--fg-rgb:0, 0, 0;--fg-alt-rgb:255, 255, 255;--bg-rgb:255, 255, 255;--bg-alt-rgb:0, 0, 0;--primary-rgb:235, 36, 38;--primary-alt-rgb:237, 59, 61;--secondary-rgb:30, 42, 90;--secondary-alt-rgb:36, 51, 109;--tertiary-rgb:0, 0, 0;--fg:rgb(var(--fg-rgb));--fg-alt:rgb(var(--fg-alt-rgb));--bg:rgb(var(--bg-rgb));--bg-alt:rgb(var(--bg-alt-rgb));--primary:rgb(var(--primary-rgb));--primary-alt:rgb(var(--primary-alt-rgb));--secondary:rgb(var(--secondary-rgb));--secondary-alt:rgb(var(--secondary-alt-rgb));--tertiary:rgb(var(--tertiary-rgb))}html{font-size:16px}body{display:grid;height:100vh;grid-template-rows:120px 50px 1fr 80px;line-height:1.25}a,a:hover,a:active,a:focus,a:link,a:visited{color:var(--secondary)}a:hover{color:var(--secondary-alt)}h1{margin:1rem 0;font-size:2rem;text-align:center}h2{margin:.5rem 0;font-size:1.75rem}p{line-height:1.5}.sponsors{p { text-align: center; text-decoration: underline; margin-bottom: 10px; font-size: 0.875rem; }}a.button.registration{display:block;min-width:100%;padding:8px 32px;margin:24px auto;font-size:1.4rem;line-height:2;text-align:center;background:var(--secondary);color:var(--fg-alt);text-decoration:none;border:1px solid var(--bg);border-radius:8px;&:hover { background:var(--secondary-alt); }}#header{background-color:var(--bg);display:grid;place-items:center;img { height: 110px; }}#navigation{display:flex;justify-content:start;flex-direction:row;flex-wrap:wrap;font-weight:bolder;background-color:var(--primary);border-top:2px solid var(--secondary);border-bottom:2px solid var(--secondary);.hamburger { padding: 0 5px; color: var(--fg-alt); border: none; background-color: transparent; max-height: 48px; cursor: pointer; img { max-width: 45px; max-height: 45px; } } ul { display: none; list-style: none; line-height: 3; } ul.main { width: 100vw; grid-auto-flow: row; background-color: var(--primary); z-index: 1; span { color: var(--fg-alt); text-transform: uppercase; } li + li { border-top: 1px solid var(--secondary); } } ul.main.active { display: grid; } ul.main > li { white-space: nowrap; cursor: pointer; &:hover, &:active, &:focus { color: var(--fg-alt); background-color: var(--secondary); cursor: pointer; } a, a:hover, a:active, a:focus, a:link, a:visited, span { display: block; padding: 8px 8px; color: var(--fg-alt); text-decoration: none; text-transform: uppercase; cursor: pointer; } } ul.main > li:hover > ul, ul.main > li.active > ul { display: block; left: auto; right: -10px; min-width: 100%; background-color: var(--bg-alt); z-index: 1; li { padding-left: 25px; border-top: 1px solid var(--secondary); } } ul.main > li:hover > ul > li:hover, ul.main > li:active > ul > li:hover { color: var(--fg-alt); background-color: var(--primary); cursor: pointer; } ul.main li a:first-child:nth-last-child(2)::after, ul.main li span:first-child:nth-last-child(2)::after { content: ""; position: relative; border: 5px solid transparent; top: 8px; left: 4px; } ul.main > li > a:first-child:nth-last-child(2)::after, ul.main > li > span:first-child:nth-last-child(2)::after { border-top-color: var(--fg-alt); } ul.main > li:hover > a:first-child:nth-last-child(2)::after, ul.main > li:hover > span:first-child:nth-last-child(2)::after { border: 5px solid transparent; border-bottom-color: var(--fg-alt); margin-top: -5px; top: -12px; } ul.main li li > a:first-child:nth-last-child(2)::after, ul.main li li > span:first-child:nth-last-child(2)::after { border-left-color: var(--fg-alt); margin-top: -5px } ul.main li li:hover > a:first-child:nth-last-child(2)::after, ul.main li li:hover > span:first-child:nth-last-child(2)::after { border: 5px solid transparent; border-right-color: var(--fg-alt); }}#main{display:grid;grid-template-rows:auto 1fr;row-gap:10px;margin:10px;color:var(--secondary);.left-sidebar { display: none; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; row-gap: 5px; order: 2; img { max-width: 100%; height: auto; } } .content { order: 1; text-align: justify; .news-card { border: 1px solid var(--secondary); padding: 20px; border-radius: 8px; h5 { font-size: 1rem; text-align: left; color: var(--primary); } } } .right-sidebar { order: 0; justify-self: center; } p + p, ul + p { margin-top: 24px; } figure { figcaption { display: none; } } h4 { margin: 15px 0; font-weight: normal; text-decoration: underline; } h4 + h5 { margin: 0 0 15px 0; } ul { list-style: disc; padding: 0 15px; } ul li { margin-left: 20px; }}#main.home{grid-template-rows:auto 1fr auto;.left-sidebar { display: grid; } .content { text-align: justify; .news-card + .news-card { margin-top: 16px; } }}#main.faq{details { padding: 4px 0; cursor: pointer; summary { font-weight: bold; } p { margin: 0 0 0 20px; padding: 10px 0; } table { margin: 0 0 0 20px; border-collapse: collapse; th { padding: 6px; color: var(--fg-alt); background-color: var(--secondary); border: 1px solid var(--secondary); text-align: center; } tbody tr:nth-child(odd) { } tbody tr:nth-child(even) { color: var(--fg); background-color: var(--primary); } td { padding: 6px; border: 1px solid var(--secondary); text-align: center; } } ul { font-size: 1.125rem; } }}#main.shop{.content { text-align: center; }}#main.club{.content { text-align: left; }}#main.news{.content { display: flex; flex-direction: column; row-gap: 16px; margin: 0 64px; } h1 { margin-bottom: 0; } h5 { font-size: 1.125rem; text-align: center; } p { margin: 0; }}#footer{display:grid;grid-template-columns:1fr 1fr;align-items:center;color:var(--bg);background-color:var(--secondary);font-size:.75rem;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){#navigation{display:block;justify-content:initial;flex-direction:initial;flex-wrap:initial;max-width:100vw;.hamburger { display: none; } ul { display: block; } ul.main { display: flex; position: initial; top: auto; left: auto; flex-wrap: nowrap; li { padding: 0; } li + li { border: none; } } ul.main > li { position: relative; display: inline-block; flex-grow: 1; height: 46px; padding: 0; text-align: center; a, a:hover, a:active, a:focus, a:link, a:visited, span { padding: 0; } } ul.main ul { position: absolute; list-style: none; white-space: nowrap; left: -99999em; } ul.main > li > ul > li { padding: 0 5px; } ul.main > li > ul > li + li { border-top: 1px solid var(--secondary); } ul.main > li.active > ul { display: none; } ul.main > li:hover > ul { display: block; left: auto; right: -10px; min-width: 100%; background-color: var(--bg-alt); z-index: 1; } ul.main > li:hover > ul > li:hover { color: var(--fg-alt); background-color: var(--primary); cursor: pointer; } ul.main > li li:hover > ul { left: 100%; top: -1px; }}}@media(min-width:900px){body{grid-template-rows:120px 50px 1fr 80px}#navigation{ul.main > li:hover:last-child > ul { left: auto; right: 11px; } ul.main li a:first-child:nth-last-child(2)::after, ul.main li span:first-child:nth-last-child(2)::after { left: 10px; }}#main{grid-template-columns:1fr 5fr 280px;grid-template-rows:auto;column-gap:30px;.left-sidebar { order: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 0.25fr 0.75fr; row-gap: 20px; } .content { order: 1; } .right-sidebar { order: 2; .sponsors { justify-self: center; } }}#main.home{grid-template-columns:4fr 5fr 280px;column-gap:20px;.left-sidebar { margin: 0; row-gap: 8px; } .content { text-align: left }}#footer{grid-template-columns:1fr 1fr 1fr;font-size:.75rem;.social-media { display: block; }}}@media(min-width:1200px){#navigation{ul.main > li > ul > li { padding: 0 15px; } ul.main > li:hover > ul { left: auto; right: auto; } ul.main li a:first-child:nth-last-child(2)::after, ul.main li span:first-child:nth-last-child(2)::after { left: 10px; }}}