* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(#edd624, #adc90e);
    opacity: 100%;
    color: /*#b4b4b4*/#adc90e;
    font-size: 20vh;
    font-family: "mrs-eaves", serif;
    cursor: url('image/glyph_cursor_wallpaper1.svg'), auto;
}

img {
    object-fit: cover;
    -webkit-mask-image: linear-gradient(black, transparent 100%);
}

section {
    position: relative;
    display: flex;
    height: calc(100vh - 100px);
    top: 150px;
    z-index: 2;
}

section.sticky {
    position: sticky;
    margin-top: 400px;
}

section.first-words {
    top: 0;
    margin-top: 0;
    margin: 140px;
    padding: 100px;
    z-index: 2;
}

section.part6 {
    margin: 0;
    padding: 0;
    z-index: 3;
}

section.end-page-website{
  margin: 0;
  padding: 0;
  z-index: 4;
  align-items: center;
  justify-content: center;
}

section div img.end-pages-website{
  margin: 85px;
  padding: 90px;
  transition: filter 2s cubic-bezier(.77, .28, .42, .93);
  will-change: filter;
  object-fit: contain;
}

section div img.end-pages-website:hover{
  filter: blur(20px);
}

div p span.wallpaper:hover {
  max-width: 20px;
  letter-spacing: -0.0001em;
  line-height: 20%;
  font-size: 100px;
  font-style: italic;
  margin: 10px;
  padding: 10px;
  color: #ffea00;
  cursor: url('image/glyph_cursor_wallpaper2.svg'), auto;
  transition: filter 3s cubic-bezier(.77, .28, .42, .93);
}

div p span.john-quotes:hover {
    max-width: 20px;
    font-family: "adobe-jenson-pro", serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 50;
    line-height: 20%;
    margin: 10px;
    padding: 10px;
    color: #a6932c;
    opacity: 30%;
    cursor: url('image/glyph_cursor_john.svg'), auto;
    transition: filter 3s cubic-bezier(.77, .28, .42, .93);
}

div p span.jenny-thoughts:hover {
    max-width: 20px;
    font-family: "mrs-eaves", serif;
    font-style: italic;
    font-size: 35px;
    line-height: 20%;
    margin: 10px;
    padding: 10px;
    color: #adc90e;
    opacity: 80%;
    cursor: url('image/glyph_cursor_jenny.svg'), auto;
    transition: filter 3s cubic-bezier(.77, .28, .42, .93);
}

div p span.john-thoughts:hover {
    max-width: 20px;
    font-family: "mrs-eaves", serif;
    font-style: italic;
    font-size: 35px;
    line-height: 20%;
    margin: 10px;
    padding: 10px;
    color: #a6932c;
    opacity: 60%;
    cursor: url('image/glyph_cursor_john.svg'), auto;
    transition: filter 3s cubic-bezier(.77, .28, .42, .93);
}

div p span.narrator-thoughts:hover {
  max-width: 20px;
  font-family: "mrs-eaves", serif;
  font-style: italic;
  font-size: 35px;
  line-height: 20%;
  margin: 10px;
  padding: 10px;
  color: #b4b4b4;
  opacity: 80%;
  cursor: url('image/glyph_cursor_narrator.svg'), auto;
  transition: filter 3s cubic-bezier(.77, .28, .42, .93);
}

p {
  margin: 0;
  padding: 0;
  line-height: 10%;
  text-align: left;
  opacity: 30%;
  letter-spacing: -0.009em;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "dlig" 1;
}

/*phone accesibility*/

@media only screen and (max-width: 768px) {
    html, * {
      font-size: 10vh;
      cursor: auto;
      margin: 0;
      padding: 0;
    }

    img.front-pages {
      width: 100vw;
      height: 700px;
    }

    section {
      width: 350px;
      height: 100vh;
    }

    section.first-words {
      top: 0;
      margin-top: 0;
      margin: 20px;
      padding: 15px;
      z-index: 2;
    }
    section div img.end-pages-website{
      margin: 10px;
      padding: 10px;
      padding-left: 100px;
      transform: rotate(90deg);
    }
}