:root {
    --mint: #6effd1;
    --dark: #221f22;
    --light_dark: #2e2b2e;
    --white: #ffffff;
    --active: #7ef07e;
    --deactivated: #f07e7e;
}

body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background-color: #221f22;

    color: var(--white);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    margin: 0;


}

h1 {
    color: var(--mint);
    margin: 0;
    font-weight: 400;
}

h2 {
    color: var(--white);
    font-weight: 100;
    margin: 0rem;
}

h3 {
    margin: 0;
}

a:link {
    color: var(--white);
    margin: 0;
    text-decoration: none;
}

a:visited {
    color: var(--white);
    text-decoration: none;
}

a:hover {
    color: var(--mint);
    text-decoration: none;
}

.detail {
    margin: 0rem 0rem 0rem 2rem;
}

#main_div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background-color: var(--light_dark);

    margin: 3rem;
    border-radius: 1.5rem;

    max-width: 50rem;
}

.status_list {
    display: flex;
    justify-content: left;
    align-items: left;
    flex-direction: column;

    margin: 1rem;
    padding: 0;
}

.status {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: row;

    margin: 1rem;
}

.status_header {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: row;
    
    margin: 0;
    padding: 0;

}

.status_text {
    display: flex;
    justify-content: left;
    align-items: left;
    flex-direction: column;

    margin: 0;
}

.dot_active {
    height: 1rem;
    width: 1rem;
    margin: 0.3rem 1rem 0rem 0rem;
    background-color: var(--active);
    border-radius: 50%;
    display: inline-block;
}

.dot_inactive {
    height: 1rem;
    width: 1rem;
    margin: 0.3rem 1rem 0rem 0rem;
    background-color: var(--deactivated);
    border-radius: 50%;
    display: inline-block;
}