body {
   background-color: var(--surface-1);
   color: var(--text-1);
   overflow-x: hidden;
}

.latin_literature {
   margin: 0 auto;
   max-width: 45ch;
}

.latin_text {
   margin: 1em 0;
   font-size: 1.5em;
}

.dictionary {
   position: fixed;
   top: 0.5em;
   right: 0.5em;
   width: 2em;
   height: 2em;
   font-size: 2em;
   border: none;
   background-color: white;
   border-radius: 50%;
   box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.2);
   transition: transform 0.4s ease, box-shadow 0.4s ease;
   cursor: pointer;
   will-change: transform;
}
.dictionary:hover {
   transform: scale(1.05);
   box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.4);
}

.save {
   position: fixed;
   bottom: 0.5em;
   right: 0.5em;
   width: 2em;
   height: 2em;
   font-size: 2em;
   border: none;
   background-color: white;
   border-radius: 0.3em;
   box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.2);
   transition: transform 0.4s ease, box-shadow 0.4s ease;
   cursor: pointer;
}
.save:hover {
   transform: scale(1.05);
   box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.4);
}

.load {
   position: fixed;
   bottom: 0.5em;
   left: 0.5em;
   width: 2em;
   height: 2em;
   font-size: 2em;
   border: none;
   background-color: white;
   border-radius: 0.3em;
   box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.2);
   transition: transform 0.4s ease, box-shadow 0.4s ease;
   cursor: pointer;
   will-change: transform;
}
.load:hover {
   transform: scale(1.05);
   box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.4);
}

.word {
   --color: hsl(217, 100%, 68%);
   --color: hsl(6, 94%, 73%);
   --color: hsl(308, 90%, 76%);
   --color: hsl(114, 90%, 76%);
   --color: hsl(28, 96%, 70%);
   --color: hsl(61, 96%, 70%);
}

latin-sentence {
   display: block;
}
latin-sentence:not(:last-child) {
   border-bottom: 2px dashed hsl(0, 0%, 20%);
   margin-bottom: 0.5em;
}