@charset "utf-8";
/* CSS Document */

html, 
body 


/*-----------------BACKGROUND COLOR--------------------*/

.hero {
  position: relative;
  height: 100vh;
}

.hero img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Viktigt */
  z-index: -1;       /* Lägger bilden bakom texten */
}

.content {
  position: relative;
  color: white;
  text-align: center;
}


/*-----------------BACKGROUND COLOR--------------------*/
body {
  background-color: whitesmoke;
}

/*-----------------BACKGROUND IMG--------------------*/


body {
    margin: 0; /* Tar bort vit kant runt sidan */
}

.fullwidth {
    width: 100%;      /* Täcker hela bredden */
    height: auto;     /* Behåller proportioner */
    display: block;   /* Gör att den beter sig korrekt */
}

/*-----------------TRAIL IMG--------------------*/

#trail{
	display: flex;
}
#trail2{
	display: flex;
}
#trail3{
	display: flex;
}


/*-----------------RAVISHING LAYOUT--------------------*/

#img0{
margin-left: 500px;
}
#img01{
margin-left: 50px;
}
#img02{
margin-left: 20px;
}
/*-----------------RAVISHING LAYOUT--------------------*/

#img03{
margin-left: 0px;
	margin-top: 50px;
}
#img04{
margin-left: 100px;
}
#img05{
margin-left: 20px;
}
/*-----------------RAVISHING LAYOUT--------------------*/

#img06{
margin-left: 100px;
	margin-top: 50px;
}
#img07{
margin-left: 100px;
}
#img08{
margin-left: 400px;
}
/*-----------------RAVISHING LAYOUT--------------------*/

#img09{
margin-left: 700px;
	margin-top: 50px;
}
#img010{
margin-left: 0px;
}
#img011{
margin-left: 20px;
}
/*-----------------RAVISHING LAYOUT--------------------*/

#img012{
margin-left: 100px;
	margin-top: 50px;
}
#img013{
margin-left: 100px;
}
#img014{
margin-left: 400px;
}
/*-----------------RAVISHING LAYOUT--------------------*/

#img015{
margin-left: 100px;
	margin-top: 50px;
}
#img016{
margin-left: 100px;
}
#img017{
margin-left: 0px;
}

/*-----------------RAVISHING LAYOUT 2--------------------*/

#img1{
margin-left: 100px;
	margin-top: 50px;
}
#img12{
margin-left: 100px;
}
#img13{
margin-left: 0px;
}
#img14{
margin-left: 100px;
	margin-top: 50px;
}




/*-----------------WORK INDEX--------------------*/
a {
color: black; /* huvudsaklig text */
text-decoration: none;
}
 a:hover {
  background-color: transparent;
  color: #5FB0FF; /* works - on hover */

}

/*----------------- WORK--------------------*/
p {
    color: black;	/* verkstext */

}
/*-----------------ENG CV--------------------*/
p1 {
    color: black; /* biography */
}

/*-----------------FONT--------------------*/
@font-face{
font-family: WorkSans;
src: url("WorkSans.ttf");
}
#main{
font-family: WorkSans;
}

/*-----------------INDEX-IMG-------------------*/



  .image-container img:first-of-type {
    margin-top: 150px; /* lägg bara marginal till toppen på första bilden */
  }



@media (max-width: 768px) {  
.image-container img:first-of-type {
    margin-top: 100px; /* lägg bara marginal till toppen på första bilden */
	}}


.image-containerA {
    position: fixed;
    height: 100vh; /* Full höjd på containern */
    width: 70%; /* Sätt bildens bredd */
    margin-top: 90px;
	overflow: hidden;
	z-index: -1;
}

.centered-imgA {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Justera bildens position */
    width: 100%; /* Sätt bildens bredd */
	overflow: hidden;
	z-index: -1;
}

/* Media query för mobilversion */
@media (max-width: 768px) {
    .centered-imgA {
        width: 100%; /* Gör bilden 100% bredd på små skärmar */
        top: 400px; /* Sätt bildens position till toppen för att fylla skärmen */
    }
}






/*-----------------TOPNAV-MENU--------------------*/

/* Generell layout */
body {
  margin: 0;
  font-family: WorkSans;
}

/* Översta menyraden */
.navbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1px 1px;
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%; 
    z-index: 2; 
	background-color: transparent; 
}

.navbar a:hover {
	color: #5FB0FF; /* navbar - on hover */
}

/* Våra namn/logo */
.navbar .logo { 
    font-size: 20px;
    font-weight: normal;
	font-style: italic;
	font-family: WorkSans;
	z-index: 2;
	background-color: transparent;
}

/* selected works/about/contact */
.nav-links {
    display: flex;
    gap: 30px;
    z-index: 2;
	background-color: transparent;
	font-size: 20px;
}

.nav-links li {
  display: inline;
}

.nav-links a {
  text-decoration: none;
  color: black; /* menyrad */
}

/* själva menysymbolen */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 80px;
  margin-right: 20px;
}





/*-----------------about/contact-------------------*/

.container {
    display: flex;
    align-items: flex-start;  /* Ser till att blocken börjar från toppen */
	font-size: 18px;
  line-height: 1.8;
	color: black; /* mail-adress */

}

.left-text, .right-text {
    flex: 1;  /* Gör att varje textblock tar lika mycket plats */
    padding: 20px;
    box-sizing: border-box;
    margin-top: 20px;  /* Lägger till top-margin för båda blocken */
}

/*----------------TEST-NY-INDEX-------------------*/

.center-text {
  max-width: 700px;          /* Begränsar bredden */
  margin: 205px auto 40px;   /* Centrerar horisontellt + toppmarginal */
  padding-right: 20px;           /* Luft på små skärmar */
  font-family: "WorkSans", sans-serif;
  line-height: 1.5;
  font-size: 20px;
  text-align: left;
}

/*-----------------WORK-LISTA-------------------*/

.container1 {
  position: absolute;
  width: 100%;
  display: block;
  margin-left: 260px;
  margin-right: auto;
  font-family: WorkSans;
  margin-top: 205px;
  line-height: 1.5;
  z-index: 2;
  text-align: left;
  left: 120px;
  font-size: 20px;
}

/*-----------------RAVISHING CONTAINER-------------------*/

.container3 {
padding: 0px;

}
/*-----------------Verkstext på bild--------------------*/

.red-box {
    position: fixed;
    top: 0px;
    right: 0px;
    background-color: #5FB0FF;
    color: white; opacity: 70%;
    padding: 20px;
	width: 33%;  /* Sätt en fast höjd på rutan */
	height: 100%;
    overflow: auto;  /* Gör att en scrollbar visas om texten är för lång */
	z-index: 0;
}

/* Media query för mobilversion */
@media (max-width: 768px) {
    .red-box {
        width: 50%; /* Gör bilden 100% bredd på små skärmar */
    }
}


/*-----------------IMG CAPTIONS--------------------*/

figcaption {
  color: black;
  text-align: left;
  font-size: 0.7em;
  font-family: WorkSans;
}

/* Media query för mobilversion */
@media (max-width: 768px) {
    .figcaption {
    font-size: 16px;
    }
}

/*-----------------BUTTON X--------------------*/

button2 {
    position: fixed;
    top: 100px;
    right: 20px;
    padding: 10px 20px;
    font-size: 36px;
	font-style: bold;
    cursor: pointer;
	z-index: 10;
}


/*-----------------Scrollbar--------------------*/

/* Hela scrollbaren */
::-webkit-scrollbar {
  width: 8px;
}

/* Bakgrunden (spåret) */
::-webkit-scrollbar-track {
  background: #5FB0FF;
}

/* Själva "handtaget" */
::-webkit-scrollbar-thumb {
  background: #0079EF;
  border-radius: 5px;
}

/* Hover-effekt */
::-webkit-scrollbar-thumb:hover {
  background: ;
}

/*-------------------------------------*/


body {
  overflow-x: hidden;
}




















/*-----------------MOBIL--------------------*/


/* Mobilanpassning meny */ 
@media screen and (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: 100px;
    left: 0px;
    padding: 20px;
    width: 50%;
    font-size: 50px;
	z-index: 12;
	color: black;
  }

		/* För mobil, meny i hamburgermenyn*/
  .nav-links.open {
    display: flex;
    margin-top: 100px;
    width: 100vw; /* Menyn ska vara lika bred som skärmen */
    height: 100vh;
	z-index: 22;
	padding-top: 50px; /* Padding runt menyn */
    top: 0; /* Placera den längst upp */
    left: 0; /* Placera den längst till vänster */
	gap: 30px;
	background-color: whitesmoke;
	font-size: 30px;
	color: black;
    text-align: left; /* Se till att texten är vänsterjusterad */
    padding-left: 5px;
  }

	/* För mobil, menysymbol*/
  .menu-toggle {
      display: block;
	  background-color: transparent;
	  padding: 0px;
	  margin: 0px;
  }
}

.container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  background-color: whitesmoke;

}

.left-text, .right-text {
  width: 48%;

}


/* För mobil, about/contact*/
@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
    align-items: center;
	background-color: whitesmoke;
	margin: 0;
  }}

/* För mobil, about/contact*/
  .left-text, .right-text {
    width: 100vw;
    margin: 0px;
    background-color: whitesmoke;
	}


/* För mobil, våra namn*/
@media screen and (max-width: 768px) {
  .navbar .logo {
      font-size: 40px;
	  z-index: 20;
	  background-color: transparent;
  }
}

/* För mobil, verkslista*/
@media screen and (max-width: 768px) {
  .container1 {
      font-size: 22px;
	  z-index: 1;
	  width: 100%;
	  background: transparent;
    position: absolute;
    left: 0;      /* Detta placerar den längst till vänster */
    top: 0;       /* Valfritt: placerar den längst upp */
    margin-left: 10px; /* Nollställ eventuell tidigare marginal */
    height: 150vh;        /* eller t.ex. 300px */
    overflow-y: auto;     /* gör att man kan scrolla vertikalt */
  }	}
  .myImage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fyller hela skärmen snyggt */
  z-index: -1;       /* bakom text */
}


/* För mobil, verkstext/redbox*/
@media screen and (max-width: 768px) {
  .red-box {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 10px;
    right: 0px;
	bottom: 0px;
    padding: 10px;
    width: 50%;
    font-size: 22px;
    z-index: 1;
	background-color: #5FB0FF;
	  
	  
	  
	   }  }