@font-face {
  font-family: "SvenskaSpelPlatform";
  src: local("SvenskaSpelPlatform-Regular"),
    url("./fonts/SvenskaSpelPlatform-Regular.woff") format("woff"),
    url("./fonts/SvenskaSpelPlatform-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "SvenskaSpelPlatform";
  src: local("SvenskaSpelPlatform-Medium"),
    url("./fonts/SvenskaSpelPlatform-Medium.woff") format("woff"),
    url("./fonts/SvenskaSpelPlatform-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "SvenskaSpelPlatform";
  src: local("SvenskaSpelPlatform-Bold"),
    url("./fonts/SvenskaSpelPlatform-Bold.woff") format("woff"),
    url("./fonts/SvenskaSpelPlatform-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "TipsetRegular";
  src: url("./fonts/tipset-regular.eot?") format("eot"),
    url("./fonts/tipset-regular.woff") format("woff"),
    url("./fonts/tipset-regular.otf") format("truetype");
}
@font-face {
  font-family: "TipsetBold";
  src: url("./fonts/tipset-bold.eot?") format("eot"),
    url("./fonts/tipset-bold.woff") format("woff"),
    url("./fonts/tipset-bold.otf") format("truetype");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #fff;
  background-color: #f7f8f9;
  font-family: "SvenskaSpelPlatform";
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: #001932;
  -webkit-touch-callout: none;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  font-size: 16px;
  line-height: 18px;
}
.top {
  display: flex;
  height: 80vh;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-image: url(../assets/header.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  .content {
    margin-bottom: -50px;

    text-align: center;
    text-shadow: 0px 0px 43.1px #f7f8f8, 0px 0px 44.3px #f7f8f8,
      0px 0px 102.2px #f7f8f8, 0px 0px 25.2px #f7f8f8;
    h1 {
      font-size: 80px;
      line-height: 84px;
      font-weight: bold;
    }
    p {
      font-size: 48px;
      line-height: 55px;
    }
  }
}
.main-content {
  display: flex;
  margin: auto;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  padding-top: 32px;
  padding-bottom: 150px;
  .info {
    padding-top: 50px;
    font-size: 24px;
    text-align: center;
    max-width: 900px;
    padding-bottom: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    a,
    a:visited,
    a:hover,
    a:active {
      text-decoration: none;
      color: #0f79e4;
    }
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 182px;
    font-size: 32px;
    margin: 30px 0px;
    p {
      display: block;
    }
    .left {
      opacity: 0;
    }
    .left,
    .right {
      display: block;
      width: 34px;
      height: 34px;
      background-image: url(../assets/left.png);
      background-repeat: no-repeat;
      background-position: center;
    }
    .right {
      background-image: url(../assets/right.png);
    }
  }
  .jcarousel,
  .jcarousel_mp3 {
    position: relative;
    overflow: hidden;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    ul {
      width: calc(100% * 13);
      position: relative;
      list-style: none;
      margin: 0;
      padding: 0;
      height: inherit !important;
      li {
        width: calc(100% / 13);
        float: left;
        padding: 10px;

        .mp3holder {
          margin: auto;
          width: 80%;
          background-color: #001932;
          border-radius: 8px;
          display: flex;
          flex-direction: row;
          overflow: hidden;
          color: white;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15),
            0px 4px 4px 0px rgba(0, 0, 0, 0.25);

          .square {
            display: block;
            width: 236px;
            height: 236px;
            background-image: url(../assets/mp.png);
            background-repeat: no-repeat;
          }
          .mp_content {
            display: flex;
            padding: 24px 56px;
            flex-direction: column;
            font-family: "SvenskaSpelPlatform";
            flex: 0.9;
            justify-content: center;
            .title {
              text-transform: uppercase;
              font-size: 40px;
              font-weight: 700;
              line-height: normal;
            }
            .sub {
              font-size: 24px;
              font-style: italic;
              font-weight: 400;
              line-height: normal;
            }
            .player {
              margin-top: 20px;
              display: flex;
              gap: 24px;
              align-items: flex-end;
              .playBtn {
                display: block;
                width: 41px;
                height: 41px;
                background-image: url(../assets/play.png);
                background-size: cover;
                &.pause {
                  background-image: url(../assets/pause.png);
                }
              }
              .progressHolder {
                display: flex;
                flex-grow: 1;
                flex-direction: column;
                gap: 5px;
                .progress {
                  background-color: #4f6ca9;
                  border-radius: 10px;
                  display: block;
                  height: 7px;
                  width: 100%;
                  position: relative;
                  z-index: 12;

                  .bar {
                    z-index: 10;
                    background-color: #fff;
                    display: block;
                    position: absolute;
                    width: 0%;
                    border-radius: 10px;
                    height: 7px;
                  }
                }
                .time {
                  font-size: 12px;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                }
              }
            }
          }
        }
        .novel {
          height: 100% !important;
          background-color: #fff;
          max-width: 1070px;
          margin: auto;
          gap: 32px;
          display: flex;
          padding: 88px 88px 88px 88px;
          flex-direction: column;
          align-items: center;
          font-size: 24px;
          font-style: normal;
          font-weight: 400;
          line-height: 35.6px;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15),
            0px 4px 4px 0px rgba(0, 0, 0, 0.25);
          h2 {
            font-size: 56px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
          }
          h3 {
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            text-align: center;
          }
          span {
            font-variant: all-small-caps;
          }
        }
      }
    }
  }
   .intent{
    text-indent: 1em;
     margin-bottom: -1.2em;
 }

 .start {
    margin-bottom: -1.2em;
 }


}
.mobile {
  .top {
    height: unset;
    aspect-ratio: 1/1;
    background-image: url(../assets/headerMobile.png);
    background-position: center center;
    background-size: contain;
    .content {
      text-align: center;
      margin-bottom: 0px;
      h1 {
        font-size: 44px;
        line-height: 50px;
        font-weight: bold;
      }
      p {
        font-size: 24px;
        line-height: 25px;
      }
    }
  }
  
  .mp3holder {
    flex-direction: column !important;
    .square {
      width: 100% !important;
      height: unset !important;
      aspect-ratio: 1 / 1 !important;
      background-size: cover !important;
    }
    .mp_content {
      padding: 34px 20px !important;
      text-align: center;
    }
    .title {
      font-size: 24px !important;
    }
    .sub {
      font-size: 18px !important;
    }
    .playBtn {
      width: 60px !important;
      height: 60px !important;
    }
    .player {
      gap: unset !important;
      flex-direction: column-reverse !important;
      flex: 1 !important;
      width: 100% !important;
      align-items: center !important;
    }
    .progressHolder {
      width: 90% !important;
    }
  }
  .main-content {
    max-width: 90%;
  }
  .pagination {
    font-size: 16px;
  }
  .info {
    padding-top: 0px;
    font-size: 16px;
    padding-bottom: 20px;
  }
  .novel {
    padding: 56px 20px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    h2 {
      font-size: 32px !important;
    }
    h3 {
      font-size: 16px !important;
    }
  }
   .intent{
    text-indent: 1em;
     margin-bottom: -2.2em;
 }

 .start {
    margin-bottom: -2.2em;
 }
}