.encounters {
    margin: 0;
    padding: 2.5vmin;
    display: grid;
    gap: 2.5vmin;
    height: calc(100vh - 7.5vh * 2);
    overflow-y: scroll;
    border-radius: 2.5vmin;
    box-sizing: border-box;
}

.encounter {
    margin: 0;
    border: darkturquoise 0.25vmin solid;
    color: darkturquoise;
    padding: 2.5vmin;
    box-sizing: border-box;
    width: calc(100vw - 5vmin);
    border-radius: 2.5vmin;
    text-decoration: none;
    transition: background-color 0.25s linear, color 0.25s linear;
}

.encounter:hover {
    background-color: darkturquoise;
    color: white;
}

.encounter-title {
    font-size: 2.5vmin;
    margin-bottom: 0;
}

.encounter-description {
    font-size: 1.875vmin;
    margin-top: 1.25vmin;
}

*:link {
    text-decoration: none;
    color: black;
}

.encounter-management {
    background-color: paleturquoise;
    color: white;
    height: 7.5vh;
    width: 100vw;
    box-sizing: border-box;
    gap: 2.5vmin;
    display: flex;
}

.add-encounter {
    margin-left: auto;
    height: 7.5vh;
    width: 7.5vh;
    background-image: url('add.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    transition: background-image 0.25s linear;
}

.add-encounter:hover {
    background-image: url('add_filled.svg');
}