body{
	overflow:hidden;
	background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
	background-size: cover;
	height:100vh;
	margin:0;
}
.plakne{
perspective: 550px;
perspective-origin: 50% 50%;


}
.istaba{
	display:flex;
	flex-direction: row;
	transform-style: preserve-3d;
	pointer-events: none;

}

.siena_tuksums {
  position: absolute;
  width: 70vw;
  height: 100vh;
  background: linear-gradient(180deg,rgba(35, 0, 176, 1) 0%, rgba(0, 0, 0, 1) 100%);
  clip-path: polygon(
      0 0, 100% 0, 100% 100%, 0 100%,
      0 0, 
      35% 35%, 35% 70%, 60% 70%,
      60% 35%, 35% 35%
    );
  pointer-events:auto;
}
.izeja {
  position: absolute;
  width: 70vw;
  height: 100vh;
  background: black;
  transform: translate3d(60vw, 0px, -1000vw);
  pointer-events:auto;
}

.siena_kreisa{
	position:absolute;
	width: 100vw;
	height:100vh;
	transform: rotateY(90deg) translateX(-15vw);
	left: -50vw;
background: linear-gradient(180deg,rgba(101, 240, 221, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
.siena_laba{
	position:absolute;
	width: 200vw;
	height:100vh;
	transform: rotateY(90deg) translateX(-15vw) scaleX(12);
	pointer-events:auto;
background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
.siena_gaitenis{
	position:relative;
	width: 100vw;
	height:100vh;
	transform: rotateY(90deg) translateX(500vw) scaleX(10);
	left: 20vw;
background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
.logs{
background: linear-gradient(180deg,rgba(24, 50, 219, 0.51) 0%, rgba(0, 0, 0, 1) 100%);
	opacity: 0.8; position:absolute;
	left: calc(0.35 * 70vw);
	top: calc(0.35 * 100vh);
	width: calc(0.25 * 70vw);
	height: calc(0.35* 100vh);
	pointer-events:auto;
	cursor:pointer;
}
.logs:hover, .lapa:hover, #poga2:hover{
outline: 5px solid red; /* Set the outline width, style, and color */
  outline-offset: 10px; /* Create space between the box and the outline */
  box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.75); /* Create the glowing effect */

  }

.palodze{
	transform: rotateX(90deg);
	background-color: red;
	top: calc(0.675 * 100vh);
	left: calc(0.35 * 70vw);
	width: calc(0.25 * 70vw);
	height: 5vh;
	position:absolute;
}
.grida{
	position: absolute;
	width: 100vw;
	height: 300vh;
	transform: rotateX(90deg) translateY(-400vw) scaleY(15);
	bottom: -150vh;
background: linear-gradient(90deg,rgba(101, 240, 221, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.griesti{
	position: absolute;
	width: 100vw;
	height: 300vh;
	transform: rotateX(90deg) scaleY(15);
	bottom: -50vh;
background: linear-gradient(90deg,rgba(101, 240, 221, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
.martinsons{
	position:absolute;
	left: calc(0.35 * 70vw);
	top: calc(0.35 * 100vh);
	width: calc(0.25 * 70vw);
	height: calc(0.35 * 100vh);
	z-index: -1;
	background-image: url('/atteli/martinsons.png');
       	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat; 
	pointer-events: none;
}
.lapa{
	position:absolute;
	width:5vw;
	height:13vh;
	background-color:lightgrey;
	left:45vw;
	top: 30vh;
	pointer-events:auto;
	cursor:pointer;
}
.raksts{
	position:absolute;
	width:30vw;
	height:13vh;
	background-color:transparent;
	left:24vw;
	top: 20vh;
	background: linear-gradient(180deg, #ff0000 40%, #ffffff 100%);
	font-size: 3em;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}

.tekstakaste{
	position: fixed;
	width: 80vw;
	height: 10vh;
	background: linear-gradient(181deg,rgba(255, 0, 0, 1) 0%, rgba(64, 56, 56, 1) 100%);
	bottom: 0px;
	right:0px;
	border: 10px ridge darkgrey;
	font-size: 1.5em;
	font-weight:bold;
	color: white;
	padding: 15px;
	    text-align: justify;
    line-height: 1.5;
    letter-spacing: 2px;
    word-spacing: 2px;
        text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5); /* Add text shadow */
 }
.apaksdala{
	display:flex;
	flex-direction: column;
	position: fixed;
	width:100%;
	height:12vh;
	margin: 0.5vw;

}	
.majas{
	
	width: 14vw;
	height:10vh;
	position: fixed;
	border: 10px ridge darkgrey;
	bottom: 10px;
	background: linear-gradient(180deg,rgba(42, 155, 63, 1) 0%, rgba(38, 224, 13, 1) 100%);
	padding:5px;
	font-weight: bold;
	  display: flex;
  justify-content: center;
  align-items: center;
  color:black;
  text-decoration:none;

}
.majas a{
	color:black;
	text-decoration:none;

}
#poga2{
	position:relative;
	height: 10vh;
	width: 125vw;
	background-color: green;
	top: 64vh;
	left: 101vw;
	cursor:pointer;

}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: red; }
}