:root {
    --main-bg-color: #1c1c1c;
    --accent-color: #ffa615;
    --text-color: #ffffff;
}


body, html {height:100%;}

div.container {height:100%; overflow:hidden;}

body {
    overflow: hidden;
    background-color: var(--main-bg-color);
    color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-color);
    font-family: 'Roboto', sans-serif;
    text-align: center;
    margin-bottom: 10px;
}

#family-switch-button {
    background-color: var(--accent-color);
    color: var(--text-color);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    background-size: cover;
    box-shadow: 0 0 0 1000px rgba(0,0,0,0.4) inset;
}

.family-button-0 {
    background: url('../assets/tea_logo.jpg') no-repeat center;
}

.family-button-1 {
    background: url('../assets/perry_logo.jpg') no-repeat center;
}

#family-switch-button:hover {
    box-shadow: 0 0 0 1000px rgba(0,0,0,0.6) inset;
}