/* ---------------------- */ 
/*  Author: HUGO SJOEVALL */ 
/*  Year:   2022          */ 
/* ---------------------- */ 

/* ---- EJ  AKTUELLT ---- */ 
/*  COLOR-SCHEME          */ 
/*  DARK-GRAY:  #bbbbbb   */ 
/*  LIGHT-GRAY: #dfdfdf   */ 
/*  BLUE:       #59778f   */ 
/*  "YALE"blue: #0e4d92   */
/*  DARK-BEIGE  #ebdac7   */
/*  LIGHT-BEIGE #f5f2f0   */
/* ---------------------- */ 

/* FÄRGTEMA 2021 

HEADLINE blue: #0e2f52
MAIN-color (dark blue): #263238;
COMPLEMENT (yellow): #F1AA25;
COMPLEMENT-slightly darker (for buttons pushed etc): rgb(224, 158, 35);

Background-color (gray): rgb(245, 245, 245);
Complementary-background-color (beige): #f5f2f0;

Font (p): rgb(87, 87, 87);
1px borders: lightgray;

 */


/* -- animations from animate.css library -- */ 
@import "../bower_components/animate.css/animate.min.css";

/* -- AOS library for revealing elements on scroll -- */ 
@import "../bower_components/aos/dist/aos.css";

/* -- FONTS -- */ 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap'); /* NOTO */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); /* font-family: 'Quicksand', sans-serif;
*/

/* #tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0.6rem 0 0.2rem 0;
    color: #e9967a;
}  tror ej detta används? */

.subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    margin: 0.4rem 0 1rem 0;
    font-style: italic;
}
h1 {
    font-size: 3.6rem;
    font-weight: 700;
    margin: 1rem 0;
}
h2 { 
    font-size: 1.9rem;
    font-weight: 600;
    margin: 1rem 0;
}
h3 { 
    font-size: 1.3rem;
    font-weight: 500;
    margin: 1rem 0;
}
h4 { 
    font-size: 0.6rem;
    font-weight: 300;
    margin: 0.2rem 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: #263238;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    margin: 0.4rem 0 2rem 0;
    color: rgb(87, 87, 87);
    column-count: 1;
    column-width: 50ch;
    /* display: inline-block;
    vertical-align: top;
    align-content: top;
    align-items: top; */
}
h1, h2, h3, h4, h5, h6, p, li {
    max-width: 50ch;
}

/* -- ROOT, html, main and other basic elements -- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}
:root {
 --bkgclr: rgb(245, 245, 245);
 --altbkgclr: #f5f2f0;
 --mainclr: #263238;
 --complementclr: #F1AA25;
 --altcomplementclr: rgb(224, 158, 35);
 --textclr: color: rgb(87, 87, 87);
 --scroll-deg: 0;
}
html {
    min-height: 100vh;
    display: grid;
}
body {
    margin: 0;
    display: grid;
}
main {
    display: grid;
    justify-items: center;
    grid-template-columns: 100vw; /* (ändra detta till 100 när du fixat lite så det ser fint ut) */
    /* grid-template-rows: repeat(auto); */
}
img {
    width: 100%;
}
a {
    text-decoration: none;
    color: black;
}
:focus {
    outline: none;
}

button {
    border: none;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

/* GENERAL LAYOUT CLASSES */
.full-width {
    width: 100%;
}
.content-section {
    width: 100%;
    min-height: 40vh;
    padding: 9vh 10%;
}
.text-container {
    width: 100%;

    display: grid;
    gap: 0 4vw;
    place-items: start;
    grid-template-columns: repeat(auto-fit, minmax(410px, 1fr));
    grid-auto-rows: minmax(1fr, 1fr);
    justify-content: left;
    align-content: start;
}
.beige-bkg {
    background-color: #f5f2f0;
}
.introduction-section {
    width: 100%;
    min-height: 80vh;
    padding-top: 10vh;
}
.parallax-image-introduction-section {
    width: 100%;
    /* min-height: 100vh; */
    min-height: 80vh;
    padding-top: 10vh;
   
    /* background: repeating-linear-gradient(45deg, transparent 0px, transparent 13px, #bfd1df 13px, #bfd1df 26px); */
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    /*  background-repeat: no-repeat; */ 
    background-size: cover;

    display: grid;
    place-items: center;
}
.parallax-image-breakoff-section {
    width: 100%;
    min-height: 40vh;
    
    /* background: repeating-linear-gradient(45deg, transparent 0px, transparent 13px, #bfd1df 13px, #bfd1df 26px); */
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    /*  background-repeat: no-repeat; */ 
    background-size: cover;

    display: grid;
    place-items: center;
}

@media screen and (min-width: 1024px) {
    /* p {
        max-width: 120ch;
        column-count: 2;
        column-gap: 0 50px;
    } */
}