/* Normalize-css */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
html {scroll-behavior: smooth;}
body {background-color: white;color: #333;font-family: Snapfolio, sans-serif; font-weight: 100; font-size: 18pt}

.button {border-radius: 30px; border: 0;background: #555;padding: 10px 25px 12px 27px;display: inline-block;color: #fff;margin-top: 10px;font-size: 17px;text-transform: uppercase;font-weight: 400;width: auto;line-height: 20px;text-decoration: none;}
.button:hover {background-color: darkgrey;}
 
header {position: fixed;top:0;left:0;right:0;height: 60px;z-index:1000;background-color: white;padding: 10px 20px;box-shadow: 0 0 20px 0 rgba(221, 225, 229, 0.5);}
header div.logo img {height: 100%;border:0 none;}
header div.tools {left:initial;right:20px;display: flex;width:80%;justify-content:flex-end;align-items: flex-start;}
header div.tools a, .top-bar div.tools a:visited {display:block;position:relative;color:white;text-transform:capitalize; margin-left:40px;font-size: 17pt;text-decoration: none;}
header div.tools a.shopping-cart span {display: block; position: absolute; left: 0; right: 0; top:16px; bottom: 0;color: black;text-align: center;}

section#top {display: block;margin-top:80px;background-color: #f0f5f9;border-bottom: 1px solid #dde1e5;}
section#top div.imagemap {transform: scale(.7);margin-top: -50px;margin-bottom: -50px;}
section#top div.imagemap img {display:block;height: 100%;margin: 0 auto 0;border:0 none;}

section#help {}
section#help h1 {display:block;font-size:44pt;width: 600px;text-align: center;margin: 30px auto;}
section#help h1 {color: #f35626;background-image: linear-gradient(92deg, #cc5500, #ccbb00);background-size: 100%;-webkit-background-clip:text;-webkit-text-fill-color: transparent;animation: hue 60s infinite linear;}

@keyframes hue {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(-360deg);
    }
}

section#motivation {;max-width: 1480px;margin: 60px auto;padding: 0 20px;}
section#motivation p {font-size: 19pt; line-height: 30px;text-align: justify}
section#motivation p b {font-weight: 800;}

section#rules {display: grid;margin: 40px 20px;grid-column-gap: 80px;grid-template-columns: auto auto;}
section#rules div {background-color: #fff2e5;padding: 30px 20px;border-radius: 10px;}
section#rules div:first-child {margin: 0 0 0  auto;}
section#rules div:last-child {margin: 0 auto 0 0;}
section#rules h2 {display:block;margin: 0 30px;}

section#footer {}
section#footer h2 {display: block;color: #FFBF00;padding:20px 20px;background-color: black;font-size: 22pt}
section#footer div.row {display:grid;grid-template: 'd1 d2 d3 d4 d5 c1' 'cs cs cs cs cs sub' ;grid-gap:10px; width: 800px; margin: 10px auto;}
section#footer div.row label.d1 { grid-area: d1; }
section#footer div.row label.d2 { grid-area: d2; }
section#footer div.row label.d3 { grid-area: d3; }
section#footer div.row label.d4 { grid-area: d4; }
section#footer div.row label.d5 { grid-area: d5; }
section#footer div.row label.c1 { grid-area: c1; }
section#footer div.row label.cs { grid-area: cs; }
section#footer div.row button.sub { grid-area: sub; }
section#footer div.row label.choice input[type=radio] {display: none}
section#footer div.row label.choice input[type=radio] + span {display:block;padding: 5px 15px;margin: 0;font-size: 18pt;background-color: #ebebeb;line-height: 1.5em;text-align: center;}
section#footer div.row label.choice input[type=radio]:checked + span { background-color: #ffbf00}
section#footer div.row label.c1 input[type=text] {width: 100%;line-height: 30px;padding: 6px 15px;box-sizing: border-box;border: 1px solid #a9a9a9;}
section#footer div.row label.c1 input[type=text] {outline: none !important;}
section#footer div.row label.cs {padding-top: 10px;font-size: 14pt;}
section#footer div.row label.cs input[type=checkbox] + span {line-height: 30px;margin-left: 10px}
section#footer div.row label.cs input[type=checkbox] + span b {font-weight: 800}
section#footer div.row button {color: #000000;font-weight: 500;background-color: #FFBF00;background-image: none;border-radius: 0;border: 0 none;text-shadow: none;padding: 10px 20px;margin: 5px 0;transition: all 0.3s;}
section#footer div.row button:hover {background-color: black; color: white;}

section#footer div.patreon {margin: 10px auto;text-align: center}
section#footer div.patreon a {font-size: 18pt;color: black;padding-bottom: 30px;}
section#footer div.patreon a:visited {color: black}

blockquote {color: rgba(250, 200, 130, 0.6);font-size: 40px;width: 60%;margin: 0 auto;}
blockquote.long {font-size: 26px;width: 90%;margin: 0 auto;}
blockquote p {font-style: italic;margin-bottom: 0;}
blockquote p::before, blockquote p::after {content: "“";font-size: 8rem;margin: -2rem 0 0 -4rem;position: absolute;opacity: 0.5;}
blockquote p::after {content: "”";margin: -1rem -4rem 0 0;}