:root {
    --blue-gradient: linear-gradient(#87CEEB, #4169E1); 
  }

body{
    
    font-family: 'MS Gothic'; 
}
html, body {
  margin: 0;
  padding: 0;
}




img{
    width: 30%;
}

h{
    font-size: 16px;
    font-family: 'MS Gothic'; 
    
}

c{
    font-size: 18px;
    font-family: 'MS Gothic'; 
    text-align: left;
}
#navigation a {
    font-size: 20px;
    font-family: 'MS Gothic'; 
    text-align: center;
    display: block;
    padding: 0.15em;
    margin: 0px 0;
    font-weight: bold;
    text-decoration: none;
    color: rgb(1, 49, 118);

}

#navigation a:hover {
    font-size: 20px;
    font-family: 'MS Gothic'; 
    text-align: center;
    display: block;
    padding: 0.15em;
    margin: 0px 0;
    font-weight: bold;
    text-decoration: none;
    background:#cdebff ;
    color:#4169E1;
    transition: ease-in 0.1s, ease-out 0.1s;
}

#container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 980px;
    margin: 0 auto;
    padding: 1px;
    box-shadow: #000000;
    margin-top: 10px;
    
    }


    

    #box{
    width: 980px;

    color: black;

    padding-bottom: 10px;
    }



    #boxheader {
        background: var(--blue-gradient);
        background-size: auto 100%;
        text-align: left;
        color: #cdebff;
        padding: 5px 0px 5px 5px;

    }
        #box2{
            width: 100%;
            background-color: #F0F9FF;

            }


            #box3{
                margin-top: 10px;
                width: 98%;
                color: black;
                border: 1px solid #4169E1;
                
                }

                #box4{
                    margin: 0 auto;
                    width: 90%;
                    color: black;
                    border: 1px solid #4169E1;
                    margin-top: 10px;
                    justify-content: center;
                    
                    }

#container-box2{
        width: 100%;
        background-color: #F0F9FF;
        border: px solid #4169E1;
        display: flex;
        overflow-y: auto;
        height: 200px;
        text-align: center;
        }


#container-box2a{
        width: 100%;
        background-color: #F0F9FF;
        border: px solid #4169E1;
        display: flex;
        overflow-y: auto;
        height: 200px;
        }

     #container-box3{
                width: 95%;
                color: black;
                border: 1px solid #4169E1;
                margin-top: 5px;
                justify-content: center;
              
                margin-top: 10px;
        
                }


    #bannerimage {
        width: 978px;
        border: 1px solid #4169E1;


    }
    .list {
        font-size: 0;
        list-style-type: none;
        display: block;
        padding: 1px;

        justify-content: center;
    }

    #navigation {
        margin: 0 auto;
        justify-content: center;
        padding-top: 1px;

        
    }
/* Buttons */


/* Left, middle and right parts */
   

        h3{
    font-family: 'MS Gothic'; 
    font-size: 20px;
    padding: 2px;
    margin: 5px;
}

.title{
    font-weight: 500;
        font-family: 'MS Gothic'; 
        font-size: 18px;
    
    
}

    #leftside{
        float: left;
        width: 20%;
        overflow: hidden;
        }
        
/*    #rightside{
        float: right;
        width: 25%;
        display: block;
        overflow: hidden;
        }

        */
/* Status */
#statuscafe {
    padding: .5em;
    background-color: #F0F9FF;

}
#statuscafe-username {
    margin-bottom: .5em;
    font-weight: bold;
     font-size: 14px;
}

/*
#statuscafe-content {

}
*/