/* formatting */
html{
    background: #d3dcff;
    background-image: url(angelcloud.jpg);
    background-blend-mode: multiply;
    color: #93a7df;
    background-repeat: repeat-x;
    background-size: 1300px;
      /* For Firefox */
      overflow-y: scroll;
    scrollbar-color: #b1bce7 #99a5d3;
    scrollbar-width: thin;
    cursor: url(), default;
   }

 hr{
    border: #c5cffa solid 1px;
 }
 a{
    color: #8eb2f5;
 }
 button{
    border: 1px #b0c3f7 solid;
    font-family: 'Byte';
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-shadow: -1px 0 #6082df, 0 1px #627abb, 1px 0 #778fcf, 0 -1px #778fcf, 0 0;
    display: inline-block;
    width: auto;
    padding: 4px;
    text-decoration: none;
    background-image: linear-gradient(to top, white, #b0c3f7);
    box-shadow: inset 0px 0px 13px 5px #fafbff81;
    border-radius: 0 15px 0 0;

    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
 }
 button:hover{
    background-image: linear-gradient(to top, #c1d2fc, #7f97d6);
    font-style: italic;
    letter-spacing: 3px;
 }

::selection{
    background-color: #bac8ec;
    color: aliceblue;
}

@font-face {
    font-family: 'Free Pixel';
    src: url(FreePixel.ttf) format(truetype);
}
@font-face {
    font-family: 'Byte';
    src: url(byte.ttf) format(truetype);
}
@font-face{
    font-family: 'Starlight';
    src: url(starlight.ttf) format(truetype);
}

/* layout */

.container {
        padding: auto;
        max-width: 1080px;
        height: auto;
        display: flex;
        text-align: center;
        margin: 0 auto;
  }


    .mainbox{
        border: 2px solid #e3edff;
        margin: 0 auto;
        width: 780px;
        height: auto;
        background-color: #c5d1f8;
        border-radius: 15px;
        -webkit-box-shadow: inset 0px 0px 24px 4px #e3edff; 
        box-shadow: inset 0px 0px 24px 4px #e3edff;
        padding-left: 10px;
        padding-right: 10px;
    }

    .headerbox{
        margin:12px auto;
        width: 1020px;
        max-height: 174px;
    
        border: #c5d1f8 4px groove;
        border-radius: 15px 0 15px 0;
        box-shadow: inset 0px 1px 62px 33px #c8d2ff8a;
        
    
        background-image: url(dvheader4.png);
        background-size: 700px;
        background-position: center;
    
        text-align: left;
    }
    #headbox{
        max-width: 100%;
        max-height: 100%;
        border-radius: 15px 0 15px 0;
        
        position: relative;
    
        left: 0.1%
    }
    
    .headerbox a{
        color:#6d96e2;
        text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff, 0 0;
        text-decoration: none;
        padding: 12px;
        text-transform: uppercase;
        position: relative;
    
        padding: 12px;
        text-transform: uppercase;
        
    }
    .headerbox a:hover{
        color:#ffffff;
        text-shadow: -2px 0 #6d96e2, 0 2px #6d96e2, 2px 0 #6d96e2, 0 -2px #6d96e2, 0 0;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }
    
    #expand {
        font-family: 'Byte';
        font-size: 40px;
        text-decoration: none;
        transition: 0.4s;
    
        position: absolute;
        top: 17%;
        }
         
        #expand:hover {
        letter-spacing: 5px;
        }
    
    .tb_room{
    width: 1000px;
    border-radius: 5px;
    margin: 7px auto;
}

.textbox{
    border:2px #b1bce7 solid;
    border-top: 0;
    background-image: linear-gradient(to bottom, white, #d5ddf3);
    padding: 4px;
    width: 766px;
    height: auto;
    border-radius: 0 0 15px 15px;
    font-family: 'Free Pixel';
    overflow-y: auto;
    scrollbar-width: none;
}

.textbox p{
    text-align: left;
}
.textbox h1, h2, h3, h4{
    font-family: 'Byte';
    text-shadow: -1px 0 #3352a5, 0 1px #778fcf, 1px 0 #778fcf, 0 -1px #778fcf, 0 0;
    color: #cad8f7;
    margin: 0 auto;
    text-align: left;

}

.tb_header{
    text-align: left;
    width: 774px;
    padding: 2px;
    background: #7f97d6;
    background-image: linear-gradient(to bottom, #7f97d6, #c1d2fc, #7f97d6);
    color: white;
    font-family: 'Byte';
    font-weight: bold;
    text-shadow: -1px 0 #5c77a8, 0 1px #5c77a8, 1px 0 #5c77a8, 0 -1px #5c77a8, 0 0;
    border-bottom: #c1d2fc 4px double;
    border-radius: 5px 5px 0 0;
}

.footer{
    margin: 14px auto;
    width: 280px;
    height: 20px;
    text-shadow: -1px 0 #7993c5, 0 1px #7993c5, 1px 0 #7993c5, 0 -1px #7993c5, 0 0;
    color: #e4efff;
    font-family: 'Starlight';
    font-size: small;
}

.footer a{
    color: #e4efff;
    text-decoration: none;
    transition: 0.4s;
}

.footer a:hover{
    color: #c9ddff;
    text-decoration: none;
    letter-spacing: 5px;
}