@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body
{
    font-family: Roboto Condensed;
    font-size: 22px;
    /*background-color:lightskyblue;*/
    /*height:88vh;*/ /*Viewport Height*/
    /*background-image: linear-gradient(to bottom right, lightskyblue, pink);
    background-attachment: fixed;*/
}
summary
{
    font-size:32px;
    font-weight:500;
}
input
{
    font-size:22px;
}
/*--------------------------------------------*/
#switch-background
{
    width:32px;
    height:32px;
    margin:0px 16px;
    background-size:32px 32px;
}
.dark
{
    /*background-image:none;*/
    /*transition: all 3s ease;*/
    color:#C8C8C8;
    background-color:#323232;
    /*background-image: linear-gradient(#323232, #323232);*/
    background-attachment: fixed;
    /*transition: color 3s, background-image 3s;*/
}
    .dark #switch-background
    {
        background-image:url("img/sun.png");
        filter: brightness(0) invert(1);
    }
.white
{
    /*transition: all 3s ease;*/
    color:black;
    background-color:#C8C8C8;
    /*background-image: linear-gradient(to bottom right, lightskyblue, pink);*/
    background-attachment: fixed;
    /*transition: color 3s, background-image 3s;*/
    /*transition: color 3s;
    transition: background-image 3s;*/
}
.white #switch-background
{
    background-image: url("img/moon.png");
}
#header
{
    padding:15px;
    display:flex;
    justify-content:space-between;
}
#switch-background /*> img*/
{
    width:32px;
    height:32px;
}
/*--------------------------------------------*/
#photo-and-color
{
    display:flex;
    justify-content:space-between;
}
#photo-container
{
    border:solid 1px;
    width:400px;
    height:300px;
}
#photo
{
    width: 400px;
    height: 300px;
}
/*--------------------------------------------*/
#display
{
    border:solid 1px;
    margin:10px;
    padding:10px;
    display:flex;
    justify-content:space-around;
}
.time-block
{
    border:solid 3px;
    border-radius:10px;
    width:148px;
    box-shadow:0px 0px 25px 5px gray;
}
.time-unit
{
    font-size:48px;
    color:rgb(200,0,0);
    height:148px;
    background-color:Highlight;
    display:flex;
    align-items:center;
    justify-content:center;
}
.time-marker
{
    border:solid 1px;
    background-color:darkred;
    color:Aliceblue;
    text-align:center;
}