body {
  padding: 5vh 20vw 5vh 20vw;
  background: #fdf6e3;
  color: #073642;
  font-family: 'Source Sans Pro'; sans-serif;
}

code {
  font-family: 'League Mono'; monospace;
  font-size: 1em;
}

pre {
  font-size: 1.2em;
}

figure {
  padding: 10px;
  border-style: solid;
  border-width: 4px;
  border-color: #268bd2;
}

figcaption {
  padding: 10px;
  border-style: solid;
  border-width: 4px;
  border-color: #2aa198;
}

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
}

h1, h2, h3 {
  color: #dc322f;
}

#zine-title {
  font-size: 4em;
}

#zine-tagline {
  font-size: 2em;
}

#italics {
  background-color: #268bd2;
  color: #fdf6e3;
  font-family: mnicmp;
  font-size: 4em;
  text-align: center;
  padding: 36px 7vw 20px 7vw;
  margin: 20 0 20 0;
}

#h2-div {
  padding: 0 17vw 0 17vw;
}

#h2-box {
  text-align: center;
  width: 20vw;
  padding: 10px;
  border-style: dashed;
  border-width: 4px;
  border-color: #dc322f;
}

#body-box {
  padding: 0px 5px 0px 5px;
  border-style: dashed;
  border-width: 4px;
  border-color: #93a1a1;
}

#circle {
  width: 15em;
  height: 15em;
  border-radius: 50%;
  border-style: solid;
  border-width: 4px;
  border-color: #b58900;
}

#p-circle {
  text-align: center;
}

#box-emoji{
  padding: 2px;
  border-style: dashed;
  border-width: 4px;
  border-color: #2aa198;
}

#emoji-code {
        margin-top: 35;
        margin-left: 20;
}
#p-last {
  margin: 40 0 40 0;
}

#green-circle-static {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #2aa198;
}

#green-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #2aa198;
  margin-left: 100%;
}

#green-circle {
  animation: slide-in forwards 1s 2s ease-out;
}

@keyframes slide-in {
        from {margin-left:100%;}
        to {margin-left:0%;}
}

.p-box {
  padding: 40px 10px 40px 10px;
  border-style: dashed;
  border-width: 4px;
  border-color: #268bd2;
}

.boring {
  color: red;
}

.buttons {
    padding: 40px 10px 40px 10px;
}

.special {
  color: goldenrod;
}

.comic {
  font-family: 'Comic Relief';
}

.vibrant {
  color: chartreuse;
}

.big-link {
  font-family:'League Mono';
  font-weight: bold;
  font-size: 2em;
  color: #6c71c4;
}

.solarized-blue {
  color: #268bd2;
}

.solarized-gold {
  color: #b58900;
}

.solarized-green {
  color: #2aa198;
}

.solarized-grey {
  color: #586e75;
  font-style: italic;
}

.solarized-violet {
  color: #6c71c4;
}

.solarized-red {
  color: #dc322f;
}

@font-face {
    font-family: 'Comic Relief';
    src: url('./fonts/ComicRelief/ComicRelief.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Comic Relief';
    src: url('./fonts/ComicRelief/ComicRelief-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('./fonts/SourceSansPro/SourceSansPro-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('./fonts/SourceSansPro/SourceSansPro-Bold.otf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('./fonts/SourceSansPro/SourceSansPro-It.otf');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('./fonts/SourceSansPro/SourceSansPro-BoldIt.otf');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'League Mono';
    src: url('./fonts/LeagueMono/LeagueMono-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'League Mono';
    src: url('./fonts/LeagueMono/LeagueMono-Bold.otf');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'mnicmp';
    src: url('./fonts/mnicmp/mnicmp-BoldItalic.otf');
    font-weight: bold;
    font-style: italic;
}