@charset "UTF-8";

* 
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

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

    #img_top >img
    {
        height: 500px;
        transform: translate(0, -200px);
    }

      #img_bottom >img
    {
        height: 500px;
        transform: translate(0, 300px);
    }
}

@media screen and (min-width:800px) {
    #img_top >img
    {
        transform: translate(0, -500px);
    }

    #img_bottom > img 
    {
        transform: translate(0, 300px);
    }
}

body 
{
    background: hsl(185, 75%, 39%) ;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

#img_top
{
    width: 100%;
    height: 100%;
    position: relative;
}


#img_bottom
{
    width: 100%;
    height: 100%;
    position: relative;
}


main 
{
    position: absolute;
    background: hsl(225, 10%, 92%);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 420px;
    height: 400px;
    z-index: 1;
}

#cmp_title 
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -35px;
}

#cmp_title > h2 
{
    margin-left: 10px;
    color: hsl(227, 10%, 46%);
}

#lodon 
{
    color: hsl(227, 10%, 46%);
    margin: 10px 0 3em;
}

#cmp_img 
{
    transform: translate(0, -50px);
    border-radius: 50%;
    border: 5px solid hsl(225, 10%, 92%);;
    background: hsl(225, 10%, 92%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#cmp_status 
{
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.text_cmp_status 
{
    color: hsl(227, 10%, 46%);
}