/* Colours
Union flag blue: #012169
Lighter blue: #3b6785
Union flag red: #C8102E
Lighter red: #ce4d62 */

/* ChatGPT suggestion
Primary: #012169
Secondary: #00C2FF
Accent: #A3FF12
Headings: Roboto
Body: Inter

Dark navy header
White content areas
Cyan buttons
Lime highlights for points, rankings and "Top Scorer"
Large Roboto headlines
Inter everywhere else */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Story+Script&display=swap');
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,em,img,strong,b,u,i,ol,ul,li,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,footer,header,menu,nav,output,section{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{height:100%}
body{display:flex;flex-direction:column;min-height:100vh;background-color:#fff;color:#393939;line-height:1;}
body,input,textarea,select{font-family:'Inter',sans-serif;font-size:1em;line-height:1.75em;color:#393939}
h1,h2,h3,h4,h5,h6{font-family:'Roboto',sans-serif;font-weight:700;color:#012169}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none}
a{color:#012169;text-decoration:none;font-weight:700}
b,strong{font-weight:700}
.highlight{color:#A3FF12;font-weight:500}
em{font-style:italic}
p{margin:0 0 .8em}
p.headline{font-size:1.2em;color:#012169;font-weight: 500}

#header{background:#012169;font-family:"Roboto",sans-serif;color:#fff;cursor:default;left:0;right:0;height:4.1em;line-height:4em;text-align:right;top:0}
#header > #logo{display:inline-block;height:inherit;left:1.75em;line-height:inherit;margin:0;padding:0;position:absolute;top:.25em}
#header > #logo a{font-size:1.8em;color:#fff;font-weight:500;text-decoration:none}
#logo h1{display:inline-block;font-size:1.4em;font-weight:800;text-transform:uppercase;color:#fff}
#logo a{display:block;text-decoration:none}
#logo img{margin:0 .5em 0 0}
#logo img.logo{height:36px}
#header .login{float:right;display:flex;justify-content:center;align-items:center;margin:1em 1em 1em 0;width:80px;height:40px;background:#fff;color:#012169;font-family:'Open Sans',sans-serif;border-radius:20px}
.reg, .logout{display:none}
@media screen and (max-width: 650px) {
#header .login{display:none}
.reg, .logout{display:block}
}
@media screen and (max-width: 480px) {
#header{min-width:320px}
#header > #logo{left:.75em}
#header > #logo a{font-size:1.4em}
}
.hidden{display:none !important}

/* Banner */
#banner{margin-top:2.6em;height:calc(80vh - 6.8em)}
#banner img{width:100%;height:100%;object-fit:cover}
#banner .inner{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);z-index:2;width:80%;max-width:900px;border-radius:10px;border:1px #fff solid}
#banner h1{font-size:3.5em;margin:.5em 0 .75em;color:#fff;font-weight:400;text-align:center;letter-spacing:3px;font-family:"Roboto",sans-serif}
#banner h2{font-size:1.55em;margin:0 2em 1em;color:#FFF;font-weight:400;text-align:center;font-family:"Inter",sans-serif}
#banner .botright{position:absolute;top:calc(80vh - 2em);right:20px;width:305px;color:#FFF;text-align:right}
@media screen and (max-width: 1040px) {
#banner{height:calc(80vh - 7.1em)}
}
@media screen and (max-width: 980px) {
#banner h1{margin-bottom:.5em}
}
@media screen and (max-width: 736px) {
#banner h1{font-size:2.5em;margin-bottom:.5em;padding-bottom:0}
#banner h2{font-size:1.25em;margin:0 .2em 1em}
}
@media screen and (max-width: 600px) {
.units{display:none}
}
@media screen and (max-width: 480px) {
#banner .inner{width:95%}
#banner h1{font-size:1.75em}
.no-mob{display:none}
}

/* Main */
.flex{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch}
.flex .col1{width:260px}
.flex .col2{width:calc(100% - 260px)}

.main-container{background:#fff;flex:2;width:calc(100%)}
.maintext{padding:1.5em}
.maintext h1{margin:0 0 .6em;font-size:1.6em;text-transform:uppercase}
.maintext h2{margin:.2em 0 .5em;font-size:1.6em}
.maintext h3{font-size:1.4em}

.a_wrapper{display:flex;flex-direction:column;margin-top:40px}
.advert{width:auto;margin:0 14px 1em 0}
.advert img{display:block;margin:auto}
.your_advert_1{position:relative}
.your_advert_2{display:none}

.newsfeed{margin-bottom:1em;padding:.6em;border:2px solid #00C2FF;border-radius:10px}
.newsfeed h3{font-style:italic}
#more{text-align:right;padding:0 .6em;text-decoration:none}
.none{display:none}
.inline-block{display:inline-block}
input.morenews{background-color: #fff;border:0;color:#00C2FF;font-weight:700}

.varfeed{margin-bottom:1em;padding:2.6em;background:#00C2FF;color:#FFF;border-radius:10px;text-align:center}
.varfeed h1{font-family:"Story Script","Roboto",sans-serif;font-size:2em;margin-bottom:0}
.varfeed h2{font-family:"Story Script","Roboto",sans-serif}

@media screen and (max-width: 1024px) {
.flex .col2{width:100%}
.flex .col1{margin:unset;width:unset}
.col1{margin:0 auto !important}
.advert{margin: 16px 14px 0 0}
.flex .col1 .image,.flex .col2 .image{max-width:60%;margin:0 auto 2em}
.a_wrapper{flex-direction:row;margin-top:0}
.your_advert_1{display:none}
.your_advert_2{display:block;margin:12px 0}
}

@media (max-width: 767px) {
.login{font-size:.8em;margin-top:-1.8em}
}

@media screen and (max-width: 600px) {
.lb1{width:calc((100% - 40px) * .1)}
.lb2{width:calc((100% - 40px) * .4)}
.lb3{display:none}
.lb4{width:calc((100% - 40px) * .2)}
.lb5{width:calc((100% - 40px) * .2)}
.lb6{width:40px}
.a_wrapper{flex-direction:column;margin:0 0 16px}
.advert{margin:0 auto 24px}
.your_advert_1{display:block}
.your_advert_2{display:none}
}

@media screen and (max-width: 520px) {
.flex{border:0;margin-top:.5em}
.flex .col1 .image,.flex .col2 .image{max-width:85%}
.maintext{padding:1em}
}

/* Footer */
#footer{position:sticky;top:100vh;background:#00C2FF;padding:1.5em 0;font-family:'Inter',sans-serif;text-align:center;color:#fff}
#footer a{color:#fff}