*{
        font-family: 'Kumbh Sans', sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        
    }
    body{
        background-color:hsl(185, 75%, 39%);
    }
    .container{
        background:url('images/bg-pattern-top.svg') -15em -35em,
        url('images/bg-pattern-bottom.svg') 45em 15em;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        justify-content: center;
        align-items:center;
        overflow: hidden;
    }
    .attribution {
        margin:1rem;
    }
    .attribution a{
        text-decoration: none;

    }
    .card{
        display: flex;
    flex-direction: column;
    background-color: white;
    margin:2rem;
    height: 58vh;
    width:clamp(18rem, 25vw, 50rem);
    z-index: 3;
    border-radius: 1rem;
    align-items: center;
    }
    .top{
        background:url('images/bg-pattern-card.svg');
        border-top-left-radius: 1rem; 
        border-top-right-radius: 1rem;
        overflow: hidden;
        height: 100%;
        width:100%;
    }
    .mid{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        bottom: 3.5rem;
    }
    .mid img{
        height: 100px;
        width: 100px;
        border-radius: 50%;
        border: 5px solid white;
       
    }
    .text{
        display: flex;
        flex-direction:column;
        align-items: center;
        padding: 1.5rem;
        color:hsl(0, 0%, 59%);
    }
    .text h1{
        color:hsl(229, 23%, 23%);
        font-size: 1.2rem;
        font-weight: 700;
    }
    .text span{
        font-weight: 400;
        color:hsl(227, 10%, 46%);
    }
     hr{
        color: hsl(0, 0%, 59%);
        opacity: 0.4;
        border-right: none;
        border-left: none;
        width:clamp(15rem, 25vw, 50rem);
     }
     .bottom{
        display: flex;
        gap: 37px;
        position: relative;
        bottom: 2rem;
        text-align: center;
     }
     .bottom p{
        color:hsl(227, 10%, 46%);
        font-size:0.8rem;
     }
     .bottom h1{
        color:hsl(229, 23%, 23%);
        font-size:clamp(0.1rem, 1.2rem , 1.5rem);
       
     }
     @media screen and (max-width:1250px) {
        .container{
            background: url(images/bg-pattern-top.svg) -20em -35em, url(images/bg-pattern-bottom.svg) 37em 15em;
            background-repeat: no-repeat;  
        }
    }
    @media screen and (max-width:1180px)and (min-width:600px) {
        .container{
            background: url(images/bg-pattern-top.svg) -30em -35em, url(images/bg-pattern-bottom.svg) 22em 15em;
            background-repeat: no-repeat;  
        }
    }
    @media screen and (max-width:700px){
        .container{
            background: url(images/bg-pattern-top.svg) -43em -34em, url(images/bg-pattern-bottom.svg) 8em 16em;
            background-repeat: no-repeat;  
        }
    }