.body {
    margin: 0px;
}
.flex {
    display: flex;
}
.font56 {
    font-size: 56px;
}
.font40 {
    font-size: 40px;
}
.font38 {
    font-size: 38px;
}
.font28 {
    font-size: 28px;
}
.font24 {
    font-size: 24px;
}
.font20 {
    font-size: 20px;
}
.font18 {
    font-size: 18px;
}  
.font16 {
    font-size: 16px;
}
.font14 {
    font-size: 14px;
}
.font12 {
    font-size: 12px;
}


.flex-direction-column {
    flex-direction:column;
}
.justify-content-center {
    justify-content:center;
}

.justify-content-space-between {
    justify-content:space-between;
}

.justify-content-space-around {
    justify-content: space-around;
}

.flex-wrap-wrap {
    flex-wrap:wrap;
}


@media screen and (min-width: 1050px) and (max-width: 1750px) {

    .font28 {
        font-size: 24px;
    }
    .font24 {
        font-size: 20px;
    } 

}

@media screen and (min-width: 650px) and (max-width: 1050px) {
    
    .font56 {
        font-size: 37px;
    }
    .font40 {
        font-size: 29px;
    }
    .font38 {
        font-size: 27px;
    }
    .font28 {
        font-size: 24px;
    }
    .font24 {
        font-size: 20px;
    }
    .font20 {
        font-size: 16px;
    }
    .font18 {
        font-size: 14px;
    } 
    .font16 {
        font-size: 12px;
    }

    .font14 {
        font-size: 10px;
    }

    .font12 {
        font-size: 10px;
    }

}

@media screen and (max-width: 650px) {
    .font56 {
        font-size: 27px;
    }
    .font40 {
        font-size: 19px;
    }
    .font38 {
        font-size: 17px;
    }
    .font28 {
        font-size: 14px;
    }
    .font24 {
        font-size: 14px;
    }
    .font20 {
        font-size: 10px;
    }
    .font18 {
        font-size: 10px;
    }
    .font16 {
        font-size: 10px;
    }

    .font14 {
        font-size: 10px;
    }

    .font12 {
        font-size: 10px;
    }
    
}