*
{
    box-sizing: border-box;
    overflow: auto;
}
html{
    cursor: url(Volleyball.cur), auto;
    background-color:#F3F3F3;
    color:#000044;
}
body{
    margin: 0;
}
.ti
{
    background-image: linear-gradient(#CCC, #EEE);
    text-align: center;
    font-family: afont;
    border: 0.1px ridge #FFF;
}
.text{
    font-family: afont;
    width: 99%;
    float:left;
    text-align: justify;
    font-size: 100%;
    margin: 5px;
}
ul.navbar{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #FAFAFA;
    cursor: url("Volleyball.cur"),;
    font-family: afont;
}
ul.navbar li{
    float: left;
    width: 20%;
}
ul.navbar li a{
    display: block;
    color: #000;
    text-align: center;
    padding: .5rem .6rem;
    text-decoration: none;
    width:100%;
}
ul.navbar li a:hover:not(.active)
{
    background: #E2E2E2;
}
ul.navbar li a.active
{
    background: #3356A4;
    color: #FFF;
}
ul.navbar li a.active:hover
{
    background: #2c4a8d;
    color: #FFF;
}
#main
{
    padding: 0 .6rem;
}
@media (max-width: 660px)
{
    ul.navbar li.right, ul.navbar li
    {
        width: 100%;
    }
    ul.navbar li{
        float: left;
        width: 100%;
    }
}
.vb
{
    float: left;
    width: 30%;
    margin-right: 10px;
    overflow:hidden;
}
@media (max-width: 660px)
{
    .vb3
    {
        width: 100%;
        float: none;
    }
}
.vb2
{
    float: right;
    width: 30%;
    margin-left: 10px;
}
.vb3
{
    float: right;
    width: 40%;
    margin-left: 10px;
}
.tit
{
    font-size: 50px;
    background-image: linear-gradient(#000, #555);
    text-align: justify;
    width: 101%
}
.text1
{
    font-family: afont;
    width: 99%;
    float:left;
    text-align: justify;
}
li{
    text-align: left;
}
.vball{
    float: right;
    width:300px;
    height:auto;
}
.vball1{
    float: right;
    width:300px;
    height: auto;
    margin-bottom: 5px;
}
.vball2{
    float: right;
    width:300px;
    height: auto;
    margin-bottom: 5px;
}
.vball3{
    float: right;
    width:300px;
    height: auto;
    margin-bottom: 5px;
}
@media (max-width: 660px)
{
    .vball, .vball1, .vball2, .vball3
    {
        width: 100%;
    }
}
.link{
    text-decoration:none;
    color:#004;
}
.link:hover{
    text-decoration:underline;
    color: #009;
}
.footer{
    padding: 1.4rem;
    text-align: center;
    background: #A3BCD9;
    font-size: 20px;
    position: sticky;
    bottom: 0;
}
@media (max-width: 600px)
{
    .footer{
        font-size: .6rem;
    }
}
.howtable
{
    border-collapse: collapse;
    border: solid 5px #000;
    float:left;
    width:100%;
}
.howtable th, td{
    border: solid 3px #000;
    height: auto;
    line-height:30px;
}
th{
    height: auto;
    overflow-y: hidden;
}
@font-face{
    font-family: afont;
    src: url(coolvetica\ rg.otf);
}