@import "_reset.css";

html {
  scroll-behavior: smooth;
  cursor: url("../assets/cursor.cur ") 2 2, auto!important;
  
}

/* .swiper {
  width: 100%;
  height: 100vh;
  opacity: 1;
  padding: 0.5em;
}

.swiper-slide {
  position: relative;
  text-align: center;
  width: auto;
  height: 100%;
} */

img {
  display: block;
  width: 100%;
  height: auto;
}


p {
    writing-mode: vertical-lr;
    text-orientation: sideways-right;
}

body {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-weight: 600;
    z-index: 2;
    
}


body.home {
  display: flex;
}


a {
    color: black;
    text-decoration: none;
    text-transform: lowercase;
}

a:hover {
    color:lime;
    font-style: italic;
}

.width-23 {
  width: 65em;
}

.width-20 {
  width: 50em;
}

.width-15 {
  width: 30em;
}

.width-13 {
  width: 13em;
}

main.home {
  padding: 1em;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;  
}

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

a.rotated {
  transform: rotate(-90deg);
} 

iframe.workiframe {
  width: 100%;
  height: 100vh;
}

/* IMG layer  */

/* .image-container1 {
  position: absolute;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
} */

/* WORK PAGE  */



.back {
  font-size: 3em;
  position: fixed;
  bottom: 0.5em;
  left: 0;
}

/* .dark-mode {
  background-color: black;
  color: white;
} */


/* #blackmode {
  font-size: 2em;
  position: fixed;
  bottom: 0.5em;
  
  width: 88vw;
  text-decoration:underline;
} */

.work {
  text-transform: lowercase;
  text-align:start;
  display: inline-block;
  width: 98vw;
  height: 100vh;
  position:absolute;
  bottom: 0;
  left: 0;
  padding-left: calc(100vw - 1em);
   }
  

.infos-outer {
  width: 100vh;
  transform: translateX(-100%);
  position: fixed;
}

.infos {
  width: 99.7vh;
  /* background-color: lime; */
  display: flex;
  justify-content: space-between;
  transform: rotate(-90deg);
  /* position: absolute; */
  top: 0;
  transform-origin: top right;
  padding-left: 1em;
  
}


.title {
  width: 5%;
}

.text {
  width: 25%;
}

.number1 {
  width: 38.5%;
}

.number2 {
  width: 5%;
}

.projects {
  display: flex;
  margin-left: 3em;
}

.project-outer {
  display: flex;
}

.project {
  position: relative;
  width: 1em;
  bottom:1em
}

.project-infos {
  font-weight: 600;
  /* font-size: 0.7em; */
  display: flex;
  justify-content: space-between;
  width: 100vh;
  transform-origin: top right;
  transform: rotate(-90deg) translateY(-100vh);
}


.img-container {
  display: flex;
  height: 50em;
  gap: .1em;;
  
}

.img-container img {
  position: relative;
}

.description {
  /* height:1em; */
  height: fit-content;
  /* right:0.2em; */
  writing-mode: vertical-lr;
  text-orientation: mixed;
  top: 1em;
  left: .1em;
  position: relative;
  /* background-color: rebeccapurple; */
  transform: rotate(180deg);
  transform-origin:  center center;
  
  /* width: 100vh;
  height:1em; */
  /* padding-right: 1em; */
  /* transform: rotate(-90deg); */
  /* float:left; */
  /* display: flex; */
  /* justify-content: space-between; */
  /* position: absolute; */
  /* transform-origin: top right; */
  /* padding-left: 75%; */

  
} 


/* #editorial {
  gap: 10px;
} */

/* .blackmode:hover{
  background-color: black;
  color: white;
} */

img::after {
  content: attr(alt);
}

/* Container image and text */
/* .flex-container {
  position:relative;
  display: flex;
  flex-direction: column;
  }
.text-child image {
  flex: 0 1 auto;
}

.flex-child infos {
  text-align: start;

} */ 



/* ABOUT PAGE  */

 /* .text-container {
  text-align:start;
  display: inline-block;
  width: 98vw;
  height: 100vh;
  position:absolute;
  bottom: 0;
 } */

 .abouttext {
  position:absolute;
  bottom: 3em;
  left: 4em;
  right: 4em;
  z-index: 1;
 }
.impressum {
  position:absolute;
  left:6em;
  bottom: 37em;
}
 
.text-container {
  background-color: darkmagenta;
  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 1;
}

/* ABOUT PAGE>move  */

span {
  width: 100vw;
  height: 100vh;
} 

/* LANDING PAGE  */

/* .background-container {
  position: absolute;
  left: 5em;
  bottom: 10em;
  z-index: 1;
  opacity:0.1;
}

.background-container:hover {
  opacity: 1;
  transition: opacity 1s;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in;
}  */


  
.text-container2 span {
  transition: all .2s ease-out;
}