/* GRUNDSAKER */
/* @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Montserrat:wght@100;700&display=swap'); */
/* font-family: 'Courier Prime', monospace; */
/* font-family: 'Montserrat', sans-serif; */



@font-face {
    font-family: "Jaapokki";
    src: url(/css/fonts/jaapokki-regular.woff) format("woff");
}

@font-face {
    font-family: 'Neutra';
    src: url(/css/fonts/NeutraText-Book.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Signifier';
    src: url(/css/fonts/Signifier-Bold.otf) format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Signifier';
    src: url(/css/fonts/Signifier-Light.otf) format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Signifier';
    src: url(/css/fonts/Signifier-ThinItalic.otf) format('opentype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Neutra';
    src: url(/css/fonts/NeutraText-Bold.otf) format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Filosofia';
    src: url(/css/fonts/Filosofia-Regular.otf) format('opentype');
}

/* color scheme */
:root {
/* HYPNOTIC */
    /* --main-bg-color: #BF8360; */
    /* --text-on-main: #D9B5AD; */
    /* --second-bg-color: #D9B5AD; */
    /* --text-on-second: #BF8360; */
    /* --accent-color: #8C030E; */
    /* --highlight-color: #F23558; */
    /* --font-title: 'Signifier'; */
    /* --font-body: 'Neutra'; */

    /* --main-bg-color: #0D0D0C; */
    /* --text-on-main: #ECAE1C; */
    /* --second-bg-color: #191142; */
    /* --text-on-second: #3FE9C7; */
    /* --accent-color: #EE3272; */
    /* --highlight-color: #EE3272; */
    /* --font-title: 'Signifier'; */
    /* --font-body: 'Neutra'; */

    --main-bg-color: #00020D;
    --text-on-main: #E9ECF2;
    --second-bg-color: #051026; 
    --text-on-second: #E9ECF2;
    --accent-color: #051026;
    --highlight-color: #706C8C;
    --font-title: 'Neutra';
    --font-body: 'Signifier';
}

/* grund */

html {
    font-size: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0px;
    background: var(--main-bg-color);
}

h1 {
    font-family: var(--font-title);
    /* font-family: 'Jaapokki'; */
    /* font-family: 'Montserrat', sans-serif; */
    /* font-family: Signifier; */
    /* font-family: 'Neutra'; */
    font-weight: 300;
    font-style: normal;

    margin: 0.6em 0.2em 0px 0.2em;
    line-height: 1.3em;
}

h2 {
	font-family: var(--font-title);
	font-weight: 700;
	/* font-size: 1em; */
}

body {
    font-size: 2rem;
    font-family: var(--font-body);
    /* font-family: 'Filosofia'; */
    /* font-family: 'Courier Prime', monospace; */
    /* font-family: Signifier; */
    /* font-family: Neutra; */
    margin: 0em 0.4em 0.3em 0.4em;
}


em {

    color: var(--highlight-color);
}

b {
    background: var(--main-bg-color);
    /* color: var(--accent-color); */
}


.body-text {
    width: min(95%, 1000px);
    background: var(--second-bg-color);
    color: var(--text-on-second);
    padding: 0 1.5em;
}

/* navbar */
.navbar {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--text-on-main);
    /* background: var(--second-bg-color); */
}


.big-center {
    font-size: 15vmin;
    display: flex;
    flex-flow: column;
    /* letter-spacing: -1.95rem; */
}

.big-center a {
    line-height: 0.8;
    font-weight: 700;
}

.small-top {
    font-size:2rem;
    display: flex;
    flex-flow: row;
    justify-content: center;
    gap: 1rem;
    /* width: min(100%, 450px); */
}

.separator {
    color: var(--second-bg-color);
}

a {
    text-decoration: none;
    font: normal 300 1em var(--font-title);
}

a:link, :visited {
    /* background: var(--second-bg-color); */
    color: var(--text-on-main);
}

a:hover {
    color: var(--highlight-color);
}

.link_inbody {
    font-variant: all-small-caps;
}

.small-top a:hover {
    color: var(--main-bg-color);
    background: var(--text-on-main);
}

.big-center a:hover {
    color: var(--accent-color);
    /* letter-spacing: 2.3rem; */
}

.small-top a:active {
    color: var(--main-bg-color);
    background: var(--accent-color);
    /* font: italic 100 1em var(--font-title); */
}


/* forstasidan */
#background_video {
    object-fit: cover;
    position: fixed;
    min-width: 100vw;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.center {
    /* kanske inte flex? */
    position: fixed;
    width:100vw;

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 100vh;
    flex-flow: column;
}

#logga_index {
    width: 8em;
}


/* project */

.container {
    /* width: min(95%, 1000px); */
    display: flex;
    align-items: flex-start;
    align-content: center;
    justify-content: center;
    flex-flow: column wrap;
    gap: 0rem;
    
    color: var(--text-on-main);
}


.project {
    width: min(95%, 1000px);
        /* box-shadow: 2rem -2rem var(--text-on-second); */
    background: var(--second-bg-color);
    color: var(--text-on-second);
    padding: 0 1.5em;
}

.project > h1 {
    text-align: right;
    font-size: 5rem;
    /* background: var(--main-bg-color); */
    /* color: var(--text-on-main); */
}

.project  h2 {
    background: #292551;
    color: var(--accent-color);
    font-variant: all-small-caps;
    line-height: 0.6em;
    margin: 0.4em 5em;
    padding: 0.3em 0;
    /* width: 6.6em; */
}

.project p {
    /* --n: 0.9; */
    /* line-height: 0.2; */
    text-align: justify;
    /* transition: 0.4s ease; */
    /* background-color: var(--text-on-second); */
    /* color: var(--second-bg-color); */
}

.media {
    transition: .2s ease;
}

/* extra for att dolja bilder */
.sub {
    /* display: none; */
    /* transition: 0.4s ease; */
}

/* .project:hover p { */
    /* --n: 0.9; */
    /* line-height: 1; */
    /* background-color: var(--second-bg-color); */
    /* color: var(--text-on-second); */
}

.project:hover .media {
    /* filter: blur(0px); */
}

.project:hover ~ .sub {
    /* display: block; */
}

.media:nth-of-type(2n+1) {
    /* filter: blur(86px); */
    width: auto;
    /* height: calc(11.2em*var(--n)); */
    height: 9em;
    margin: 0.3em 1em 0em -3em;
    float: left;
}

.media:nth-of-type(2n) {
    /* filter: blur(90px); */
    width: auto;
    /* height: calc(11.2em*var(--n)); */
    height: 9em;
    margin: 0.3em -2em 0em 1em;
    float: right;
}


.photowall {
    display: flex;
}

.photowall > * {
    width: 30%;
    flex: 1;
}


/* about */
#big_group_image {

    background: url(/media/group_3.jpeg) 25% bottom / cover no-repeat;
    height:80vh;
}

.portrait_container {
    width: min(100%, 1200px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
    
    margin-inline: auto;
}

.person {
    width: 30%;
    height: auto;
    position:relative;
}

.person img {
    max-width: 100%;
    height: auto;
    filter: blur(0px);
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background-color: var(--second-bg-color);
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* transition: 1.2s ease; */
    opacity: 0;
    font-size: 1.8rem;

    text-align: center;
}

.overlay p {
    margin-top: 3.5em;
    font-family: var(--font-title);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-on-second);
}

.person:hover img {
    transition: .4s ease;
    /* filter: blur(6px); */
}

/* .overlay p { */
    /* backdrop-filter: invert(100%); */
    /* backdrop-filter: blur(7px); */
/* } */

.person:hover .overlay {
    opacity: 1;
}

/* contact */

.contact {
    height:80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#adress {
    padding: 1em;
    color: var(--text-on-second);
    background: var(--second-bg-color);
}

#social_media {
    display:flex;
    justify-content: space-around;
}

#social_media img {
    width: 3em;
    filter: invert(1) opacity(0.3)
}

#social_media img:hover {
    filter: invert(1);
}

/* Textilfabriken */

.textil_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* overdriven tittle */
#textil_title {
    background-image: url(/media/textilfabriken/1.jpeg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;

    overflow: hidden;
    width: 110vw;
    height: 1.57em;
    font-size: 45vw;
    line-height: 0.52;
    font-family: Signifier;
    font-weight: 700;
    padding-top: 0.2em;
    margin: 5rem 0 0 -10vw;

}

#firstcolor {
    background: linear-gradient(0deg, #120b1a, #7193a3);
}

#textil_info {
    width: 100vw;
    display: flex;
    flex-direction: column;
    margin-bottom: 4em;
    align-items: center;
    background: #120b1a;
}

#textil_second_title {
	font-weight: 100;
	color: white;
	font-size: 5rem;
	margin-top: 8em;
	margin-bottom: 3em;
	font-size: 4vw;
	letter-spacing: 4vw;
}

#textilbild {
    /* padding: 0em 7em; */
    /* padding-top: 0; */
    width: min(85%, 900px);
    height: auto;
}

#textil-body {
	/* width: 100%; */
	background: none;
	color: var(--text-on-main);
}


.calender_container {
    display: flex;
    flex-direction: column;
    align-items: center;

    background: url(/media/textilfabriken/2.jpeg) no-repeat center center / cover;
    width: 100vw;
}


#kalender {
    /* background: url(/media/group_0.jpeg) no-repeat center center fixed; */
    /* background-size: cover; */
    position: relative;
    padding-top: 12em;
    /* z-index: 2; */
    /* height:80vh; */
}

.nedslag {
    text-align: center;
    position: sticky;
}

.nedslag img {
    height: 5em;
    width: auto;
    /* filter: invert(1); */
}

.nedslag p {
    font-size: 2em;
    margin-block-start: 0px;
    text-align: center;
    margin-top: -0.6em;
    margin-bottom: 0;
}

.hovsq {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    width: 7.5em;
    height: 4em;
    margin: 1.7em auto;
    /* background: #4caf507d; */
}

.hovsq:hover {
    backdrop-filter: invert(1);
    /* filter: invert(1); */
    /* filter: blur(0.02em); */
    /* color: blue; */
}

#kalender a:hover {
    color: var(--text-on-main);
}

span.datum {
    font-variant:all-small-caps;
    font-weight: 700;
}

div.boka {
    display: inline-block;
    background: red;
    padding: 0.2em;
    width: 7em;
    box-shadow: 3px 5px #664844;
    margin-bottom: 3em;
}

/* sponsfooter textil */

#sponsrubrik {
    text-align: center;
    color: var(--highlight-color);
}

.spons_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1em;
}

img.sponslogga {
    /* width: 215px; */
    height: 110px;
}

#linamaskin {
    height: 290px;
    margin-bottom: -1em;
    margin-right: -2.5em;
}

/* extra */

p.align_right {
    text-align: right;
}