.kuva-tausta {
  background:
    linear-gradient(
      to bottom,
      #f5f4f0 0%,
      #f5f4f0 60%,
      #FBFBFA 60%,
      #FBFBFA 100%
    );
}




body {
  margin: 0;
  padding: 0;
}

.parallax-text {
  position: relative;
  will-change: transform; /* parantaa suorituskykyä scrollatessa */
}


const parallaxText = document.querySelector('.parallax-text');



div.scroll-container {
  background-color: #FBFBFA;
  overflow: auto;
  white-space: nowrap;
  padding: 0px;
}

div.scroll-container-works {
  background-color: #f5f4f0;
  overflow: auto;
  white-space: nowrap;
  padding: 0px;
}

div.scroll-container img {
  padding: 20px;
}

div.scroll-container-mobile {
  background-color: #FBFBFA;
  overflow: auto;
  white-space: nowrap;
  padding: 20px;
}

div.scroll-container img {
  padding: 0px;
}


}
@font-face {

font-family: 'Source Serif Pro', serif;
font-family: 'DM Sans', sans-serif;
}


.rotated {
        writing-mode: tb-rl;
        transform: rotate(-180deg);
    }











.gradient-text {

  background-color: red;
  

  background-image: linear-gradient(45deg, #09203f, #537895);
  
/
  background-size: 100%;
  background-repeat: repeat;


  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}





header {
  margin-top: 1em;
  margin-top: calc(50vh - 3em);
}

h1 {
 
}
















body, html {
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#wrapper {
width:100%;
height:100%;
display:inline-block;
}

#side_bar {

top:0;
left:0;
width:300px;
height:100%;
position:fixed;
border-right:#000 solid 1px;
background-color:#333;
}

#content {
	
top:0;
	left:0;
	min-height:100%;
	width:100%;
	position:relative;
}

#scroll {
	height:100%;
	
right:0px;
	left:0px; 
	display:inline-block;
	position:absolute;
	overflow-x:scroll;
	overflow-y:hidden;
	white-space:nowrap;
}


.fillheight {
    width: auto;
  height: 100%;
  object-fit: fill;

}






/* Container holding the image and the text */
.container {
  position: relative;
}

/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 0px;
  left: 20px;
  color: white;
  padding-left: 20px;
  padding-right: 10%;
}