html {
    font-family: 'Roboto', sans-serif;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size:10px;
    height: 100%;
    width: 100%;
}

body{
    width: 100%;
    height: 100%;
    background:black;
    font-size:1rem;
}

.container {
    width: 100%;
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding:30px; */
    max-width: 1200px;
    margin: 0 auto;
    gap:50px;
}

img {
    max-width: 100%;
    object-fit: contain;
    height: auto;
}

.text
{
    color:white;
    font-size:8rem;
    text-align: center;
}

@media screen and (max-width:1536px) {
.text
{
    font-size:8rem;
} 
}

@media screen and (max-width:1366px) {
    .container{
        padding:20px;
        gap:30px;
    }
    img {
        height: 110px;
    }
    
    .text
    {
        font-size:6rem;
    } 
}

@media screen and (max-width:1024px) {
    .container{
        padding:20px;
        gap:30px;
    }
    img {
        height: 100px;
    }
        .text
        {
            font-size:6rem;
        } 
}

@media screen and (max-width:768px) {
    .container{
        padding:15px;
        gap:30px;
    }
    img {
        height: 65px;
    }
    .text
    {
        font-size:4rem;
    } 
}

@media screen and (max-width:540px) {
    .container{
        padding:10px;
        gap:30px;
    }
    img {
        height: 55px;
    }
    .text
    {
        font-size:3rem;
    } 
}