body {
   /* Dark Theme Example */
      background-color: #121214; 
      /* Creates 1px dots using a radial gradient */
      background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
      /* Controls the distance between the grid dots (spacing) */
      background-size: 15px 15px;
  /* background-image: linear-gradient(
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; */
  font-family: "Aboreto", system-ui;
}

.aboreto-regular {
  font-family: "Aboreto", system-ui;
  font-weight: 400;
  font-style: normal;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.spacer {
  /* background-image: url("/assets/v10.jpg");
  object-fit: cover; */
  /* height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center; */
}

.main {
  position: relative;
  height: 300vh;
  /* background-color: purple; */
}

.container {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 2px dashed var(--color-surface50);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Start point */
.initial {
  left: 53%;
  top: 9%;
}

/* Down-the-page markers */
.second {
  left: 7%;
  top: 25%;
}

.third {
  right: 10%;
  top: 45%;
}

.fourth {
  left: 1%;
  top: 60%;
}

.fifth {
  left: 60%;
  top: 80%;
}

.sixth {
  left: 10%;
  top: 95%;
}

.marker {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.box {
  width: 95%;
  height: 95%;

  z-index: 10;

  background: transparent;

  overflow: visible;
}

.box model-viewer {
  width: 130%;
  height: 130%;
  background: transparent;
  pointer-events: none;
}

/* 
.s1Text{
  left: 2%;
  height: 5%;
  width:40%;
  right: 0;
  background-color: aqua;
}

.s2Text{
  top: 25%;
  left: 2%;
  height: 5%;
  width:40%;
  right: 0;
  background-color: green;
}


.s3Text{
  bottom: 2%;
  left: 2%;
  height: 5%;
  width:40%;
  right: 0;
  background-color: yellow;
} */


/* .service1{
top: 10%;
position: absolute;
left: 20%;
color: red;
} */

/* .service2{
position: absolute;
left: 40%;
color: green;
}

.service3 {
  top: 15%;
  left: 5%;
  position: absolute;
  color: yellow;
} */

.s1Text,
.s2Text,
.s3Text {
  position: absolute;
  /* left: 2%; */
  width: 45%;
  border: 5px solid transparent;
  box-shadow: 0 0 0 3px rgb(209, 209, 236), 
              inset 0 0 0 3px rgb(209, 209, 236);
  padding: 3%;
  color: white;
  /* border-radius: 10px; */
}

.s1Text {
  left: 7%;
  top: 5%;
  font-size: .75rem;
  /* background: aqua; */
}

.s2Text {
  left: 7%;
  top: 40%;
  font-size: .75rem;
  /* background: green; */
}

.s3Text {
  left: 7%;
  bottom: 9%;
  font-size: .75rem;
  /* background: yellow; */
}


.img1 video {
  position: absolute;
  top: 25%;
  right: 10%;
  width: 45%;
  height: 12%;
  object-fit: cover;
}



.img2 video {
  position: absolute;
  top: 56%;
  right: 10%;
  width: 50%;
  height: 15%;
  object-fit: cover;
}

.bookbutton {
  /* top: 900px;
  display: flex;
  justify-content: center;
  align-items: center; 
  */
  position: absolute;
  /* bottom: 5%; */
  right: 15%;
}

.spacer h1 {
  position: absolute;
  top: 5%;
  left: 20%;
  text-align: center;
  color: white;
  /* background-color: yellow; */
}

.bookbutton button {
  
    transition: all 0.5s;
  font-size: 17px;
  padding: 1ch 2ch;
  background-color: white;
  color: #000;
  cursor: pointer;
  border: solid 2px rgb(209, 209, 236);
  border-radius: 2px;
  box-shadow:
    2px 2px 0px hsl(0, 0%, 90%),
    4px 4px 0px hsl(0, 0%, 80%),
    6px 6px 0px hsl(0, 0%, 70%),
    8px 8px 0px hsl(0, 0%, 60%),
    10px 10px 0px hsl(0, 0%, 50%),
    12px 12px 0px hsl(0, 0%, 40%),
    14px 14px 0px hsl(0, 0%, 30%),
    16px 16px 0px hsl(0, 0%, 20%),
    18px 18px 0px hsl(0, 0%, 10%);
}

.bookbutton button:hover {
  background-color: hsl(0, 0%, 50%);
  color: #fff;
  box-shadow: none;
}
