main{
    margin-top: 5rem;
    margin-bottom: 5rem;
    width: 412px;
    margin-left: auto;
    margin-right: auto;
}
body{
    background-color: #000;
    color: #f5f5f5;
    height: 667px;
    width: 412px;
    margin-left: auto;
    margin-right: auto;
}
main .container{
    padding-bottom: 100px;
}
.footer-main{
    background-color: #20222c;
}
header{
    background-color: #000;
    width: 412px;
    margin-left: auto;
    margin-right: auto;
}
footer{
    width: 412px;
    margin-left: auto;
    margin-right: auto;
}
.footer-main i{
    font-size: 1.2rem;
}
.footer-main a{
    text-decoration: none;
    color: #858ea1;
    font-weight: bold;
}
.footer-main i{
    font-size: 1.2rem!important;
}
.footer-main span{
    font-size: 0.9rem;
}
.footer-main a.active{
    color: #4677d7;
}
.fw-light
{
    color: #858ea1;
    font-size: .7rem;
}
.text-grey{
    color: #858ea1;
}
.text-white{
    color: #fff;
}
.btn-primary{
    border: 1px solid #4677d7;
    background-color: #4677d7;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: bold;
}
.btn-secondary{
    border: 1px solid #4677d7;
    background-color: #1f202a;
    color: #fff!important;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: bold;
}
.btn-logout{
    background: #20222c;
    border: 1px solid #20222c;
    border-radius: .5rem;
    color: #fff;
    font-size: 0.8rem;
    margin: 0 auto;
    padding: .8rem 2rem;
    text-align: center;
    width: 100%;
}