body{
    background-color: black;
    color:white;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 98vh;
    display: flex;
    flex-direction: column;
    }
    
    .mainbar{
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-size: 2em;
        align-items: center;
        color: hsl(0, 0%, 60%);
        background-color: hsl(0, 0%, 10%);
        margin-bottom: 10px;
    }
    
    .element{
        height: 40px;
        /*min-width: 220px;*/
        font-size: 0.75em;
        text-align: center;
        display: flex;
        align-items: center;
        
    }

    .element a{
        text-decoration: none;
        display: block;
    }
    
    .element img{
            height: 40px;
            max-width: auto;
            max-height: 100%;
            display: block;
            margin: 10px;
          
    }
    
    .button{
        width: 100px;
        height: 40px;
        font-size: 0.7em;
        color: white;
        background-color: hsl(0, 0%, 21%);
        border-radius: 10px;
        margin-left: 1px;
    }
    
    .button:hover{
        background-color: hsl(0, 0%, 15%);
    }
    
    #forbut{
        min-width: 100px;
        padding-left: 10px;
    }

    #refresh{
         min-width: 450px;
         
         
    }
    
    #date{
        padding-left: 5px;
        text-align: left;
    }
    
    #time{
        padding-left: 5px;
        padding-right: 5px;
        text-align: left;
    }
    
    .main{
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 5px;
        /* border: solid   hsl(0, 100%, 50%)    1px; */
    }
    
    .box_up{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        background-color: hsl(0, 0%, 10%);
        text-align: center;
        color: hsl(0, 0%, 80%);
        border: solid   hsl(0, 0%, 50%)    1px;
        margin-bottom: 10px;
    }
    
    #clock, #datenow{
        width: 50%;
    }

    .container{
        /*border: solid red 1px;*/
        padding: 10px;
    }

    .canvas-container {
        position: relative;
        display: flex;
        justify-content: center;
    }
    
    .center-div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 5px;
        background-color: hsla(0, 0%, 10%);
        border-radius: 5px;
    }

    .inner{
        font-size: 3.5em;
        text-align: end;
        border: solid white 1px;
        padding: 3px;
    }

    #kts{
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 0.8em;
        border: 1px solid white;
        margin: 5px;
    }
    .values{
        border: solid   hsl(0, 0%, 50%)    1px;
        
        background-color: hsl(0, 0%, 10%);
        font-size: 2.7em;
        text-align: center;
        display: grid;
        grid-template-columns: 1fr 50px 1fr 1fr 50px;
        grid-auto-rows: 50px;
        margin-bottom: 5px;
        
    }

    .data{
        text-align: right;
        align-self: center;
        /*border: solid red 1px;*/
        
    }
    .name{
        
        font-size: 0.8em;
        align-self: center;
        /* border: solid red 1px; */
    }

    #double{
        font-size: 0.45em;
    }

    .unit{
        font-size: 0.4em;
        text-align: left;
        align-self: end;
        margin-left: 3px;
        
    }

    .desc{
        display: flex;
        font-size: 1.7em;
        background-color: hsl(0, 0%, 10%);
        text-align: center;
        align-items: center;
        color: white;
        border: solid   hsl(0, 0%, 50%)    1px;
        margin-bottom: 10px;
    }

    .description{
        font-size: 0.65em;
        margin-left: 5px;
        margin-right: 10px;
        text-align: start;;
    }

    .press_desc{
        display: grid;
        grid-template-columns: 1fr 100px;
        background-color: hsl(0, 0%, 10%);
        align-items: center;
        border: solid   hsl(0, 0%, 50%)    1px;
        margin-bottom: 10px;
        font-size: 2.7em;
        align-items: baseline;
    }

    .presst{
        font-size: 0.6em;
        color: white;
        margin: 10px;

    }

    #WCD{
        max-width: 400px;
        text-align: start;
    }

    .endbar{
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        font-size: 2em;
        align-items: center;
        color: hsl(0, 0%, 60%);
        background-color: hsl(0, 0%, 10%);
        margin-top: 10px;
    }

    @media (max-width:600px) {
        #title, #elev, #radio, #refresh{
            display: none;
        }   

        #double{
            font-size: 0.38em;
        }

        .main{
            flex-direction: column;
            align-items: center;
        }

        .data{
            font-size: 0.75em;
        }
        .name{
            font-size: 0.55em;
        }

        #WCD{
            font-size: 0.7em;
        }
    }