* {
   margin: 0;
   padding: 0;
}


body {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  cursor: cell;
  }

  /* roboto-mono-regular - latin */
  @font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-mono-v7-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto Mono'), local('RobotoMono-Regular'),
         url('../fonts/roboto-mono-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/roboto-mono-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/roboto-mono-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/roboto-mono-v7-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
  }


  p a:-webkit-any-link #links-texts {
    text-decoration: underline;
  }

:any-link { color: #000; text-decoration: none }
:-moz-any-link { color: #000; text-decoration: none }
:-webkit-any-link { color: #000; text-decoration: none }


/*---Slidebar---*/
section {
  position: fixed;
  top: 50%;
  overflow: hidden;
}

section .scroll {
  width: 100%;
  display: flex;
}
/*----Animation for all texts----*/
section .scroll div {
  color: #00f;
  background-color: #fff;
  white-space: nowrap;
}


#blankspace0 {
  padding-left: 80px;
  background-color: transparent;
}

#blankspace {
  padding-left: 200px;
  background-color: transparent;
}

#blankspace2 {
  padding-left: 800px;
  background-color: transparent;
}

@keyframes itsmoving {
  0% {
    transform: translateX(100vw);
    -moz-transform:translateX(100vw);
    -webkit-transform:translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
    -moz-transform:translateX(-100%);
    -webkit-transform:translateX(-100%);
  }
}

/*----Animation for Individuals----*/
section .scroll.text1 {
  animation: itsmoving 110s linear infinite;
  -moz-animation: itsmoving 110s linear infinite;
  -webkit-animation: itsmoving 110s linear infinite;
}

section .scroll.text2 {
  animation: itsmoving 110s linear infinite;
  -moz-animation: itsmoving 110s linear infinite;
  -webkit-animation: itsmoving 110s linear infinite;
}

section .scroll.text3 {
  animation: itsmoving 110s linear infinite;
  -moz-animation: itsmoving 110s linear infinite;
  -webkit-animation: itsmoving 110s linear infinite;
}

section .scroll.text4 {
  animation: itsmoving 110s linear infinite;
  -moz-animation: itsmoving 110s linear infinite;
  -webkit-animation: itsmoving 110s linear infinite;
}

section .scroll:hover {
  animation-play-state: paused;
  -moz-amimation-play-state: paused;
  -webkit-amimation-play-state: paused;
}

/*-----Images------*/
#img1 {display:block;}
#img2 {display:none}

.main-image img{
  display: block;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

.work1-image {
  background: url('../imgs/work1.jpg');
  display: block;
  background-size: cover;
  width: 100vw;

}
/*
.work1-image.active {
  background: url('../imgs/couture1.jpg');
  display: block;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}*/

.work2-image {
  background: url('../imgs/work2_new.jpg');
  display: block;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.work3-image {
  background: url('../imgs/work3.jpg');
  display: block;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.work4-image {
  background: url('../imgs/work4.jpg');
  display: block;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.couture1-image {
  background: url('../imgs/couture1.jpg');
  display: block;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.about1-image {
  background: url('../imgs/main2.jpg');
  display: block;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}



/*--------------*/
.link-portfolio {
  color: #fff;
  background-color: #00f;
}

.work1-text span {
  color: #00f;
  background-color: #fff;
  white-space: nowrap;
}
.work1-text {
  padding-left: 8%;
  padding-right: 40%;
  margin: auto;
  padding-top: 5%;
  width: auto;
}
.couture1-text {
  padding-left: 8%;
  padding-right: 50%;
  margin: auto;
  padding-top: 22%;
}
.commissions1-text {
  padding-left: 8%;
  padding-right: 30%;
  margin: auto;
  margin-top: 10%;
  position: fixed;
}

.about1-text {
  padding-left: 8%;
  padding-right: 8%;
  margin: auto;
  padding-top: 19%;
}



/*---Navigation Bar---*/
.topleft-nav-bar {
  text-align: left;
  position: fixed;
  left: 0px;
  background-color: #fff;
  line-height: 25px;
  color: #000;
}
/*---
im html:
<p class='topleft-nav-bar-zwei'>
  <a  href="index.html">//work </a>
</p>

im css:
.topleft-nav-bar-zwei {
  left: 0px;
  background-color: #fff;
  line-height: 25px;
  color: #000;
  transform: rotate(270deg);
  position: fixed;
}---*/

.topright-nav-bar {
  text-align: right;
  position: fixed;
  right: 0px;
  background-color: #fff;
  line-height: 25px;
  color: #000;
}

.bottomleft-nav-bar {
  text-align: left;
  position: fixed;
  left: 0px;
  bottom: 0%;
  background-color: #fff;
  line-height: 25px;
  color: #000;
  /*transform: rotate(-180deg);*/
}

.bottomright-nav-bar {
  text-align: right;
  position: fixed;
  right: 0px;
  bottom: 0%;
  background-color: #fff;
  line-height: 25px;
  color: #000;
  /*transform: rotate(-180deg);*/
}

.active-nav-bar {
  color: #00f;
}

/*---------mix-blend-mode: exclusion;screen;?-----------*/
/* On screens that are 380px or less (MOBILE) */
@media screen and (max-width: 380px) {
  #img1 {display: none;}
  #img2 {display: block;}


  .work1-text{
    padding-left: 6%;
    padding-right: 20%;
    margin: auto;
    padding-top: 15%;
  }

  .work1-text span{

    width: 50%;
  }

  .commissions1-text {
    padding-left: 6%;
    padding-right: 6%;
    margin: auto;
    margin-top: 26%;
  }

  .couture1-text {
    padding-left: 6%;
    padding-right: 20%;
    margin: auto;
    padding-top: 52%;
  }

  .about1-image {
    width: 100vw;
  }

  .work1-image {
background: url('../imgs/work1-mobile.jpg');
    display: block;

    width: 100vw;

  }
  .work2-image {
    background: url('../imgs/work2-mobile.jpg');
    display: block;
    background-size: cover;
    width: 100vw;
    height: 100vh;
  }
  .work3-image {
    background: url('../imgs/work3-mobile.jpg');
    display: block;
    background-size: cover;
    width: 100vw;
    height: 100vh;
  }
  .work4-image {
    background: url('../imgs/work4-mobile.jpg');
    display: block;
    background-size: cover;
    width: 100vw;
    height: 100vh;
  }

  .couture1-image {
    background: url('../imgs/couture1-mobile.jpg');
    display: block;
    background-size: cover;
    width: 100vw;
    height: 100vh;
  }


  /*----Animation for Individuals slower on mobile----*/
  section .scroll.text1 {
    animation: itsmoving 200s linear infinite;
    -moz-animation: itsmoving 200s linear infinite;
    -webkit-animation: itsmoving 200s linear infinite;
  }

  section .scroll.text2 {
    animation: itsmoving 200s linear infinite;
    -moz-animation: itsmoving 200s linear infinite;
    -webkit-animation: itsmoving 200s linear infinite;
  }

  section .scroll.text3 {
    animation: itsmoving 200s linear infinite;
    -moz-animation: itsmoving 200s linear infinite;
    -webkit-animation: itsmoving 200s linear infinite;
  }

  section .scroll.text4 {
    animation: itsmoving 200s linear infinite;
    -moz-animation: itsmoving 200s linear infinite;
    -webkit-animation: itsmoving 200s linear infinite;
  }

  section .scroll:hover {
    animation-play-state: paused;
    -moz-amimation-play-state: paused;
    -webkit-amimation-play-state: paused;
  }
}