:root{
    --dark-grayish-magenta: hsl(303, 10%, 53%);
    --light-grayish-magenta: hsl(300, 24%, 96%);
    --very-dark-magenta: hsl(300, 43%, 22%);
    --soft-pink: hsl(333, 80%, 67%);
    --font-size-para: 0.938rem;
}

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

ul{
    list-style-type: none;
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

p{
    line-height:1.5;
}

.main-container{
    height:100%;
    width:1250px;
    padding:100px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

header{
    width:100%;
    display: flex;
    justify-content:space-between;
    flex:3 auto;
    flex-wrap: wrap;
    margin:auto;
}

main p{
    width:40ch;
    color:var(--dark-grayish-magenta);
}

main{
    display: flex;
    flex-direction: column;
    flex:auto;
    justify-content: center;
}

header section{
    flex:auto;
}

main h1{
    color:var(--very-dark-magenta);
    width:13ch;
    font-size:3rem;
    margin:0 0 30px 0;
}

p{
    font-size: var(--font-size-para);
}

footer{
    display: flex;    
    flex:1 1 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:20px;
    margin:auto;
}

footer h2,footer h3{
    font-size: var(--font-size-para);
}

footer h3{
    color:var(--soft-pink);
    margin-top:8px;
}

.card-header{
    display: flex;
    align-items: center;
}

header section{
    display: flex;
}

header section ul{
    display:flex;
    flex-direction: column;
    gap:9px;
    margin:auto;
    flex:1 1 500px;
    flex-wrap: wrap;
}

header section ul li{
    width:390px;
    align-self: flex-start;
    background: var(--light-grayish-magenta);
    padding:15px 30px;
    padding-right:40px;
    border-radius:10px;
    color:var(--very-dark-magenta);
    font-weight: 700;
    display:flex;
    flex:auto;
    flex-wrap: wrap;
}

.images{
    flex-shrink: 0;
    width:fit-content;
}

header section img{
    margin-right:5px;
    width:15px;
}

header section img:nth-last-child(1){
    margin-right:30px;
}

li:nth-of-type(2){
    align-self:center;
}

li:nth-of-type(3){
    align-self: flex-end;
}

.card{
    background: var(--very-dark-magenta);
    color:white;
    padding:30px;
    border-radius:8px;
    align-self: center;
    flex: 1 1 330px;
}


footer img{
    border-radius:50%;
    margin-right:30px;
    width:40px;
}

footer p{
    margin-top:20px;
}

footer .card:nth-child(1){
    align-self: flex-start;
}

footer .card:nth-child(3){
    align-self: flex-end;
}

.attribution-container {
    position:relative;
    width:100%;
}

.attribution{
    position:absolute;
    text-align: center;
    width:100%;
    bottom:-50px;
    background: var(--very-dark-magenta);
    padding:5px;
    color:white;
    border-radius: 15px;
}

address{
    font-style: normal;
}

.attribution a {
color: var(--soft-pink);
text-decoration: none;
}

@media (max-width:1250px){
    
    .main-container{
        margin: auto;
        padding:60px 20px;
        height:auto;
    }

    header section{
        margin-bottom:50px;
    }
    main{
        text-align: center;
        justify-content: center;
    }
    main p, main h1{
        margin:0 auto;
    }
    main{
        margin-bottom:20px;
    }


    header section img:last-child{
        margin-right:0;
    }

    header section ul li{
        align-items: center;
        flex-direction: column;
    }


    .card-header{
        flex:auto;
    }

    header main{
        flex:auto;
        width:100%;
        height:fit-content;
    }

    header section ul{
        flex: initial;
        width:80%;
    }

}

@media(max-width: 500px){
    .card{
        flex:auto;
        width:100%;
    }

    footer .card:nth-child(1){
        align-self: initial;
    }

    footer .card:nth-child(2){
        align-self: initial;
    }

    footer .card:nth-child(3){
        align-self: initial;
    }

    footer{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    header section ul li{
        width:100%;
    }

    header section ul{
        width: 100%;
    }

    header{
        width:100%;
    }

    main h1{
        width:100%;
    }

    main p{
        width:100%;
    }
}