html,body
{
    margin:0;
    height: 100%;
    font-family: 'Raleway', sans-serif;
    color:hsl(229, 7%, 55%);
}
.attribution 
{ 
    font-size: 11px; 
    text-align: center; 
}

.attribution a { 
    color: hsl(228, 45%, 44%); 
}

.container-fluid
{
    height:100%;
    
}

 .rows
{
    height:50%;
    /* border: 1px solid red;  */
} 

.box
{
    background-color: hsl(228, 56%, 26%);
}

#box1
{
    border-radius: 8px 142px 8px 8px;
}

#box2
{
    border-radius: 8px;
}

#para
{
    font-size: 14px;
    margin-top: 5%;
    margin-left: 8%;
}

.number
{
    font-weight: 700;
    color:#ffffff;
}

.progress
{
    width: 81%;
    margin-left: 8%;
    background-color: hsl(229, 57%, 11%);
    border-radius: 30px;
}

.progress-bar
{
    background: linear-gradient(to right,hsl(6, 100%, 80%) 0%, hsl(335, 100%, 65%) 100%);
    border-radius: 30px;
    flex-direction: row;
    justify-content: flex-end;
}

.data
{
    color:#ffffff;
}

#left
{
    margin-left: 8%;
}

#right
{
    float: right;
    margin-right: 11%;
}

.dataLeft
{
    font-size:11px;
}

#numberLeft
{
    color:#000000;
    font-weight: 800;
    font-size: 35px;
}

#gbLeft
{
    position: relative;
    bottom:4px;
}

.icons
{
    cursor: pointer;
}

@media screen and (min-width:768px)
{

    .container-fluid
    {
        background-color: hsl(229, 57%, 11%);
    }

    .wrapper2
    {
        background-image: url("../images/bg-desktop.png");
        background-repeat: no-repeat;
        width:100%;
        height:100%;
        background-size: cover;
    }

    #box1
    {
        position: absolute;
        right: 10px;
        width:  60%;
        max-width:316px;
        height: fit-content;
        padding-bottom: 25px;
        padding-top: 16px;
        animation-name: fly;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    #box2
    {
        position: absolute;
        left: 15px;
        bottom: -93px;
        width: 71%;
        padding-bottom: 2%;
        animation-name: fly;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-fill-mode: both;
        max-width: 524px;
        max-height: 135px;
    }

    #logo
    {
        margin-left: 9%;
        margin-top: 9%;
        width:48%;
    }

    .icons
    {
        border: 1px solid;
        padding: 6%;
        border-radius: 10px;
        background-color:hsl(229, 57%, 11%);
        margin:4%;
        width:23%;
    }

    .iconsContainer
    {
        margin-left: 6%;
        margin-top: 6%;
        width:85%;
    }

    .dataLeft
    {
        background-color: #ffffff;
        padding: 28px 35px;
        border-radius: 8px;
        position: absolute;
        right: 55px;
        top: -43%;
    }

    .progress::after
    {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 30px solid white;
        border-left: 30px solid transparent;
        bottom: -30px;
        right: 54.9px;
        top: -1%;
    }

}



@media screen and (max-width:767px)
{

    .container-fluid
    {
        background-color: hsl(229, 57%, 11%);
        background-image: url("../images/bg-mobile.png");
        background-repeat: no-repeat;
        width:100%;
        background-size: cover;
    }

    .box
    {
        margin: 0px 10px;
    }

    #box1
    {
        position: absolute;
        bottom: -95%;
        width: 80%;
        height: fit-content;
        padding-bottom: 25px;
        max-width: 312px;
        animation-name: flyMobile1;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    #box2
    {
        position: absolute;
        top: 109%;
        width: 80%;
        height: fit-content;
        padding-bottom: 10px;
        max-width: 312px;
        animation-name: flyMobile2;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    #logo
    {
        margin-top: 14%;
        margin-left: 10%;
    }

    .icons
    {
        border: 1px solid;
        padding: 6%;
        border-radius: 10px;
        background-color:hsl(229, 57%, 11%);
        margin:4%;

    }

    .iconsContainer
    {
        margin-left: 6%;
        margin-top: 6%;
        width:85%;
    }

    .col-12
    {
        display: flex;
        justify-content: center;
        padding-left:0px;
    }

    .dataLeft
    {
        background-color: #ffffff;
        padding: 28px 35px;
        border-radius: 8px;
        position: absolute;
        top: 90%;
        transform: translateX(14%);
    }

}

@keyframes fly
{
    0%{bottom:-150px; opacity:0}
    50%{opacity:0.5}
    100%{bottom:-93px; opacity:1}
}


@keyframes flyMobile1
{
    0%{bottom:-110%; opacity:0}
    50%{opacity:0.5}
    100%{bottom:-95%; opacity:1}
}

@keyframes flyMobile2
{
    0%{top:124%; opacity:0}
    50%{opacity:0.5}
    100%{top:109%; opacity:1}
}