/* Import */
@import url(normalize.css);

/* Fixes */
html, body {width: 100%; height: 100%; margin: 0; padding: 0; font-size: 1em; background-color: #E9FF9D;}
::selection {color: #FCF9F2; background-color: #0000ff; background-color: var(--select-bg);}
.marked, .marked a {background-color: #0000ff; color: #FCF9F2;}
* {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0 }
.clearfix:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px;}

p {font-family: -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; font-size: 16px; margin: 0 0 12px 0; line-height: 1.6em; color: #37352E;}
h1 {font-family: 'Arial Black', 'Arial Bold', 'Arial', sans-serif; font-weight: 700; font-size: 40px; margin: 0 0 24px 0; color: #37352E;}
a, a:visited {text-decoration: none; border-bottom: 1px solid;}
a:hover{text-decoration: none;}

ul {font-family: -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; font-size: 16px; margin: 0 0 12px 0; line-height: 1.6em; color: #37352E; list-style: none; }
li {padding-left: 1.2em; text-indent: -1.2em;}
li:before {content: "→"; padding-right: 10px;}


.button {border: none; padding: 12px 14px 13px 18px; text-align: center; text-decoration: none; font-size: 16px; font-family: -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 600; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; background-color: #FCF9F2; float: left; margin: -12px 24px 20px 0;}
.button-black {color: #37352E; border: 1px solid #37352E; background: #FCF9F2;}
.button-black:hover {color: #FCF9F2; border: 1px solid #37352E; background: #37352E;}
.button-white {color: #FCF9F2; border: 1px solid #FCF9F2; background: #37352E;}
.button-white:hover {color: #37352E; border: 1px solid #FCF9F2; background: #FCF9F2;}

#wrapper {margin: 0; padding: 0; width: 100%;}
#description {width: 40%; margin: 0 26% 60% 26%; padding: 3% 4% 2% 4%; top: 42%; background-color: #FCF9F2; position: absolute; z-index: 1000; }
#footer {width: 50%; margin: 25% 26% 10% 26%;}

a, a:visited {color: #37352E;}
a:hover {color:#E9FF9D; background:#37352E; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}

.W20{width: 20%;}
.W25{width: 25%;}
.W30{width: 30%;}
.W35{width: 35%;}
.W40{width: 40%;}
.W45{width: 45%;}
.W50{width: 50%;}
.W55{width: 55%;}
.W60{width: 60%;}
.W65{width: 65%;}
.W70{width: 70%;}
.W75{width: 75%;}
.W80{width: 80%;}
.W85{width: 85%;}
.W90{width: 90%;}
.W95{width: 95%;}
.W99{width: 99%;}
.w100{width: 100%; margin-bottom: 40px; clear: both;}

.ML2 {margin-left:  2%;}
.ML5 {margin-left:  5%;}
.ML10{margin-left: 10%;}
.ML15{margin-left: 15%;}
.ML20{margin-left: 20%;}
.ML25{margin-left: 25%;}
.ML30{margin-left: 30%;}
.ML35{margin-left: 35%;}
.ML40{margin-left: 40%;}
.ML45{margin-left: 45%;}
.ML50{margin-left: 50%;}
.ML55{margin-left: 55%;}
.ML60{margin-left: 60%;}
.ML65{margin-left: 65%;}
.ML70{margin-left: 70%;}
.ML75{margin-left: 75%;}

.MT60  {margin-top:   60%;}
.MT50  {margin-top:   50%;}
.MT40  {margin-top:   40%;}
.MT30  {margin-top:   30%;}
.MT25  {margin-top:   25%;}
.MT20  {margin-top:   20%;}
.MT15  {margin-top:   15%;}
.MT10  {margin-top:   10%;}
.MT5   {margin-top:   5%;}
.MT2   {margin-top:   2%;}
.MT-0  {margin-top:    0%;}
.MT-10 {margin-top:  -10%;}
.MT-20 {margin-top:  -20%;}
.MT-25 {margin-top:  -25%;}
.MT-30 {margin-top:  -30%;}
.MT-40 {margin-top:  -40%;}
.MT-50 {margin-top:  -50%;}
.MT-60 {margin-top:  -60%;}
.MT-70 {margin-top:  -70%;}
.MT-80 {margin-top:  -80%;}
.MT-90 {margin-top:  -90%;}
.MT-100{margin-top: -100%;}
.MT-110{margin-top: -110%;}
.MT-120{margin-top: -120%;}
.MT-150{margin-top: -150%;}
.MT-200{margin-top: -200%;}
.MT-300{margin-top: -300%;}

.Z-500 {z-index: 0; position: relative;}
.Z500  {z-index: 500; position: relative;}


/* ----------------------------- Responsive ----------------------------- */

@media (min-width: 1px) and (max-width: 900px){

    p {font-size: 1em; margin: 0 0 20px 0;}
    .bold {font-size: 1.8em;}
    h1 {font-size: 2.5em;}

    .button {padding: 12px 12px 12px 18px; font-size: 0.9em; margin: 0 20px 20px 0;}
    
    #description {width: 70%; max-width:800px; margin: 0 6% 60% 6%; padding: 8% 8% 4% 8%; top: 25%; }
    #footer {width: 70%; margin: 75% 6% 60% 6%; padding: 0;}

    .W70{width: 100%;}
    .w100{width: 100%; margin-bottom: 40px;}
    .ML15{margin-left: 0%;}
    .MT10 {margin-top: 20%;}
    }

@media (min-width: 1500px) and (max-width: 9000px){

    #description {width: 36%; margin: 0 29% 60% 29%; padding: 2.5% 3% 2% 3%; top: 50%; }
    #footer {width: 40%; margin: 5% 29% 10% 29%; padding: 0;}

    .W70{width: 70%;}
    .w100{width: 100%; margin-bottom: 40px;}
    .ML15{margin-left: 15%;}
    .MT10 {margin-top: 10%;}
    }