*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;

}
body{
display: flex;
flex-direction: column;
background-image: url(./images/bg-desktop.png);
background-repeat: no-repeat;
background-position: bottom;
height: 100vh;   
background-size: 100% 50%;
background-color: hsl(229, 57%, 11%);
justify-content: center;
align-items: center;
}
.content-wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.fylo{
    background-color: hsl(228, 56%, 26%);
    height: 12rem;
    width: 24rem;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-top-right-radius: 6rem;
    padding: 2rem ;
    margin-right: 2rem;
}
.icon-container{
    display: flex;
    margin-top: 2rem;
}
.icon-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.8rem;
    height: 2.8rem;
    background-color: hsl(229, 57%, 11%);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin-right: 1rem;
}
.bar-container{
    position: relative;
    height: 10rem;
    width: 36rem;
    background-color: hsl(228, 56%, 26%);
    border-radius: 0.7rem;
    -webkit-border-radius: 0.7rem;
    -moz-border-radius: 0.7rem;
    -ms-border-radius: 0.7rem;
    -o-border-radius: 0.7rem;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    color: white;
    padding:2rem;
}
.bar{
    width: 95%;
    height: 1rem;
    background-color: hsl(229, 57%, 11%);
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    margin-top: 1rem;
}
.progress{
    width: 81.5%;
    height: 100%;
    background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    display: flex;
    justify-content: flex-end;    
}
.white-circle{
    width: 1rem;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: white;
    
}
.numeric-info{
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin-top: 1rem;
}
.attribution
{
   position: absolute;
   bottom: 2%;

}
.bold{
    font-weight: 700;
}
.left{
    position: absolute;
    background-color: white;
    padding: 1rem 2rem 1rem 2rem;
    color: black;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    top: -20%;
    right: 8%;
}
.left:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 2rem solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-right: 0;
	margin-left: 2.2rem;
    margin-bottom: -1.1rem;
}
.string{
    opacity: 0.5;
    font-size: 10px;
}
@media screen and (max-width: 450px){
    body{
        background-image: url(./images/bg-mobile.png);
        background-size: 100%;
        background-position: center;

    }
    .content-wrapper{
        flex-direction: column;
        width: 100%;
    }
    body{
        padding:1rem ;
    }
    .bar-container,
    .fylo{
        width: 100%;
    }
    .bar-container{
        position: relative;
    }
    .left{
        position: absolute;
        background-color: white;
        padding: 2rem 2rem 2rem 2rem;
        color: black;
        border-radius: 1rem;
        -webkit-border-radius: 1rem;
        -moz-border-radius: 1rem;
        -ms-border-radius: 1rem;
        -o-border-radius: 1rem;
        top: 75%;
        right: 32%;
    }
    .left:after{
        border: none;
    }
}