:root{
    --txt: #63CFD9;
    --bg: #dad7cd;
    --fg1: black;
    --fg2: #63CFD9;

    --rad: 0.25rem;
    --dist-small: .5rem;
    --dist-normal: 1rem;
    --dist-large: 2rem;

    --txt-size-small: 0.8rem;
    --txt-size-normal: 1rem;
    --txt-size-large: 1.2rem;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: var(--bg);
    font-family: 'Courier New', Courier, monospace;
}

.flex{
   display: flex;
}

.column{
   flex-direction: column;
}

.ju-co-ce{
   justify-content: center;
}

.al-it-ce{
   align-items: center;
}

.ju-co-sp{
   justify-content: space-between;
}

.al-it-sp{
   align-items: space-between;
}

.al-it-st{
   align-items: start;
}

.wrap{
   flex-wrap: wrap;
}

.scroll{
    overflow-y: scroll;
}

.pad-small{
   padding: var(--dist-small);
}

.pad-normal{
   padding: var(--dist-normal);
}

.gap-small{
   gap: var(--dist-small);
}

.gap-normal{
   gap: var(--dist-normal);
}

.bold{
   font-weight: bold;
}

dialog{
    width: 40rem;
    background-color: var(--bg);
    margin:1rem auto;
    border: 1px solid var(--fg2);
    padding: var(--dist-normal);

    h3{
        color: white;
        background-color: var(--fg1);
        width: 100%;
        padding: 0.25rem;
    }

    button{
      padding: var(--dist-small);
      border: 1px solid var(--fg2);
      color: var(--fg2);
    }

    button:hover{
       color: black;
       transform: scale(1.05);
    }

}

#prompt-modal{
   input{
      width: 100%;
   }
}

::backdrop{
   background-color: rgba(0, 0, 0, 0.8);
}