* {
    box-sizing: border-box
}

@font-face {
    font-family: Cocon;
    src: url('../font/Cocon.ttf')
}

body {
    background-image: url('../img/bg.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 10rem 0 0;
    color: #fff;
    font-family: Cocon;
    position: relative
}

.logo img {
    width: 120px;
    margin-bottom: .5rem
}

h1 {
    text-transform: uppercase;
    letter-spacing: 25px
}

.progress {
    margin: 20px auto 5px;
    padding: 0;
    width: 30%;
    height: 17px;
    overflow: hidden;
    background: #020146;
    border-radius: 50px
}

.bar {
    position: relative;
    float: left;
    min-width: 1%;
    border-radius: 50px;
    width: 82%;
    height: 100%;
    background-image: linear-gradient(to right, #d006ce, #78269d)
}

.text-bottom p{
    position: fixed;
    bottom: 0;
    width: 100%;
    letter-spacing: 17px;
    width: 100%;
}

@media (max-width:991px) {
    .progress {
        width: 45%
    }

 
}

@media (max-width:767px) {
    h1 {
        letter-spacing: 20px
    }
}

@media (max-width:575px) {
    body {
        padding: 6rem 0
    }

    h2 {
        font-size: 1.5rem
    }

    h1 {
        font-size: 2rem;
        letter-spacing: 10px
    }

    .progress {
        width: 65%
    }

    .logo img {
        width: 85px
    }

    .text-bottom {
        letter-spacing: 10px
    }
}

@media (max-width:357px) {

    .text-bottom,
    h1 {
        letter-spacing: 4px
    }
}