@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Fira+Sans:400|Playfair+Display');

header {
  display: none;
}
ul, ol {
    padding-left:38px;
}
.content {
    position:relative;
}

#title {
  font-family: 'Playfair Display', cursive;
}

#first-title {
  font-size: 70px;
  font-family: 'Dancing Script', cursive;
}

#side-title {
  font-family: 'Dancing Script', cursive;
  z-index: -1;
}

#first-title, #side-title, #title {
  top: 80px;
  min-width: 380px;
  display: block;
  font-weight: normal;
}


#first-title span {
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-name: pulse;
  animation-direction: alternate;
}

* {
  padding: 0;
  margin: 0;
}

body {
  max-width: 675px;
  margin: auto;
  font-size: 20px;
  font-family: "Fira Sans";
  background: #eee;
  padding-bottom: 66px;
  padding-left: 30px;
  padding-right: 30px;
}

p {
  margin-top:20px;
}

.table-of-contents em {
  font-size: 16px;
  width: 103px;
  display: inline-block;
}

.table-of-contents a {
  margin-left:10px;
}

.table-of-contents ul {
  list-style: none;
  padding-left: 0px;
}

.table-of-contents ul li::before {
  content: inherit;
  padding: none;
}

ol {
  margin-top: 10px;
}


a, a:hover, a:visited {
  text-decoration: none;
  color: #ff669e;
}

h1:not(#first-title):not(#title):not(#side-title) {
  margin-top: 40px;
  font-size: 26px;
  font-weight: normal;
  text-decoration: underline;
}

h2 {
  margin-top: 40px;
  font-size:22px;
  font-weight: normal;
  text-decoration: underline;
}

h1#title:not(#first-title) {
    font-size: 46px;
}

h3, h4 {
  margin-top: 40px;
  font-size: 22px;
  font-weight: normal;
  text-decoration: underline;
}

div.sourceCode {
  margin-top: 20px;
  margin-bottom: 8px;
  padding: 18px;
  border-left: 5px solid #ff669e;
  margin-left: 15px;
}

li {
}

pre {
  background: lavender !important;
}

pre code {
  font-size: 18px;
}

p code, table code, li code {
  color: #ff669e;
  border: 1px #555 solid;
  display: inline-block;
  background: #eee;
  font-size: 16px;
  padding: 2px 5px;
  border-radius: 2px;
}


#first-title span:nth-child(1), #side-title span:nth-child(1)  {
  animation-delay: -1.2s;
}
#first-title span:nth-child(2), #side-title span:nth-child(2)  {
  animation-delay: -1.1s;
}
#first-title span:nth-child(3), #side-title span:nth-child(3)  {
  animation-delay: -1s;
}
#first-title span:nth-child(4), #side-title span:nth-child(4)  {
  animation-delay: -0.9s;
}
#first-title span:nth-child(5), #side-title span:nth-child(5)  {
  animation-delay: -0.8s;
}
#first-title span:nth-child(6), #side-title span:nth-child(6)  {
  animation-delay: -0.7s;
}
#first-title span:nth-child(7), #side-title span:nth-child(7)  {
  animation-delay: -0.6s;
}
#first-title span:nth-child(8), #side-title span:nth-child(8)  {
  animation-delay: -0.5s;
}
#first-title span:nth-child(9), #side-title span:nth-child(9)  {
  animation-delay: -0.4s;
}
#first-title span:nth-child(10), #side-title span:nth-child(10)  {
  animation-delay: -0.3s;
}
#first-title span:nth-child(11), #side-title span:nth-child(11)  {
  animation-delay: -0.2s;
}
#first-title span:nth-child(12), #side-title span:nth-child(12)  {
  animation-delay: -0.1s;
}


@keyframes pulse {
  0% {
  color: #FFFF99; }
  34% {
  color: #FFA3C2; }
  56% {
  color: #DBB8FF; }
  78% {
  color: #99CCFF; }
  100% {
  color: #99FF99; }
}


#side-title {
  position: absolute;
  font-size: 50px;
}

#side-title a { color:black; }

#side-title .wrapper {
  white-space: nowrap;
}

#side-title span.wrapper::after {
  content: "";
  background-size: 100%;
  display:block;
  position: relative;
  z-index: -1;
}

#side-title a:hover span {
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-name: pulse;
  animation-direction: alternate;
}

@media (max-width: 890px) {
  #side-title {
    left: 30px;
    top:-80px;
    padding-left: 70px;
  }
  #side-title a {
    border-bottom: 3px solid white;
  }
  #side-title span.wrapper::after{
  background-image: url("/images/purple.png");
    width: 50px;
    height: 50px;
    top: -54px;
    left: -70px;
  }
  body {
    padding-top:120px;
  }
}

@media (min-width: 890px) {
  #side-title {
    left: -120px;
    top: 180px;
  }
  #side-title span.inside-wrapper {
    display:block;
    transform: rotate(270deg);
    transform-origin: left top 0;
    position:relative;
    top:45px;
    left:8px;
    color:blue !important;
  }
  #side-title span.wrapper::after{
  background-image: url("/images/purple.svg");
  width:129px;
  height:129px;
  left:2px;
  top:0px;
  }
  body {
    padding-top:60px;
  }
}


video {
  border: none;
  outline: none;
}

img {
  padding-top: 20px;
  width: 100%;
}

.postscript {
  font-size: 12px;
  padding-top:40px;
  line-height: 1 !important;
}

.scream {
  font-size: 50px;
  display: block;
}