body{
    --background-color: whitesmoke;
    --transition-delay: 1s;
    --text-color: black;
    --button-text-color: white;
    --accent-color: rgba(250, 250, 250, 0.5);

    background-color: var(--background-color);
    color: var(--text-color);

   transition: var(--transition-delay);

   font-family: 'Noto Sans JP', sans-serif;
}

body.dark{
    --background-color: #121212;
    --text-color: whitesmoke;
    --p-color: rgb(180, 180, 180);
    --lip-color: rgb(200, 200, 200);
    --accent-color:rgba(0, 0, 0, 0.5);
}

.infobox, .card{
    background-color: rgba(30, 30, 30, 0.4);
}

.infobox .dark, .card .dark{
    background-color: rgba(250, 250, 250, 0.4);
}

.dark p{
    color: var(--p-color);
}

.theme-toggle-button{
    background-color: var(--accent-color);
    color: var(--button-text-color);

    cursor: pointer;
    border-radius: .3em;
    border: none;
    outline: none;

    padding: 10px;
    text-shadow: 10px 10px 20px #000000;

    transition: var(--transition-delay);
    transform: scale(1);
}

.theme-toggle-button:hover,
.theme-toggle-button:focus{
    transform: scale(1.1);
}

.theme-toggle-button.icon{
    margin-right: .5em;
}