:root{
    --crust: #181926;
    --mantle: #1e2030;
    --base: #24273a;
    --surface0: #363a4f;
    --surface1: #494d64;
    --red: #ed8796;
    --blue: #8aadf4;
    --mauve: #c6a0f6;
    --text: #cad3f5;
    font-size: clamp(1rem, 2.5wv, 2rem);
}
* {
    color: var(--text);
    font-family: monospace;
}
body{
/*    border: 2px solid green;*/
    background-color: var(--crust)
}
.webpage{
    margin: auto;
    padding: 4px;
    background-color: var(--mauve);
    border: 2px solid var(--mauve);
    border-radius: 15px;
}

.header{
    margin: 0px;
    color: var(--base);
    font-size: clamp(2rem, 2.5wv, 3rem);
/*     text-align: center; */
}

.parent {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 20% 80%;
    gap: 0px;
    background-color: var(--base);
/*     border: 2px solid blue; */
    border-radius: 15px;
}

.item {
    width: 100%;
    height: 100%;
    color: var(--base);
    margin: 0px;
/*     background-color: pink; */
/*     border: 2px solid red; */
/*    border-radius: 15px;*/
}
#lista {
    background-color: var(--surface0);
    justify-content: center;
    align-content: center;
    list-style: none;
    padding: 0;
}
li {
    color: var(--blue);
    text-align: center;
    font-size: 2.4vw;
    margin: 20px
}
li:hover {
    color:  var(--blue);
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-color: var(--red)
}
#frame {
    width: 2px%;
    height: 100%;
    display: block;
/*    grid-column: 2;*/
}
span{
    color: var(--blue)
}