*{
        padding: 0;
        margin: 0;
    }
    body{
        background-color: #F8F5ED;
    }
    header{
        background-color: #CB997E;
        height: 120px;
        margin: 30px;
        border-radius: 20px;
    }
    @media screen and (max-width:768px) {
        header{ 
            height: 100px;    
        }
        
    }
    h1{
        color: white; 
        line-height: 120px;
        text-align: center;
        font-size: 55px;
        letter-spacing: 15px;
    }
    @media screen and (max-width:768px) {
        h1{ 
            line-height: 100px;
            font-size: 45px;
            letter-spacing: 0px; 
        }
        
    }

    .one{
        background-color: #A5A58D;
        margin-bottom: 20%;
        margin-left: 5%;
        height: 70px;
        width: 230px;
        text-align: center;
        border-radius: 50px;
    }
    .one a,.two a,.information a{
        color: white;
        text-decoration: none;
        line-height: 70px;
        font-size: 30px;
        font-weight: bold;   
    }
    .one a:hover,.two a:hover,.information a:hover{
        text-decoration: underline;
    }

    .two{
        background-color: #B7B7A4;
        margin-bottom: 20%;
        margin-left: 5%;
        height: 70px;
        width: 230px;
        text-align: center;
        border-radius: 50px;
    }
   
    .information{
        background-color: #A5A58D;
        margin-bottom: 20%;
        margin-left: 5%;
        height: 70px;
        width: 230px;
        text-align: center;
        border-radius: 50px;
    }


    
    .run{
        background-color: #918380;
        color:white;
        position: relative;
        bottom: 20px;
        margin: 30px;
        height: auto;
        border-radius: 10px;
        align-items: center;
    }
    footer{
        background-color: #CB997E;
        height: 120px;
        margin: 30px;
        border-radius: 20px;
        margin-top: 5%;
        text-align: center;
    }

    .martial{
        background-color: #A5A58D;
        margin: 30px;
        height: 70px;
        width: 150px;
        border-radius: 40px;
        margin-left: 20%;
        text-align: center;
        font-size: 20px;
    }
    @media screen and (max-width:768px) {
        .martial{
            width: 20%;
            height: 40px;
            margin-left: 15%;
        }
        
    }
    .martial h2{
        color:white;
        font-size: 120%;
        line-height: 70px;
    }
    @media screen and (max-width:768px) {
        .martial h2{
            line-height: 40px;
            font-size: 100%;
        }
        
    }
    
    .web{
        background-color:#BCAEAB;
        margin: 30px;
        height: auto;
        width: 50%;
        margin-left: 30%;
        border-radius: 20px;
    
    }
    @media screen and (max-width:768px) {
        .web{
            width: 75%;
            margin-left: 20%;
        }
    }
    .web a{
        color:white;
        margin-left: 10%;
        text-decoration: none;
        line-height: 3;

    }
    .web a:hover{
        text-decoration: underline;
    }
    .return{
        background-color: #DDBEA9;
        height: 50px;
        width: 100px;
        margin: 2%;
        margin-top: -1%;
        border-radius: 30px;
        position: fixed;
        text-align: center;
    }
    @media screen and (max-width:768px) {
        .return{
            height: 30px;
            width: 15%;
            margin-top: -5%;

        }
    }
    .return a{
        color:white;
        text-decoration: none;
        line-height: 50px;
        font-size: 120%;
        font-weight: bold;
    }
    @media screen and (max-width:768px) {
        .return a{
            line-height: 30px;
            font-size: 60%;
        }
    }
    .return:hover{
        text-decoration: underline;
    }
    .top{
        background-color: #DDBEA9;
        height: 60px;
        width: 60px;
        margin-left: 90%;
        margin-top: -27%;
        border-radius: 10px;
        position: fixed;
        text-align: center;
    }
    @media screen and (max-width:768px) {
        .top{
            margin-left: 90%;
            margin-top: -60%;
            height: 30px;
            width: 30px;
        }
    }
   
    .top a{
        color:white;
        text-decoration: none;
        line-height: 60px;
        font-size: 180%;
    }
    @media screen and (max-width:768px) {
        .top a{
            line-height: 30px;
            font-size: 120%;
        }
    }

    .top:hover{
        text-decoration: underline;
    }
    

.blk{
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    width: 99%;
}
.nav{
    width: 25%;
}
.date{
    background-color: #DDBEA9;
    padding: 30px;
    text-align: left;
    height:auto;
    width: 25%;
    border-radius: 30px;
}
@media screen and (max-width:768px) {
    .date{ 
        margin-top: 15%;
        margin-left: 4%;
        margin-right: 4%;
        width: auto;
    }
    
}

.date-table{
    height:auto;
    width: 25%;
}
@media screen and (max-width:768px) {
    .date-table{ 
        margin-right: 80%;
        margin-top: 20%;
    }
    
}

.date ul{
    color: white;
    font-size: larger;
    line-height: 3;
}
@media screen and (max-width:768px) {
    .blk{ 
        flex-direction: column;
    }
    .nav{ 
        margin-right: 30%;
    }
    .date-table{ 
        margin-left: 75%;
    }
    
}