*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  background: rgb(255, 238, 0);
  color: rgb(3, 17, 48);
  font-family:"Sorts Mill Goudy";
  margin: 0;
}

p {
  margin: 0 0 13px 0;
}

a {
  color: rgb(255, 255, 255);
  font-weight: 600;
}
h1{
  font-family:"Stint Ultra Expanded";
  font-size: 7vw;
}
h2{
  font-family:"Stint Ultra Expanded";
  font-size: 5vw;
  display: inline-block;
  margin-left: 50%;
}
h3{
  font-family:"Sorts Mill Goudy";
  font-size: 3vw;
}
h4{
  font-family:"Sorts Mill Goudy";
  font-size: 2vw;
}

.center { text-align: center; }

.container {
  width: 95%;
  max-width: 1220px;
  margin: 0 auto;
}

.episode {
  display: grid;
  grid-template-columns: 1fr 3fr;
  position: relative;
}
.three {
      display: grid;
  grid-template-columns: 1fr 3fr;
  position: relative;
    
}

.episode__number {
  font-size: 10vw;
  font-weight: 600;
  padding: 10px 0;
  position: sticky;
  top: 0;
  text-align: center;
  height: calc(10vw + 20px);
  transition: all 0.2s ease-in;
  color: rgb(2, 175, 255);
}

.episode__content {
  border-top: 2px solid #fff;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 10px;
  padding: 15px 0;
}

.episode__content .title {
  font-weight: 600;
}

.episode__content .story {
  line-height: 26px;
}

@media (max-width: 600px) {
  .episode__content {
    display: grid;
    grid-template-columns: 1fr;
  }
  h3{ font-size: 1em;
}
  .three{
  display: grid;
  grid-template-columns: 20% 80%;
  grid-gap: 10px;
  }
}

@media (max-width: 576px) {
  .episode__content .story {
    font-size: 15px;
  }
    h3{ font-size: 1em;
}
  .three{
  display: grid;
  grid-template-columns: 20% 80%;
  grid-gap: 10px;
  }
}


/*Selection*/
::-moz-selection { /* Code for Firefox */
  color: rgb(2, 7, 36);
  background: #02aefd;
}

::selection {
  color: rgb(2, 7, 36);
  background: #02aefd;
}


/*Cursor*/
#mouse-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 4px solid rgb(2, 175, 255);
  border-radius: 999px;
  pointer-events: none;
  z-index: 999;
  transition: top 0.025s ease, left 0.025s ease, transform 0.25s ease;
}

/*Social Icons*/

@font-face {
      font-family: 'fontello';
      src: url('/icon_font/fontello.eot');
      src: url('/icon_font/fontello.eot') format('embedded-opentype'),
           url('/icon_font/fontello.woff') format('woff'),
           url('/icon_font/fontello.ttf') format('truetype'),
           url('/icon_font/fontello.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
.demo-icon
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
/**/
/**/
.social-icons {
  padding: 10;
  list-style: none;
  display: inline-block;
  margin-right: auto;
  margin-left: 25%;
}
.social-icons li {
  display: inline-block;
  margin: 0.2em;
  position: relative;
  font-size: 1.2em;
  
}
.social-icons i {
  color: #020f29;
  position: absolute;
  top: 15px;
  transition: all 265ms ease-out;
}
.social-icons a {
  display: inline-block;
  text-decoration: none;
}
.social-icons a:before {
  content: " ";
  width: 1em;
  height: 1em;
  border-radius: 10%;
  display: block;
}
.social-icons a:hover:before {

  color: white;
}
.social-icons a:hover i {

color: white;
}

/**/


.icon-Arena{
    letter-spacing: -6px;
    font-size: 1.9em;
    margin-top: -0.1em;
    margin-left: -0.3em;
    font-weight: 300;
}