/*Färger
Färger från https://www.canva.com/colors/color-palettes/rosettes-and-cream/  
Hot Pink    #ef7c8e
Cream       #fae8e0
Spearmint   #b6e2d3
Rosewater   #d8a7b1
*/
body {
    background-color: white;
}

h1, h2, h3, h4 {
    font-family: "Outfit", sans-serif;
}
h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 55px;
}
h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
}
h3 {
    font-weight: 26px;
    font-weight: 700;
    line-height: 36px;
}
h4 {
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
}
p, li, figcaption {
    font-family: "Quicksand", sans-serif;
}
li {
    margin-bottom: 10px;
}
p, li, figcaption {
    font-size: 18px;
    line-height: 26px;
}
ul {
    list-style: none;
}
span {
    font-family: "Indie Flower", cursive;   /*finns endast som regular 400*/
    font-size: 28px;
    font-weight: 400;
    line-height: 39px;
}
.lilly {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    font-family: "Quicksand", sans-serif;
    color: #8f5b66;
}
a {
    color: black;
    
}
a:hover {
    font-weight: bold;
}
a:active {
    font-weight: bold;
}

.header {
    max-width: 1100px;
    width: 100%;
    min-height: 125px;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    background-color: #2ec1c9;
}
.antal-insamlade-hjartekatter {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.img-logo {

    margin-top: 25px;
}
.nav {
    max-width: 1100px;
    width: 100%;
    min-height: 50px;
    height: 100%;
    margin: auto;
    display: flex;
    position: sticky;
    top: 0px;
    background-color: #2ec1c9;

}
.nav-ul {
    display: flex;
    justify-content: space-around;
}
.nav-ul li {
    margin-left: 15px;
    margin-right: 15px;
}

.container-large-img {
    max-width: 1100px;
    width: 100%;
    min-height: 700px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    margin: auto;
}
.container-large-text {
    max-width: 550px;
    width: 100%;
    min-height: 700px;
    height: 100%;
}
.container-large-text p {
    text-align: justify;
}
.container-home {
    max-width: 1100px;
    width: 100%;
    min-height: 400px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    margin: auto;
}
.container-intro {
    max-width: 550px;
    width: 100%;
    min-height: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.container-direct-pattern {
    max-width: 450px;
    width: 100%;
    min-height: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.container-bidra {
    max-width: 1100px;
    width: 100%;
    min-height: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    background-color: #fae8e0;
    border-radius: 25px;
}
.container-cards {
    max-width: 1100px;
    width: 100%;
    min-height: 350px;
    height: 100%;
    display: flex;
    justify-content: space-around;
}
.container-card {
    max-width: 200px;
    width: 100%;
    min-height: 325px;
    height: 100%;
    border: #8f5b66 solid 3px;
    border-radius: 15px;
}
.container-card h3 {
    text-align: center;
}
.container-card p {
    margin: 10px;
    
}
.bidra-description {
    text-align: justify;   
}
.gor-hjartekatter {
    background-color: #ef7c8e;
}
.gor-syskondjur {
    background-color: #D8A7B1;
}
.ge-rabatter {
    background-color: #ef7c8e;
}
.sprid-budskapet {
    background-color: #D8A7B1;
}

.container-virkmonster {
    max-width: 1100px;
    width: 100%;
    min-height: 800px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: auto;
}
.container-instruktioner {
    max-width: 1000px;
    width: 100%;
    min-height: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: auto;
}
.container-gor-sa-har {
    max-width: 1000px;
    width: 100%;
    min-height: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: auto;
}
.container-mottagare-hjartekatter {
    max-width: 1000px;
    width: 100%;
    min-height: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: auto;
}
.container-mottagare-hjartekatter h3 {
    text-align: center;
}
.mottagare-div, .butiker-div {
    max-width: 1000px;
    width: 100%;
    min-height: 250px;
    height: 100%;
    display: flex;
    margin: auto;
    justify-content: space-around;
}
.mottagare {
    max-width: 300px;
    width: 100%;
    min-height: 200px;
    height: 100%;
    margin: 25px;
    border: #a64755 solid 5px;
    border-radius: 10px;
    background-color: #FAE8E0;
    
}
.butiker {
    max-width: 200px;
    width: 100%;
    min-height: 150px;
    height: 100%;
    margin: 25px;
    border: #8f5b66 solid 5px;
    border-radius: 10px;
    background-color: #daeff0;
}

.container-syskondjur {
    max-width: 1100px;
    width: 100%;
    min-height: 500px;
    height: 100%;
    margin: auto;
}
.container-syskondjur h2 {
    text-align: center;
}
.container-syskondjur p {
    text-align: justify;
}
.container-om-oss {
    max-width: 1100px;
    width: 100%;
    min-height: 500px;
    height: 100%;
    margin: auto;
}
.container-om-oss h2 {
    text-align: center;
}
.container-om-oss p {
    text-align: justify;
}
.container-butiker-med-rabatt {
    max-width: 1100px;
    width: 100%;
    min-height: 500px;
    height: 100%;
    margin: auto;
}
.container-butiker-med-rabatt h2 {
    text-align: center;
}
.container-butiker-med-rabatt p {
    text-align: justify;
}



.container-sprid-budskapet {
    max-width: 1100px;
    width: 100%;
    min-height: 500px;
    height: 100%;
    margin: auto;
}
.container-sprid-budskapet h2 {
    text-align: center;
}
.container-sprid-budskapet p {
    text-align: justify;
}

.footer {
    max-width: 1100px;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    background-color: #2ec1c9;

}
.footer h3 {
    text-align: center;
}
.contact-info {
    display: flex;
    justify-content: space-around;
}

.container-svenskt-monster {
    max-width: 1100px;
    width: 100%;
    min-height: 800px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: auto;
}