/* https://www.dafont.com/rainyhearts.font */
@font-face {
    font-family: RainyHearts;
    src: url(../fonts/rainyhearts.ttf);
}

/* https://www.dafont.com/pixellari.font */
@font-face {
    font-family: Pixellari;
    src: url(../fonts/Pixellari.ttf);
}

body {
    background-image: url(../images/bg-tile.gif);
    --backgroundColor: "";
    --paleAntique: #FDF5EC;
    --palePink: #FDEDEC;
    --paleGreen: #FBFDEC;
    --midAntique: #faebd7;
    --midPink: #FADAD7;
    --midGreen: #F7FAD7;
    --drkGreen: #9FC7AA;
    --fontColor: #603C0C;
    --linkColor: #477B55;
    --mainBorder: 6px double var(--midPink);
}

::-moz-selection { /* Code for Firefox */
  background: var(--drkGreen);
}

::selection {
  background: var(--drkGreen);
}

#content {
    display: grid;
    grid-template:
        "header header header" auto
        "main main main" auto
        "footer footer footer" auto
        / 250px auto auto;
    max-width: 100%;
    width: 1200px;
    margin: 0 auto;
}

header {
    grid-area: header;
    display: grid;
    grid-template: 
        "logo links links links";
    text-align: left;
    padding: 5px 50px;
}

#logo {
    grid-area: logo;
}

#navlinks {
    padding: 0 1em;
    grid-area: links;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#linkcontainer {
    background-color: var(--paleAntique);
    border: var(--mainBorder);
    padding: 1em;
    filter: drop-shadow(3px 3px 0px #6f6f6f);
}

#linkcontainer > a {
    font-family: Pixellari;
    font-size: 18px;
    margin: 0 10px;
    font-weight: normal;
    color: var(--drkGreen);
}

#linkcontainer > a:hover {
    border-bottom: 3px solid #9FC7AA;
    text-decoration: none;
}

.square {
    vertical-align: text-top;
    line-height: 0.8;
}

header img {
    filter: drop-shadow(3px 3px 0px #6f6f6f);
}

#maincontainer {
    grid-area: main;
    display: grid;
    grid-template:
        "aside main main" auto
        / 250px auto auto;
    filter: drop-shadow(3px 3px 0px #6f6f6f);
}

main {
    grid-area: main;
    background-color: var(--paleAntique);
    padding: 1em;
    border: var(--mainBorder);
    border-left: none;
    color: var(--fontColor);
}

aside {
    grid-area: aside;
    background-color: var(--midAntique);
    padding: 1em;
    border: var(--mainBorder);
    border-right: none;
    color: var(--fontColor);
}

main > section {
    padding: 2em;
}

aside > hr {
    margin: 1em 0;
}

hr {
    background: var(--midPink);
    background: linear-gradient(90deg, rgba(250, 218, 215, 0) 0%, rgba(250, 218, 215, 1) 20%, rgba(250, 218, 215, 1) 80%, rgba(250, 218, 215, 0) 100%);
    height: 2px;
    border: none;
}

p {
    font-family: RainyHearts;
    font-size: 17px;
}

h2 {
    font-family: Pixellari;
    font-size: 25px;
}

footer {
    grid-area: footer;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    padding: 10px;
}

#footercontent {
    background-color: var(--paleAntique);
    border: var(--mainBorder);
    padding: 0 10px;
    filter: drop-shadow(3px 3px 0px #6f6f6f);
}

.badges {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#div1 {
    text-align: center;
}

#div1 > img {
    margin: 1em;
}

#buttonsmarquee {
  overflow: hidden;
  display: flex;
  margin: 0.5em 0;
}

#blinkiesmarquee {
  overflow: hidden;
  display: flex;
  margin: 0.5em 0;
}

#blinkiesmarquee img {
    height: 20px;
    width: auto;
}

#marqueecontents{
  white-space: nowrap;
}

#marqueecontents > img {
    margin: 0 0.25em;
}

#currently {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: RainyHearts;
    line-height: 20px;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
}

#currently img {
    height: 15px;
    width: auto;
}

#currently p {
    margin: 0;
    display: inline;
}

#currently li {
    margin-bottom: 10px;
}

#currently a {
    text-decoration: none;
    color: var(--fontColor);
    font-weight: normal;
}

#currently a:hover {
    text-decoration: underline;
}

.pollcontents {
    padding:2px;
    width:200px;
}

.pollheader {
    padding:2px 0px 4px 2px;
    font-family: Pixellari;
    font-size: 14px;
}

.pollanswer {
    float:left;
    width:175px;
    font-family: RainyHearts;
}

.pollbutton {
    float:left;
}

#featured-title {
    font-family: Pixellari;
    margin: 0;
}

#featured-page h2 {
    margin-bottom: 10px;
}

#featured-page p {
    margin-top: 10px;
}

#tip-jar {
    display: flex;
    align-items: center;
    color: var(--fontColor);
    font-weight: normal;
}

#tip-text p {
    display: inline;
}

#tip-text img {
    height: 15px;
    width: auto;
}

#tip-jar > img {
    height: 98px;
    width: auto;
}

#tip-jar:hover p {
    text-decoration: underline;
}

a {
    font-weight: bold;
    color: var(--linkColor);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h3 {
    font-family: Pixellari;
    font-size: 23px;
}

h4 {
    font-family: RainyHearts;
    font-weight: bold;
    font-size: 20px;
}

#featured-page a {
    color: var(--fontColor);
}

#featured-page a:hover {
    text-decoration: none;
}

#featured-page a p {
    font-weight: normal;
}

#featured-page a:hover p {
    text-decoration: underline;
}

#featured-page img {
    height: 16px;
    width: auto;
}