html{
  scroll-behaviour: smooth;
}
body{
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: "VT323", monospace;
  margin: 0;
  padding: 0;
  
}
p, h1, h2, h3, h4, h5, h6 {
  margin-left: 10px;
  margin-right: 10px;
  
}

a{
  color: black;
}

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}


.container{
/* 	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
	gap: px; */
	width: 100vh;
	height: auto;
  margin: 0;
    
  position: relative;
    
}
#title{
  position: relative;
  top: 0;
  height: 100vh;
  overflow: hidden;
/*   background-image: url(https://theo.wainwrig.ht/indeximg/scan.jpg); */
/*   background-size: cover; */

}
#bgvideo {
  position: absolute;
  left: 0;
  top: 0;
/*   max-width: 100%; */
  max-height: 100vh;
  pointer-events: none;
}



p{
  
}

h1{
  font-size: 6rem;
  margin-top: 0;
  margin-bottom: 0;
  mix-blend-mode: difference;
  color: white;
  transform: translateZ(0);
}

h2{
  font-family: arial;
  font-size: 1.6rem;
  margin-top: -20px;
  margin-bottom: 0;
  margin-left: 20px;
  color: white;
  mix-blend-mode: difference;
  transform: translateZ(0);
}



.marquee {
/*   top: 6em; */
  height: 300px;
  position: relative;
  box-sizing: border-box;
  animation: marquee 10s linear infinite;

}

@keyframes marquee {
    0%   { top:   100vh }
    100% { top: -20vh }
}


.menubar{
  display: flex;
  width: 828px;
  direction: horizontal;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sectbutton{
  margin-left: 10px;
  border-radius: 0;
  border: 1px solid black;
  font-size: 1.6rem;
  background-color: white;
  transition-duration: 0.2s;
}
.sectbutton:hover{
  background-color: black;
  color: white;
  cursor: pointer;
}

#photo{
  height: 1900px;
  display: none;
}
#photo.visible{
  display: block;
}

#computer{
  height: 850px;
  display: none;

}
#computer.visible{
  display: block;
}

#cv{
  height: 50vh;
  display: none;

}
#cv.visible{
  display: block;
}

.contacts {
  display: none;
  font-family: arial;
  margin-left: 10px;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 0;
  border: 1px solid black;
  font-size: 1.6rem;
  background-color: white;
}

.contacts.visible {
  display: block;
}

#toast {
  font-family: arial;
  position: absolute;
  left: 675px;
  bottom: 0px;
  background: black;
  color: white;
  padding: 4px 8px;
  border-radius: 0px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#toast.show {
  opacity: 1;
}

.photogallery{
  position: absolute;
  width: 100px;
  height: auto;
}
.photogallery img{
  width: 100%;
  height: 100%;
}

#rada{
  top: 1907px;
  left: 39px;
  width: 306px;
  height: auto;
}
#special{
  top: 1992px;
  left: 331px;
  width: 250px;
  height: auto;
}
#matteo1{
  top: 2206px;
  left: 631px;
  width: 379px;
  height: auto;
}
#matteo2{
  top: 1411px;
  left: 207px;
  width: 298px;
  height: auto;
}
#celeste{
  top: 2148px;
  left: 65px;
  width: 241px;
  height: auto;
}
#mayvi1{
  top: 1224px;
  left: 523px;
  width: 340px;
  height: auto;
}
#mayvi2{
  top: 1149px;
  left: 752px;
  width: 169px;
  height: auto;
}
#penang1{
  top: 1960px;
  left: 733px;
  width: 330px;
  height: auto;
}
#penang2{
  /*top: 980px;*/
  left: -10px;
  width: 497px;
  height: auto;
}
#jada{
  top: 2195px;
  left: 283px;
  width: 309px;
  height: auto;
}
#noam{
  top: 1545px;
  left: 600px;
  width: 310px;
  height: auto;
}
#pointcloud{
  top: 0;
  left: 10px;
  width: 262px;
  height: auto;
}



.horiscroll{
  display: flex;
  overflow-x:  scroll;
  width: 700px;
  height: 275px;
  border: 1px solid black;
  margin-top: 10px;
  margin-left: 20px;
  padding-right: 10px;
}

.descrip{
  
  flex-shrink: 0;
  margin: 10px;
  height: 253px;
  width: 200px;
  margin-right: 0px;
  border: 1px solid black;
  padding-left: 2px;
}
.descripimg{
  flex-shrink: 0;
  margin: 10px;
  height: 254px;
  width: auto;
  margin-right: 0px;
  
}

.descripimg img{
  
    height: 100%;
  object-fit: contain;
}



.descripvid{
  margin: 10px;
  margin-right: 0px;
  height: 254px;

  
}


.footer{
  font-size: 10px;
  margin: 12px;
  margin-bottom: 10px;
  text-align: right;
  max-width: 1000px;
}