@font-face {
  font-family: myFirstFont;
  src: url(AlteHaasGroteskRegular.ttf);
}

body {
  margin: 0%;
  padding: 0%;
  border: 0%;
  position: absolute;
  width: 100vw;
  box-sizing: border-box;
  height: 100vh;
  font-family: myfirstfont, sans-serif;
  -webkit-text-stroke: 0.4px rgba(245, 245, 245, 1);
  /* -webkit-text-fill-color: rgba(0,0,0,1); */
  -webkit-text-fill-color: rgba(0,0,0,1);
  /* -webkit-text-fill-color: rgba(0,0,255,1); */

  /* font-size: 22px; */
  background-color: rgba(245, 245, 245, 1);
  line-height: 135%;
}

#row{
  width: 100vw;
  position: absolute;
  top: 0;
  height: auto;
  left: 0;
  padding: 1vh;
  display:  block;
  box-sizing: border-box;
}

#width{
  height: auto;
  width: auto;
  display: inline-block;
  margin: 0;
  padding: 0;
  opacity: 0;
  -moz-force-broken-image-icon: 1;
  visibility: visible;
}

#firstClick{
  /* background-color: blue; */
}

#firstClick:hover{
  background-color: lightgrey;

}

p{
  /* font-family: raleway, sans-serif;
  color: black;
  line-height: 140%; */
  /* color: blue; */
  /* letter-spacing: -0.01em; */
  font-size: 20px;

}

img{
  z-index: 10;
  height: auto;
  width: auto;
  font-family: Times;
  display: inline-block;
  padding: 0;
  border-left-color: black;
  border-top-color: black;
  border-right-color: grey;
  border-bottom-color: grey;
  border-style: solid;
  border-width: 0px;
  margin: 0;
  /* background-color: rgba(226,234,247,1); */
  -moz-force-broken-image-icon: 1;
  cursor: pointer;
}

img:hover{
  /* border-color: yellow; */
  /* box-shadow: 1px 1px 0px 2px yellow; */
  background-color: lightgrey;
}

.txt{
  /* color: black; */
  display: inline-block;
  word-wrap: break-word;
  margin: 0;
  font-size: 20px;
  line-height: 135%;

  margin-top: -3px;
  padding: 0;
  border: 0;
  cursor: nwse-resize;
  vertical-align: 5px;
  -webkit-text-fill-color: rgba(0,0,0,1);
  -webkit-text-stroke: 0.4px rgba(245,245,245,1);
  /* -webkit-text-fill-color: rgba(255,255,255,1); */


}


@media only screen and (min-width: 700px) {
  .dotdotdot:hover{
  -webkit-text-fill-color: lightgrey;
  }
}

.descriptions{
  /* color: black; */
  display: none;
  cursor: w-resize;
}

#abouttext{
  margin: 0;
  display: none;
  max-width: 100%;
  font-size: 17px;
  /* white-space: normal; */
  line-height: 135%;
  cursor: w-resize;
  /* color: black; */
  /* -webkit-text-fill-color: rgba(91,173,65,1); */

}

#indextext{
  display: none;
}

.aboutbutton{
  display: inline;
}

.button {
  text-align: center;
  display: none;
  background-color: black;
  width: 1%;
  margin: 0;
  /* margin-left: 0.75em; */
  vertical-align: -1px;
  padding: 0;
  cursor: w-resize;
  margin-right: 3px;
  /* border: 1px solid black; */
  border-radius: 0px;
  width: 1.5vh;
  height: 1.5vh;
}

#closeabout {
  text-align: center;
  display: none;
  background-color: black;
  margin: 0;
  vertical-align: -1.2px;
  padding: 0;
  cursor: w-resize;
  border-radius: 0px;
  width: 1.5vh;
  height: 1.5vh;
}

#closeindex {
  text-align: center;
  display: none;
  background-color: black;
  margin: 0;
  vertical-align: -1.4px;
  padding: 0;
  cursor: w-resize;
  border-radius: 0px;
  width: 1.5vh;
  height: 1.5vh;
}

@media only screen and (min-width: 700px) {
  .button:hover{
    background-color: lightgrey;
  }
}

@media only screen and (min-width: 700px) {
  #closeabout:hover{
    background-color: lightgrey;
  }
}

@media only screen and (min-width: 700px) {
  #closeindex:hover{
    background-color: lightgrey;
  }
}


.aboutbutton:hover{
  -webkit-text-fill-color: lightgrey;
  }

#indexbutton:hover{

  -webkit-text-fill-color: lightgrey;
    }

.invi{visibility: hidden;}

.bold {
  /* border-bottom-style:solid;
  border-width: 1px; */
  background:rgba(245,245,245,1);
   box-shadow:
     0 -1.5px 0 rgba(245,245,245,1) inset,
     0 -2.5px 0 rgba(0,0,0,1) inset;
   width: 500px;
   height: 40px;
}

.bold:hover{
   box-shadow:
     0 -1.5px 0 rgba(245,245,245,0) inset,
     0 -2.5px 0 rgba(245,245,245,0) inset;
   width: 500px;
   height: 40px;
  }

.backemail{
 unicode-bidi: bidi-override;
 direction: rtl;
}

a{
  text-decoration: none;
  color: inherit;
}
#indexbutton{
  display: inline;
  /* color: black; */
  /* line-height: 130%; */
  -webkit-text-fill-color: rgba(0,0,0,1);

  font-size: 20px;
  /* letter-spacing: -0.01em; */
  /* vertical-align: -2px; */

}

.around{
  background-color: black;
}

.aroundabout{
  display: inline;
  /* color: black; */
  /* line-height: 130%; */
  font-size: 20px;
  /* letter-spacing: -0.01em; */
  /* vertical-align: -2px; */

}

.index{
  position: static;
  margin: 0;
  display: inline-block;
  color: black;
  -webkit-text-fill-color: rgba(0,0,0,1);

  /* -webkit-text-stroke: 1px blue;
	-webkit-text-fill-color: white; */
  font-size: 1rem;
  /* border: 1px solid #DDDDDD; */
  border-radius: 2px;
  padding-top: 0;
  padding-bottom: 0;
  cursor: pointer;
}

.alt{
  display: inline-block;
  /* -webkit-text-stroke: 0.25px rgba(194,213,241,1);
  -webkit-text-fill-color: rgba(0,0,0,1); */
  border-left-color: black;
  border-top-color: black;
  border-right-color: grey;
  border-bottom-color: grey;
  border-style: solid;
  border-width: 0.5px;
  padding: 2.5px;
  padding-bottom: 3px;
  position: static;
  /* box-sizing: border-box; */
  margin: 2px;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 14px;
  cursor: pointer;
  line-height: 100%;
  background-color: rgba(245, 245, 245, 1);

}

.about{
  display: inline-block;
  cursor: nwse-resize;
  /* position: fixed; */
  /* bottom: 0px;
  left: 0px; */
  margin: 0;
  max-width: 100%;
  /* border-top: 1px solid black; */
  /* box-sizing: border-box; */
  /* padding: 1vh; */
  /* -webkit-text-stroke: 0.3px rgba(245, 245, 245, 1); */
  /* -webkit-text-fill-color: rgba(0,0,0,1); */
  /* background-color: rgba(245,245,245,1); */
}

.videowrap{
  display: inline;
  padding: 0;
  border: 0;
  top: 0;
  margin: 0;
  -moz-force-broken-image-icon: 1;
  cursor: pointer;
}

.fake{
  display: inline-block;
}

.video{
  display: none;
  height: 50vh;
}

#firstLink{
  display: block;
}

.altLink{
  display: none;
  line-height: 80%;
  position:fixed;
  left: 50%;
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  cursor: grab;
  overflow-x: visible;
  /* white-space: nowrap; */
  top: 45%;
  margin-bottom: 100vh;
  text-align: center;
  white-space: nowrap;
  font-size: 33px;
  font-family: Times, serif;
  /* color: blue; */
  -webkit-text-stroke: 1.1px rgba(0,0,255,1);
  -webkit-text-fill-color: rgba(0,0,255,0);
  max-width: 95vw;
}

.altLink:hover{
  -webkit-text-fill-color: rgba(0,0,255,1);
  -webkit-text-stroke: 0px rgba(0,0,255,0);

}

.titleLink{
  display: none;
  line-height: 80%;
  position: fixed;
  left: 50%;
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  cursor: grab;
  top: 45%;
  margin-bottom: 100vh;
  text-align: center;
  font-size: 33px;
  font-family: Times, serif;
  color: blue;
  -webkit-text-stroke: 1.25px rgba(0,0,255,1);
  -webkit-text-fill-color: rgba(0,0,255,0);
  max-width: 95vw;

}

.italic{
  font-style: italic;
}

.stroke{
  /* border: 1px solid black; */
}

.projecttitle{
  text-decoration: underline;
}