/*

Designa utifrån skärmar smalare än 576px, annorlunda designar för andra skärmstorlekar läggs till längre ner vid Break points- sektionen

*/




/* === Färgpalett och variabler === */
:root {
    --blue-light: #497fc1; /* På FRO:s hemsida används ibland den här för knappar, men den ska bara användas till exempelvis loggan */

    --blue: #1f4d8f;
    --blue-hover: #2f6eca;

    --yellow: #fdc706;
    --yellow-hover: #cfa81a;
    
    --black: #151515;
    --white: #ffffff;
}




/* === Globala stilar === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--black);
    font-family: Verdana, sans-serif;
    font-size: 1rem;
}

html {
    background-color: var(--white);
    overflow-x: hidden;
}




/* === Typografi === */
h1 {
    font-family: Impact, sans-serif;
    font-weight: 300;
    font-size: 2.5rem;
    line-height: 1.4;
    margin-bottom: 24px;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 14px 0;
}

h1,
h2,
h3 {
    text-align: center;
}




/* === Standarder för övriga element === */
section {
    margin: 0 auto;
    padding: 0 19px 60px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

section:first-of-type {
    padding-top: 56px;
}




/* === Knappar === */
.btn {
    width: 202px;
    padding: 13.5px 27px;
    line-height: 1.4375;
    border: none;
    border-radius: 15px;
    font-weight: 300;
    margin: 15px;
    text-decoration: none;
    text-align: center;
    transition: 0.33s all ease;
}

.btn-group {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-yellow {
    background-color: var(--yellow);
    color: var(--blue);
}

.btn-yellow:hover {
    background-color: var(--yellow-hover);
    color: var(--blue-hover);
}

.btn-blue {
    background-color: var(--blue-light);
    color: var(--yellow);
}

.btn-blue:hover {
    background-color: var(--blue-hover);
    color: var(--yellow-hover);
}




/* === Landing Page === */
#landing-page {
    background-image: url('/assets/images/bakgrund.png');
    background-size: cover;
    background-color: var(--yellow);
    border-bottom: 5px solid var(--yellow);
    min-height: 100vh;
}

#landing-page h1,
#landing-page h2,
#landing-page h3,
#landing-page h4,
#landing-page h5,
#landing-page h6,
#landing-page p {
    color: var(--white);
}




/* === Break points === */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    section {
        padding: 0 48px 60px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* Tomt */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h1 {
        font-size: 4.25rem;
        margin-bottom: 40px;
    }
    
    h3 {
        font-size: 1.75rem;
        margin: 20px 0;
    }

    .btn-group {
        margin-top: 50px;
    }

    .long {
        width: auto;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Tomt */
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    /* Tomt */
}