html{
    height: 98%;
    margin:0;
    padding: 0;
}
body
{
    background-color: black;
    height: 100%;
    color:#fe9900;
    font-family: arial;
    margin:0;
    padding: 0;
}
#main
{
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#top_section
{
    display: block;
    position: relative;
    height: 210px;
    width: 100%;
}
#bottom_section
{
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
}
.blue_lavender
{
    background-color: #9a99ff;
    color: black;
}
    .blue_lavender:hover
    {
        background-color: #ced2ff;
    }
.magenta
{
    background-color: #cb99cc;
    color: black;
}
    .magenta:hover
    {
        background-color: #ccb8cb;
    }
.orange
{
    background-color: #fe9900;
    color: black;
}
    .orange:hover
    {
        background-color: #fec179;
    }
.peach
{
    background-color: #fcc99a;
    color: black;
}
    .peach:hover
    {
        background-color: #fce2c8;
    }
.salmon
{
    background-color: #cd6667;
    color: black;
}
    .salmon:hover
    {
        background-color: #cd9d9d;
    }
#top_one
{
    display: block;
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 4px;
}
#top_two
{
    display: block;
    position: relative;
    height: 100px;
    width: 100%;
    margin-bottom: 4px;
    border-bottom-left-radius: 50px;
}
#top_black
{
    display: block;
    position: absolute;
    top:0;
    right: 0;
    width: 90%;
    height: 175px;
    border-bottom-left-radius: 50px;
    background-color: black;
    padding: 5px;
    z-index: 20;
    text-align: right;
    vertical-align: top;
}
    #top_black div
    {
        display: inline-block;
        position: relative;
    }
    #data_center
    {
        width: 62%;
        height: 100%;
        text-align: justify;
        font-size: small;
        overflow: hidden;
    }
    #data_buttons
    {
        vertical-align: top;
        width: 35%;
        height: 100%;
    }
        #data_buttons h1
        {
            margin:2px;
            padding: 0;
            text-align: center;
        }
        #data_buttons .button
        {
            display: inline-block;
            position: relative;
            width: 42%;
            height: 40px;
            border-radius: 25px;
            margin:5px;
            padding: 5px;
            text-align: left;
        }
#bottom_one
{
    display: block;
    position: relative;
    width: 100%;
    height: 100px;
    border-top-left-radius: 50px;
    margin-bottom: 4px;
}
#bottom_two
{
    display: block;
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 4px;
}
#bottom_three
{
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    margin-bottom: 4px;
}
#bottom_four
{
    display: block;
    position: relative;
    width: 100%;
    height: 470px;
    margin-bottom: 4px;
}
#bottom_black
{
    display: block;
    position: absolute;
    bottom:0;
    right: 0;
    width: 90%;
    min-width:600px;
    height: 97%;
    border-top-left-radius: 50px;
    background-color: black;
    padding: 5px;
    z-index: 20;
    text-align: right;
    vertical-align: top;
}
.label
{
    display: block;
    position: absolute;
    bottom:0;
    left: 5px;
    font-size: small;
    text-transform:uppercase;
    font-weight: bold;
}
.status
{
    display: block;
    position: relative;
    height: 20px;
    width: 100%;
    font-size:x-large;
    font-weight: bold;
    text-align: center;
    border: thin dashed deepskyblue;
}
