body {
    text-align: center;
    font-family: Lato;
}

.all_buttons {
    width: 500px;
    margin: auto;
    font-family: Lato;
    position: relative;
}

.interactable {
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 20pt;
    font-family: Lato;
    color: white;
    font-weight: bold;
    position: absolute;
}

.interactable:hover {
    color: black;
    transform: scale(1.2);
}

.desc_text {
    position: absolute;
    font-size: 15pt;
}

.north {
    font-family: Lato;
    top: -340px;
    left: 229px;
}

.south {
    font-family: Lato;
    top: -156px;
    left: 229px;
}

.east {
    font-family: Lato;
    top: -247px;
    left: 319px;
}

.west {
    font-family: Lato;
    top: -247px;
    left: 133px;
}

.nature {
    font-family: Lato;
    top: -456px;
    left: 218px;
    color: #27ae60;
}

.society {
    font-family: Lato;
    top: -65px;
    left: 216px;
    color: #f1c40f;
}

.economy {
    font-family: Lato;
    top: -261px;
    left: 434px;
    color: #2980b9;
}

.wellbeing {
    font-family: Lato;
    top: -262px;
    left: -36px;
    color: #e74c3c;
}

#popup {
    display:none;
    width: 300px;
    font-family: Lato;
    position: absolute;
    border: 2px solid black;
    top: -300px;
    left: 19%;
    background-color: white;
    text-align: center;
    padding: 5px;
}

.exit {
    left: 263px;
    top: 9px;
    position: absolute;
    border: none;
    color: dimgray;
    font-family: lato;
    font-weight: bold;
    background-color: white;
    cursor: pointer;
}