.home-container {
    display: block;
    margin: auto;
    height: 80vmin;
    width: 80vmin;
    margin-top: 2%;
}

.home-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 5%;
    height: 100%;
    width: 100%;
}

.home-nav-item {
    height: 90%;
    width: 90%;
    text-align: center;
    padding: 5%;
    border-radius: 2px;
}

.home-nav-item:hover {
    color: var(--sos-accent-1);
    background-color: inherit;
    cursor: pointer;
}

.home-nav-item.active-emergency {
    color: white;
    background-color: var(--sos-emergency);
}

.home-nav-item.active-emergency:hover {
    color: white;
    background-color: var(--sos-emergency-hover);
}

.home-nav-item.active-drill {
    color: white;
    background-color: var(--sos-drill);
}

.home-nav-item.active-drill:hover {
    color: white;
    background-color: var(--sos-drill-hover);
}


.home-nav-icon {
    font-size: 12vh;
    color: inherit;
}

.home-nav-text {
    text-align: center;
    color: black;
    font-size: 15pt;
    margin-top: 15%;
}

.active-emergency .home-nav-text {
    text-align: center;
    color: white;
    font-size: 15pt;
    margin-top: 15%;
}

.active-drill .home-nav-text {
    text-align: center;
    color: white;
    font-size: 15pt;
    margin-top: 15%;
}