@font-face {
    font-family: 'marist';
    src: url('abcmarist-regular.woff2') format('woff2'),
         url('abcmarist-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'marist';
    src: url('abcmarist-regularitalic.woff2') format('woff2'),
         url('abcmarist-regularitalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

html{color:#000;background:#FFF}
body,img,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td, figure {margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}span {text-decoration: none;}

html {}
body {color: #000; background:#FEFFF6; font-family: 'marist', Times, serif; font-size: 100%; line-height: 1.125em; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
em {font-style: italic;}

header {background: #957B19; color: #fff; position: sticky; top: 0; left: 0; padding: 1.5rem; width: calc(100% - 3rem); display: flex; justify-content: space-between; align-items: center;}
header h1 { font-size:2em; line-height:1em; }
header a {padding: 0.75em 3em 0.5em 3em; border: 1px solid #fff; text-decoration: none; color: #fff;}
header a:hover {background: #fff; color: #957B19;}

section .wrapper {max-width: 1000px; margin: 0 auto;}

section#intro {padding:1.5rem;}
section#intro {font-size: 1.5em; line-height: 1em; }
section#intro h1 svg {width: 100%; height: auto; text-align: center;}
section#intro h1 span {display: none;}

section#intro img {width: 100%; height: auto;}

section#intro p {text-align: justify; line-height: 1.125em;}
section#intro p+p {padding-top: 1.125em;}
section#intro p.quote {color: #957B19; text-align: center; padding-top:0.5em;}

section#intro img {padding: 2rem 0;}


section#themes {padding:3rem 1.5rem; background: #957B19; color:#fff; font-size:1.5em; line-height:1em; }

.themesflex {display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top:1.5em; justify-content: center;}
.themesflex p {width: calc(33.3% - 1rem); border: 1px solid #fff; box-sizing: border-box; padding:0.75em 0 0.5em; text-align: center;}
.themesflex p:hover {background: #fff; color: #957B19;}

section#addition {padding: 1.5rem;}
section#addition img {width: 100%; height: auto;}
section#addition img+img {padding-top: 1.5rem;}

footer {background: #957B19; color: #fff; padding:1.5rem; width: calc(100% - 3rem); overflow-x: hidden;}
footer h1 {}
footer h1 span {display: none;}


footer .mailing {text-align: center; padding-top:3rem; padding-bottom: 3rem;}
footer .mailing a {padding: 0.75em 3em 0.5em 3em; border: 1px solid #fff; text-decoration: none; color: #fff; box-sizing: border-box;}
footer .mailing a:hover {background: #fff; color: #957B19;}

footer svg {height: auto; width: 650%;}

footer h1 svg{
top:0;
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 15s;
}
@-webkit-keyframes run {
  0% {
    left: 115%;
  }
  99.9% {
    left: -700%;
  }
  100% {
    left: 115%;    
  }
}


.emailsignup {position: relative; width: 100%; max-width: 500px; display: block;}
.emailsignup label {font-size: 50%; line-height: 1.25em; display: block; text-transform: uppercase; position: absolute; bottom: 0; opacity: 0;transition: opacity 0.5s;}
.emailsignup input {outline: none; border: 0; background: transparent; color: #fff;}
::-webkit-input-placeholder {color:#fff;}
::-moz-placeholder {color:#fff;}
::-ms-placeholder {color:#fff;}
::placeholder {color:#fff;}
.emailsignup input[type="email"] { border-bottom: 1.3pt solid #fff; padding: 0 0 0.25rem 0; border-color: transparent; transition: border-color 0.5s; width: 100%; display: block;}
.emailsignup button {font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; font-family:"CCCvetica", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;}
.emailsignup button:before {width: 20px; height: 20px; content: '→'; color: #fff;cursor:pointer; font-size: 18.5px; line-height: 1.25em; opacity: 0; position: absolute; top:
    0; right: 0;display: block; transition: opacity 0.5s;}
.emailsignup input[type="email"]:focus + button:before {opacity: 1;}
.emailsignup input[type="email"]:focus {border-color: #fff;}
.emailsignup label.focused {opacity: 0.75;}



@media only screen and (max-width: 750px) {
    body {font-size: 85%;}
    header h1 { font-size:1.75em; line-height:1em; }
    section#intro {font-size: 1.35em; line-height: 1em; }
    section#themes {font-size:1.25em; line-height:1em; }

    footer svg {height: auto; width: 400%;}
    @-webkit-keyframes run {
      0% {left: 115%;}
      99.9% {left: -450%;}
      100% {left: 115%;}
    }

    footer .mailing a {font-size: 1.25em; line-height: 1em;}

}

@media only screen and (max-width: 650px) {
    .themesflex p {width: calc(50% - 0.75rem);}



}