/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.draggable {
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: move;
  cursor: grab;
  cursor: -webkit-grab;
}

.dragging {
  position: fixed;
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

::-moz-selection {
  /* Code for Firefox */
  background: rgba(255, 255, 255, 0);
}

::selection {
  background: rgba(255, 255, 255, 0);
}

body {
  background-color: white;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: "Georgia", Arial, Helvetica, sans-serif;
  /* font-size: 34px; */
  text-decoration: none;
  font-size: 1.1vw;
}

p {
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

header {
  text-align: left;
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 2.5px;
}

a {
  background: rgba(0, 0, 0, 0);
  color: rgb(255, 0, 0);
  text-decoration: none;
  cursor: pointer;
  z-index: 1;  
  font-size: 1em;
}

.active {
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
}

nav a {
  padding: 5px;
}

.spell {
  padding: 2.5px;
  margin: 5px;
}

.spellword {
  position: absolute;
  /* transition: left 0.3s ease-in-out, top 0.3s ease-in-out; */
}

#spellword-container.sort {
  top: 1.8em;
  position: fixed;
  width: 100vw;
  padding-left: 5px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0px 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto) 1.5px minmax(0, auto);
  grid-template-columns: 0px repeat(19, minmax(0, auto));
  grid-gap: 1.5px;
  /* transition: grid-template-columns 0.3s ease-in-out; */
}

#spellword-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

p.quote {
  margin: 3px;
  padding: 4px;
  padding-left: 6px;
  padding-bottom: 2px;
  font-family: "Georgia", Times, serif, Helvetica, sans-serif, sans-serif;
  line-height: 1.15em;
  font-weight: initial;
  font-size: 0.95em;
  color: rgb(106, 0, 255);
}

p.author {
  margin: 3px;
  padding: 4px;
  padding-left: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
  font-size: 0.65em;
  color: rgb(106, 0, 255);
}

.highlight {
  font-family: "Georgia";
  color: rgb(255, 0, 0);
  cursor: pointer;
}

.quote-block {
  text-decoration: none;
  opacity: 0;
  position: absolute;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.2);
  margin: 4px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  max-width: 220px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  pointer-events: none;
}

.quote-block.active {
  /* display: block; */
  opacity: 1;
  pointer-events: all;
  cursor: grab;
  cursor: -webkit-grab;
}

button {
  font-family: "Georgia", "Times New Roman", Times, serif;
  background-color: rgba(0, 0, 0, 0); /* Green background color */
  color: rgb(255, 0, 0);
  border: none;
  cursor: pointer;
  padding: 5px;
  font-size: 1em;
}

button:hover {
  text-decoration: underline;
}

.button-container {
  top: 0;
  right: 0;
  margin: 2.5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
}

#invisible {
  bottom: 20;
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 1400px) {
  body {
    font-size: 16px;
  }
}

  p.quote {
    font-size: 15px;
  }

  p.author {
    font-size: 10px;
  }

@media screen and (max-width: 900px) {
    p.quote {
      font-size: 36px;
    }

    a, button {
      font-size: 16px;
    }

    #spellword-container.sort {
      width: 100vw;
      padding-left: 7.5px;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      grid-gap: 1.5px;
    }

    ::-moz-selection {
        background: rgba(106, 0, 255, 1);
        color: white;
      }
      
      ::selection {
        background: rgba(106, 0, 255, 1);
        color: white;
      }
      
      body {
        background-color: white;
        margin: 0;
        overflow: hidden;
        padding: 0;
        font-family: "Georgia", "Times New Roman", Times, serif;
        /* font-size: 34px; */
        text-decoration: none;
      }
      
      p {
        text-rendering: optimizeLegibility;
        -webkit-font-variant-ligatures: common-ligatures;
                font-variant-ligatures: common-ligatures;
        -webkit-font-feature-settings: "liga", "clig";
        font-feature-settings: "liga", "clig";
      }
      
      header {
        text-align: left;
        position: fixed;
        top: 0;
      }
      
      nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      
      a {
        color: rgb(255, 0, 0);
        text-decoration: none;
        cursor: pointer;
        z-index: 1;
      }
      
      .active {
        text-decoration: underline;
      }
      
      a:hover {
        text-decoration: underline;
      }
      
      nav a {
        padding: 5px;
      }
      
      .spell {
        padding: 2.5px;
        margin: 5px;
      }
      
      .spellword {
        position: absolute;
        /* transition: left 0.3s ease-in-out, top 0.3s ease-in-out; */
      }
      
      #spellword-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      
      p.quote {
        font-family: "Georgia", Times, serif, Helvetica, sans-serif, sans-serif;
        line-height: 1.15em;
        font-weight: initial;
        color: rgb(106, 0, 255);
        outline: 1px black;
        margin-bottom: 0.5em;
        margin-top: 1em;
        text-rendering: optimizeLegibility;
        cursor: text;
      }
      
      p.author {
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: lighter;
        font-size: 11px;
        color: rgb(106, 0, 255);
      }
      
      .highlight {
        font-family: "Georgia";
        color: rgb(255, 0, 0);
        cursor: pointer;
      }
      
      #quote-block-container {
        height: 100vh;
        width: 100vw;
        max-width: 100vw;
        overflow-y: scroll;
        overflow-x: hidden;
        -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory;
        scroll-snap-stop: always; /* Ensure consistent snap behavior */
      }
      
      .quote-block {
        display: none;
        position: static;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        scroll-snap-align: start;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; /* Include padding in height calculation */
        padding: 20px; /* Adjust padding as needed */
        margin: 0; /* Remove default margins */
        height: 100vh;
        width: 100vw;
        max-width: 100vw;
        text-align: center;
        text-decoration: none;
        background-color: rgba(255, 255, 255, 0);
        margin: 0px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      
      .quote-block.active {
        display: block;
        opacity: 1;
        pointer-events: all;
        cursor: s-resize;
      }
      
      footer {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
      
      #invisible {
        bottom: 20;
        opacity: 0;
        pointer-events: none;
      }
      
      button {
        font-size: 1em;
        font-family: "Georgia", "Times New Roman", Times, serif;
        background-color: rgba(0, 0, 0, 0); /* Green background color */
        color: rgb(255, 0, 0);
        border: none;
        cursor: pointer;
        padding: 5px;
      }
      
      button:hover {
        text-decoration: underline;
      }
      
      .button-container {
        top: 0;
        right: 0;
        margin: 2.5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
      }

      #button-text {
        display: none;
      }
}


@media screen and (max-width: 500px) {
    p.quote {
      font-size: 26px;
    }

    a {
      font-size: 16px;
    }

    #spellword-container.sort {
      width: 100vw;
      padding-left: 7.5px;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      grid-gap: 1.5px;
    }

    ::-moz-selection {
        background: rgba(106, 0, 255, 1);
        color: white;
      }
      
      ::selection {
        background: rgba(106, 0, 255, 1);
        color: white;
      }
      
      body {
        background-color: white;
        margin: 0;
        overflow: hidden;
        padding: 0;
        font-family: "Georgia", "Times New Roman", Times, serif;
        /* font-size: 34px; */
        text-decoration: none;
      }
      
      p {
        text-rendering: optimizeLegibility;
        -webkit-font-variant-ligatures: common-ligatures;
                font-variant-ligatures: common-ligatures;
        -webkit-font-feature-settings: "liga", "clig";
        font-feature-settings: "liga", "clig";
      }
      
      header {
        text-align: left;
        position: fixed;
        top: 0;
      }
      
      nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      
      a {
        color: rgb(255, 0, 0);
        text-decoration: none;
        cursor: pointer;
        z-index: 1;
      }
      
      .active {
        text-decoration: underline;
      }
      
      a:hover {
        text-decoration: underline;
      }
      
      nav a {
        padding: 5px;
      }
      
      .spell {
        padding: 2.5px;
        margin: 5px;
      }
      
      .spellword {
        position: absolute;
        /* transition: left 0.3s ease-in-out, top 0.3s ease-in-out; */
      }
      
      #spellword-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      
      p.quote {
        font-family: "Georgia", Times, serif, Helvetica, sans-serif, sans-serif;
        line-height: 1.15em;
        font-weight: initial;
        color: rgb(106, 0, 255);
        outline: 1px black;
        margin-bottom: 0.5em;
        margin-top: 1em;
        text-rendering: optimizeLegibility;
        cursor: text;
      }
      
      p.author {
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: lighter;
        font-size: 11px;
        color: rgb(106, 0, 255);
      }
      
      .highlight {
        font-family: "Georgia";
        color: rgb(255, 0, 0);
        cursor: pointer;
      }
      
      #quote-block-container {
        height: 100vh;
        width: 100vw;
        max-width: 100vw;
        overflow-y: scroll;
        overflow-x: hidden;
        -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory;
        scroll-snap-stop: always; /* Ensure consistent snap behavior */
      }
      
      .quote-block {
        display: none;
        position: static;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        scroll-snap-align: start;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; /* Include padding in height calculation */
        padding: 20px; /* Adjust padding as needed */
        margin: 0; /* Remove default margins */
        height: 100vh;
        width: 100vw;
        max-width: 100vw;
        text-align: center;
        text-decoration: none;
        background-color: rgba(255, 255, 255, 0);
        margin: 0px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      
      .quote-block.active {
        display: block;
        opacity: 1;
        pointer-events: all;
        cursor: s-resize;
      }
      
      footer {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
      
      #invisible {
        bottom: 20;
        opacity: 0;
        pointer-events: none;
      }
      
      button {
        font-size: 1em;
        font-family: "Georgia", "Times New Roman", Times, serif;
        background-color: rgba(0, 0, 0, 0); /* Green background color */
        color: rgb(255, 0, 0);
        border: none;
        cursor: pointer;
        padding: 5px;
      }
      
      button:hover {
        text-decoration: underline;
      }
      
      .button-container {
        top: 0;
        right: 0;
        margin: 2.5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
      }

      #button-text {
        display: none;
      }
}