/* Importerar typsnitt från Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Cherry+Cream+Soda&family=Coming+Soon&family=Permanent+Marker&family=Raleway:ital,wght@0,100..900;1,100..900&family=The+Girl+Next+Door&display=swap');

/* Tvinga ljus färg på hela sidan, override på systemets dark mode */
:root {
    color-scheme: only light !important;
}

html, body, #modal, article {
    background-color: #eeebda !important;
    color: black !important;
    font-family: 'Raleway', sans-serif;
}

/* Centrering */
.center {
    text-align: center;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
}

/* Marginaler och padding */
.mt-10 { margin-top: 10%; }
.mb-10 { margin-bottom: 10vh; }
.pt-10 { padding-top: 10vh; }
.pb-10 { padding-bottom: 10vh; }
.mt-5  { margin-top: 5vh; }
.mb-5  { margin-bottom: 5vh; }

/* Knappar */
.knapp {
    font-family: "The Girl Next Door", cursive !important;
}

.knapp-inbjudan {
    width: 50vw;
    background-color: lightskyblue;
    font-size: 3vh;
    font-weight: normal;
    color: black !important;
}

.knapp-formular {
    margin-top: 10vh;
    width: 50vw;
    background-color: lightskyblue;
    font-size: 3vh;
    color: black !important;
}

/* Länkar utan dekoration */
.no-decoration {
    text-decoration: none;
    font-weight: normal;
    color: black !important;
}

/* Bilder */
.bild-inbjudan {
    width: 90%;
}

/* Modal-stäng-knapp */
#close-modal {
    float: right;
    background-color: red;
}

/* Typografi */
h1 {
    font-family: "Permanent Marker", cursive !important;
    font-weight: bold !important;
    font-size: 6vw !important;
    color: black !important;
}

h2 {
    font-family: "The Girl Next Door", cursive !important;
    font-weight: 400 !important;
    font-size: 5vw !important;
    color: black !important;
}

h3 { 
    font-family: "Coming Soon", cursive !important;
    font-weight: bold !important;
    color: black !important;
}

/* Footer i modal */
#modal footer {
    height: 10vh;
}

/* Formulär */
.form {
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
}

.form input, 
.form select {
    width: 50vw;
    text-align: center;
}

/* Navbar */
.navbar {
    background-color: lightgray;
    width: fit-content;
    margin-left: 2vw;
    margin-top: 2vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

.navbar a {
    color: black !important;
}