/*button 1 will alter the skyline colors*/
@font-face {
    font-family: clock;
    src: url(../fonts/DS-DIGIB.TTF);

}
body{
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    height: 100dvh;
    width: 100dvw;
}
#bg{
    position: absolute;
    bottom: 0%;
    background-image: linear-gradient(to top, #070B34, #141852, #3c0f56, #a55b4b, #f1bd58, #69ebfc
    , #369acc, #a2d6ff);
    width: 100%;
    height: 1300%;
    
}
#specialBG{
    object-fit: fill;
    position: absolute;
    bottom: -25%;
    width: 100%;
    height: 125%;
}
#cityScape{
    position: absolute;
    bottom:-10%;
    margin: 0;
    width: 100%;
    height: 100%;
    background-image: url(../media/CityScapeBGRemoved.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center bottom ;
}
#UICont{
    position: absolute;
    
    max-height: 100dvh;
    /*height: 100%;*/
    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
#displayT{
    font-family: clock;
    font-size: 400%;
    text-align: center;
    color: #FF0000;
    text-shadow: 0 0 10px #ff4500;
    min-width: 100%;

}
#buttons{
    padding: 15% 0 0 0;
    display: flex;
    flex-direction: column;
}
.btn{
    min-width: 200px;
    min-height: 50px;
    border-radius: 20px;
}
#data{
    color: #FF0000;
    text-shadow: 0 0 10px #ff4500;
    padding: 5% 0 10% 0;
}



@media screen and (min-width: 501px ) {
    body {
            margin: 0;
            padding: 0;
            position: relative;
            overflow: hidden;
            height: 100dvh;
            width: 100dvw;
        }
    #cityScape{
        bottom:-25%;
    }

    #displayT{
        padding: 1% 0 0 0;
    }

    #data{
        padding: 2% 0 2% 0;
    }

    #buttons{
        padding: 5% 0 0 0;
    }
    .btn{
        min-width: 400px;
        min-height: 50px;
    }
}