h {
    font-family: monospace;
    position: absolute;
    text-align: center;
    width: 100vw;
}
.expr{
    font-style: italic;
}
#dos {
    position: absolute;
    font-size: 15px;  /* ⬅ bigger text */
    top: 9vh;
    width: 100vw;
    text-align: center;
    font-family: monospace;
}

#text {
    position: absolute;
    top: 22vh;
    left:45vw;
    width: 10vw;
    text-align: center;
    font-family: monospace;
    font-size: 20px;  /* ⬅ bigger text */
    line-height: 1.8; /* ⬅ increased spacing */
}

.trigger {
    display: block;   /* ⬅ prevents overlap */
    margin: 15px 0;            /* ⬅ space between words */
    cursor: pointer;
}

.trigger:hover {
    cursor: pointer;
    color: red;
}
.popup-box {
    position: fixed;
    left: 2vw;
    bottom: 7vh;
    width: 22vw;
    padding: 25px;
    text-align: center;
    font-size: 50px;
    background: hsl(223, 79%, 21%);
    color: rgb(64, 255, 0);
    border: 10px double rgb(255, 239, 99);
    font-family: Times;
    z-index: 10;
    /* hide by default */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

#home {
    position: absolute;
    top: 1.5vh;
    width: 100vw;
    font-family: monospace;
    font-size: larger;
}

#arrows {
    position: fixed;
    right: 1vw;
    width: 100vw;
    text-align: right;
    font-family: monospace;
    font-size: larger;
}


#next:link {
    color:black;
    text-decoration: none;
    transition: font-size 0.5s ease;

}
#next:visited {
    color:black;
    text-decoration: none;
}
#next:hover {
    color:rgb(228, 226, 71);
    font-style: bold;
    font-size: 20px;
}
#next:active {
    color:yellow;
}

#prev:link {
    color:black;
    text-decoration: none;
    transition: font-size 0.5s ease;

}
#prev:visited {
    color:black;
    text-decoration: none;
}
#prev:hover {
    color:rgb(228, 226, 71);
    font-style: bold;
    font-size: 20px;
}
#prev:active {
    color:yellow;
}