.rules-page {
    background-color: var(--green2);
    padding-top: 150px;
    padding-bottom: 150px;
    position: relative;
}

.rules-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;
}

.rules-page-wrapper > h1 {
    max-width: 548px;
    text-align: center;
}

.rules-text {
    max-width: 800px;
}

.rules-text ol,
.rules-text li {
    list-style-type: decimal;
}

.rules-text ol[type="a"],
.rules-text ol[type="a"] li{
    list-style-type: lower-alpha;
}

.rules-text ol[type="i"],
.rules-text ol[type="i"] li{
    list-style-type: lower-roman;
}

.rules-left {
    position: absolute;
    top: 0;
    left: 7%;
}

.rules-right {
    position: absolute;
    top: 0;
    right: 7%;
}

@media screen and (max-width:1400px){

    .rules-left {
        left: 0%;
    }

    .rules-right {
        right: 0%;
    }
}

@media screen and (max-width:1230px){
    
    .rules-left {
        left: -10%;
    }

    .rules-right {
        right: -10%;
    }
}

@media screen and (max-width:1000px){
    
    .rules-left {
        left: -19%;
    }

    .rules-right {
        right: -19%;
    }
}

@media screen and (max-width:900px){
    
    .rules-left {
        display: none;
    }

    .rules-right {
        display: none;
    }

    .rules-page {
        padding-top: 50px;
        padding-bottom: 100px;
    }

    .rules-page-wrapper {
        gap: 50px;
    }

    .rules-page-wrapper > h1 {
        max-width: unset;
    }

    .rules-text ol {
        padding-left: 14px;
    }

    .rules-text ol[type="a"] {
        padding-left: 20px;
    }

    .rules-text ol[type="i"] {
        padding-left: 25px;
    }
}