@font-face {
  font-family: Brooklyn;
  src: url(/font/BrooklynFreeRegular.ttf);
}
@font-face {
  font-family: Scriptina;
  src: url(/font/Scriptina.ttf);
}

body
{
    margin: 0;
    font-size: 20px;
    font-family: 'Alegreya', serif;
    color: #222222;
    background-color: #F5F5F5;
}

.number-font
{
    font-family: 'Scriptina', sans-serif;
    font-size: 3rem;
}
.wedding-font
{
    font-family: 'Brooklyn', sans-serif;
}

h2
{
    font-size: 100px;
    font-weight: 400;
    margin: 2rem 0;
    line-height: 6rem;
}
h3
{
    font-size: 80px;
    font-weight: 400;
    margin: 0rem;
}
h4
{
    font-size: 25px;
    margin-bottom: 0;
}

p, li
{
    line-height: 1.8rem;
}

a
{
    color: #336333;
    text-decoration: none;
    font-weight: 800;
}
a:visited
{
    color: #336333;
}
a:hover
{
    color: #173b17;
}

.box-shadow
{
    box-shadow: 2px 2px 14px 0px rgba(0, 0, 0, 0.12);
}

.knapp
{
    padding: 16px;
    background-color: #336333;
    color: #ffffff;
    font-weight: 800;
    border: none;
    display: block;
    margin-top: 3rem;
}
.knapp:visited
{
    color: #ffffff;
}
.knapp:hover
{
    background-color: #173b17;
    color: #ffffff;
}

.margin-bottom-three
{
    margin-bottom: 3rem;
}

#header-section
{
    height: calc(100vh - 100px);
    padding-bottom: 100px;
    background-image: url("/bilder/header.jpg");
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: end;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    box-shadow: 0 -30vh 100px 100px rgba(0, 0, 0, 0.3) inset;
}
@media (min-aspect-ratio: 9/5) {
    #header-section
    {
        background-position: 0 45%;
    }
}
#header-section-content
{
    border-radius: 50px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 720px;
    text-align: center;
}
#welcome-message
{
    font-family: 'Brooklyn', sans-serif;
    font-size: 5rem;
    margin: 0;
    line-height: normal;
    display: none;
}
header
{
    font-size: 7rem;
    font-family: 'Brooklyn', sans-serif;
}
@media all and (max-width: 500px) {
    header
    {
        font-size: 5rem;
    }
}
.short-divider
{
    max-width: 21rem;
    color: #ffffff;
    width: 100%;
}
@media all and (max-width: 500px) {
    .short-divider
    {
        max-width: 12rem;
    }
}
#header-date
{
    font-size: 5rem;
    margin: 0;
    font-family: 'Brooklyn', sans-serif;
    line-height: 6rem;
}


.section
{
    padding: 50px 5%;
    text-align: center;
}
.section ul
{
    text-align: left;
}
.card-wrapper
{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
}
.content-wrapper
{
    padding: 50px 5%;
}
.limited-content-width
{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.main-section
{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.mini-card
{
    background-color: #ffffff;
    display: flex;
}
.mini-card-image
{
    width: 100%;
    max-width: 320px;
    object-fit: cover;
}
@media all and (max-width: 800px) {
    .mini-card
    {
        flex-direction: column;
    }
    .mini-card-image
    {
        width: 100%;
        max-width: none;
        max-height: 400px;
        object-fit: cover;
    }
    .mobile-column-reverse
    {
        flex-direction: column-reverse;
    }
}

.boende-wrapper
{
    display: flex;
    justify-content: center;
    column-gap: 50px;
    flex-wrap: wrap;
}
.boende-wrapper div
{
    width: 100%;
    max-width: 410px;
}

.card-top-image
{
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.image-map-wrapper
{
    display: flex;
    gap: 50px;
    align-items: center;
}
.gallery-image
{
    max-height: 650px;
    max-width: 100%;
}
@media all and (max-width: 1070px) {
    .image-map-wrapper
    {
        flex-direction: column;
    }
    .gallery-image
    {
        max-height: none;
    }
}

.osa-section
{
    min-height: 100vh;
}

.vackra-blommor
{
    width: 90%;
    max-width: 600px;
    margin: 50px auto;
    display: block;
    margin-bottom: 100px;
}