.rules-container {
    width: 1140px;
    margin: auto;
}

.rules-row {
    display: flex;
}

.menu {
    margin: 10px 20px;
}

.menu-content {
    width: 215px;
    padding: 10px 20px 20px 20px;
    background-color: #fff;
}

.menu-content li {
    margin-top: 10px;
}

.menu-content a {
    padding: 10px 15px;
    display: block;
    font-size: 14px;
    color: #8E5A1D;
}

.link-now {
    background-color: #fce5ca;
}

.link:hover {
    background-color: #fce5ca;
}

.rules-article {
    margin: 20px 0;
}

.article-title {
    font-size: 23px;
    color: #e68527;
}

.rules-section {
    padding: 10px;
}

.rules-section p {
    margin: 15px 0;
    font-size: 14px;
    color: #3c3f40;
}

.rules-section ol li {
    margin: 5px 0;
    font-size: 14px;
    color: #3c3f40;
    list-style: decimal;
}

.rules-section ul li {
    margin: 5px 0 0 20px;
    font-size: 14px;
    color: #3c3f40;
    list-style: disc;
}

.rules-title{
    font-size: 18px;
    color: #8a4705;
}

.main-link {
    color: #3c3f40;
}

.main-link:hover {
    color: #8E5A1D;
}

@media screen and (max-width : 1200px) {
    
    .rules-container {
        width: 960px;
    }

    .menu-content {
        width: 170px;
    }
}

@media screen and (max-width : 1020px) {
    
    .rules-container {
        width: 720px;
    }

    .menu-content {
        width: 150px;
    }
}

@media screen and (max-width : 780px) {
    
    .rules-container {
        width: 100%;
    }

    .rules-row {
        display: block;
    }

    .menu {
        text-align: center;
    }

    .menu-content {
        width: 80%;
        margin: 0 auto;
    }

    .article-title {
        text-align: center;
    }
}