/* nunito-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  src: url('/fonts/nunito-v31-latin-600.woff2') format('woff2'),
       url('/fonts/nunito-v31-latin-600.ttf') format('truetype');
}
/* nunito-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: bold;
  src: url('/fonts/nunito-v31-latin-900.woff2') format('woff2'),
       url('/fonts/nunito-v31-latin-900.ttf') format('truetype');
}

:root {
    --bg-color: #AF65D3;
    --text-color: white;
    --light-text-color: #D3E0FF;
    --yellow: #FEC24E;
    --purple: #6A389E;
    --light-purple: #d1aeff;
    --navy: #2F3867;
    --light-navy: #354390;
    --dark-navy: #282647;
    --shadow: #6A389Eaa;
    --white: white;
}

* {box-sizing: border-box;}
details > summary {cursor:pointer;}
html {scroll-behavior: smooth;}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
  background-image: url(images/bg.png);
  background-attachment: fixed;
  font-family: "Nunito", Verdana, sans-serif;
  font-size: 16px;
  margin: 0;
}

#container {
    max-width: 100%;
    width: 1200px;
    margin: auto;
}

img {max-width:100%;}

h1, h2 {
    background-color: var(--purple);
    color: var(--white);
    padding: .4em 20px;
    margin: 1.5em 0;
    box-shadow: 4px 6px var(--yellow);
    line-height: 1.5em;
}
h1 {margin: auto; text-align:center; font-size: 2em;}
h2 {rotate: -1deg;}

.banner img {vertical-align:bottom;}

#newsletter h2 {
    rotate:0deg;
    margin: 1em 0;
}

a {
    color: var(--yellow);
    font-weight: bold;
}
/* a:visited {color:var(--white);} */
a:hover {color: var(--yellow); text-decoration: none;}

.bubble {
    border-radius: 4px;
    padding: 20px;
    margin: 10px;
}
.bubble h3 {
    margin:0;
    margin-bottom: .5em;
}
.bubble p {margin:0;}

.dark {
    background: var(--dark-navy);
    color: var(--light-purple);
}

.light {
    background: var(--light-purple);
    color: var(--navy);
}
.light a {color: var(--navy);}

.box {
    background-color: var(--navy);
    max-width: 800px;
    margin: 30px auto;
    padding: 1.5em 42px;
    border-radius: 4px;
    line-height: 1.5rem;
    box-shadow: 8px 8px var(--shadow);
}
.box hr {
    border: none;
    border-bottom: 2px solid var(--purple);
}

.sideimage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.sideimage img {
    max-width: 96px;
    margin-right: 12px;
    border-radius: 4px;
}

blockquote {
    border: 2px solid white;
    background: var(--light-navy);
    color: var(--light-text-color);
    border-radius: 4px;
    padding: 20px;
    margin: 10px;
    margin-bottom: 2em;
}
blockquote a {color: var(--white);}
blockquote p {margin: .75em 0;}

.return a {
    background: var(--purple);
    text-decoration: none;
    color: var(--white);
    padding: .3em 12px;
    border-radius: 4px;
}
.return a:hover {
    color: var(--purple);
    background: var(--yellow);
}

footer {
    font-size: smaller;
    text-align: center;
    margin: 2em;
}
footer a:visited {color: var(--white);}
footer a:hover {color: var(--yellow);}

.center {text-align:center;}
.center img {display:block; margin:auto;}

@media screen and (max-width: 800px) {
    h1 {font-size: 1.2em}
    main {
        margin: 30px 0;
        padding: 8px 20px;
        border-radius: 0;
        box-shadow: 0 8px var(--shadow);
    }
}