body {
    background-color: #bab7cc;
    color: #eaeaef;
}

a {
    color: #eaeaef;
    font-style: italic;
    text-decoration: overline;
}

a:hover, a:active {
    text-shadow: 2px 2px 5px grey;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    flex-flow: column wrap;
}

/*.grid {
    display: grid;
    
}*/

.title {
    box-shadow: 2px 2px 5px grey;
    padding:2px;
    width: fit-content;
}

li {
    list-style-type: none;
    display: inline-flex;
    margin: 5px;
}

section {
    display: grid;
    gap: 5px 5px;
    grid-template-columns: 1fr 1fr 375px;
    grid-template-rows: 1fr 1fr 1fr;
    align-content: start;
}

.box {
    padding: 10px;
    box-shadow: 2px 2px 5px grey;
    height: fit-content;
    column-count: 2;
    column-rule: 1px dashed grey;
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}

.box:hover {
    transform: translateY(5px)
}

button {
    margin: 10px;
    border-style: 5px dashed grey;
    cursor: grab;
}