@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

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

:root {--main-background:hsl(212, 45%, 89%);
--content-background:hsl(0, 0%, 100%);}

@media (min-width :1440px)
{.main-container {width: 100vw;
    height: 100vh;
    background-color: var(--main-background);
    display: flex;
    justify-content: center;
    align-items: center;}

    .main-container .content-container {
        width: 22%;
        height: 70%;
        background-color: var(--content-background);
        background: 0.5px solid white;
        border-radius: 20px;
        display: flex;
    flex-direction: column;}

.main-container .content-container .images
{background-image: url(images/image-qr-code.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 65%;
display: flex;
margin: 20px;
border-radius: 10px;}

.main-container .content-container .about
{height:35% ;}

h1 {font-size: 20px;
    font-weight: 700;
    color:hsl(218, 44%, 22%) ;
    margin-right: 36px;
    margin-left: 36px;
    margin-bottom: 20px;
    text-align: center;}

    
    p {font-size: 15px;
        font-weight: 400;
    color:hsl(212, 45%, 89%) ;
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;}


}

    

@media (max-width :400px)
{.main-container {width: 100vw;
    height: 100vh;
    background-color: var(--main-background);
    display: flex;
    justify-content: center;
    align-items: center;}

    .main-container .content-container {
        width: 80%;
        height: 75%;
        background-color: var(--content-background);
        background: 0.25px solid white;
        border-radius: 8px;
        display: flex;
    flex-direction: column;}

    .main-container .content-container .images
        {background-image: url(images/image-qr-code.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 60%;
        display: flex;
        margin: 15px;
    border-radius: 5px;}

    
    .main-container .content-container .about
    {height:35% ;}

    h1 {font-size: 20px;
        font-weight: 700;
        color:hsl(218, 44%, 22%) ;
        margin-right: 28px;
        margin-left: 28px;
        margin-bottom: 15px;
        text-align: center;}

        p {font-size: 15px;
            font-weight: 700;
        color:hsl(212, 45%, 89%) ;
        text-align: center;
        margin-left: 35px;
        margin-right: 35px;}
    
}