body {
    color: #443f46;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    color: #00274f;
}

h2 {
    text-align: center;
}



header {
    text-align: center;
}

header img {
    margin: 0.33em auto;
}

p {
    margin-bottom: 1em;
}

section {
    padding: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

strong {
    font-weight: 550;
}

#faq, #packages, #refresh-plan {
    background-color: #c0d6c5;
}

.callToAction {
    display: block;
    max-width: 15em;
    margin: 0.33em auto;
    padding: 0.66em;
    background-color: #82AD63;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-decoration: none;
    text-align: center;
    font-weight: 500;
}

.containerPackage {
    outline: 2px dashed #00274f;
    padding: 0.33em 0.66em;
    margin-top: 1em;
    background-color: white;
}

.containerPackageList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.containerPackage h3{
    margin-top: 0;
}

.containerSection {
    max-width: 40rem;
}

.eb-garamond-logo {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.vollkorn-sc-black {
  font-family: "Vollkorn SC", serif;
  font-weight: 700;
  font-style: normal;
}

.zalando-sans-body {
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


@media (min-width: 400px) {
    h1 {
        font-size: 2.75em;
    }
    
    h2 {
        font-size: 2em;
    }
    
    .containerPackage {
        width: 400px;
        padding: 1.33em 0.66em;
    }
    
    .containerPackageList {
        align-items: stretch;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        
    }
    
    .containerSection {
        padding: 2rem 0;
    }
    
    .containerXtraWide {
        max-width: 1250px;
    }
    
    
}

@media (min-width: 700px) {
     h1 {
        font-size: 3.5em;
    }
    
    .callToAction {
        font-size: 1.5em;
    }
    
}