* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url('../img/svg/wave-footer.svg');
    background-color: #CFDEE7;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
}

.container, .row {
    color: #161B33;
}

.btn-indigo {
    background-color: #B3B7EE;
    color: #fff;
}

.btn-indigo:hover{
    background-color: #9395D3;
    color: #fff;
}

.bg-indigo {
    background-color: #9067C6;
}

.bg-grape{
    background-color: #8332AC;
}

.bg-periwinkle {
    background-color: #BBBDF6;
}

.text-grape {
    color: #8332AC;
}

.text-justify {
    text-align: justify;
}

footer {
    flex: 0 0 50px;
    margin-top: auto;
}

.flasher {
    width: auto
}

.none {
    display: none
}

.jumbotron {
    background-image: url("../img/svg/hero-2.svg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite
}

.social-icon li a:hover {
    transform: translateY(-3px);
}

progress {
    width: 100%;
    height: 10px;
    margin-top: 20px;
    border-radius: 5px;
}

#pass-strength-text {
    font-weight: bold;
    margin-top: 10px;
}

.pass-weak {
    color: red;
}

.pass-medium {
    color: orange;
}

.pass-strong {
    color: green;
}
