body{
  margin: 0px;
  width:100vw;
  height:100vh;
  overflow: hidden;
  background-color: rgb(216, 232, 240);
}
#phonescreen{
  display: none;
}
#room{
  position: relative;
  height: 100vh;
  width: 100vw;
  perspective: 91vh;
  background-color: rgb(236, 10, 85);
  transition-duration: 2s;
  overflow: hidden;
  /*transform: scale(5);
  transform-origin: 53% 41% 0px;*/
  
}
#frontwall{
  position: relative;
  height: 80vh;
  width: 80vw;
  margin: auto;
  background: radial-gradient(circle, rgb(251, 63, 151) 0%, rgb(252, 70, 125) 100%);
  box-shadow: inset 0 -10px 40px rgb(216, 58, 105);
}
#floor{
  position: relative;
  top:-11vh;
  height: 200vh;
  width: 147vw;
  left:-23.5vw;
  background-image: url('../assests/tagtile.png');
  background-size: 20vw 20vh;
  transform-style: preserve-3d;
  transform:rotateX(50deg);
  box-shadow: inset 0 0 50px rgb(158, 156, 156);
}

/* Book Rack Design */
#bookrack{
  position: absolute;
  right:2.4vw;
  bottom: 0.8vh;
  height:72vh;
  width: 24vw;
  box-shadow: 0 0px 10px 5px rgb(184, 94, 18);
  background-image: url('../assests/bookrack.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.k1{
  position: absolute;
  height: 10.08vh;
  width: 3.36vw;
  right: 1.68vw;
  top: 5.76vh;
  background-image: url('../assests/kak1.png');
  background-size: 100% 100%;
}
.k2{
  position: absolute;
  height: 12.96vh;
  width: 3.36vw;
  left: 1.68vw;
  bottom: 23.36vh;
  background-image: url('../assests/kak2.png');
  background-size: 100% 100%;
}
#rubiccube{
  position: absolute;
  height: 7vh;
  width: 3vw;
  right: 3vw;
  bottom: 23vh;
  background-image: url('../assests/cube.png');
  background-size: 100% 100%;
}

#window{
  position: absolute;
  right:32vw;
  top: 8vh;
  height:40vh;
  width: 24vw;
  box-shadow: 0 0px 10px 5px rgb(184, 94, 18);
}
#windowframe,#windowview{
  position: absolute;
  right:0vw;
  top: 0vh;
  height:40vh;
  width: 24vw;
  overflow: hidden;
}
#windowview{
  background-color: rgb(216, 232, 240);
  background-image: url("../assests/mountains.png");
  background-size: cover;
}
#windowframe{
  background-image: url('../assests/window.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#achievement{
  height:40vh;
  width: 20vw;
  position: absolute;
  top:8vh;
  left:2vw;
  cursor: pointer;
}
.frame{
  position: absolute;
  top: 0vh;
  left:0vw;
  height:15vh;
  width:5.5vw;
  background-color: white;
  background-image: url("../assests/frame.png");
  background-size: 100% 100%;
}
.frame img{
  height:13.2vh;
  width:4.7vw;
  padding: 0.9vh 0.4vw;
}

#table{
  position: absolute;
  height: 40vh;
  width: 40vw;
  left:25vw;
  bottom:10vh;
  background-image: url('../assests/table2.png');
  background-size: 40vw 40vh;
  perspective: 100px;
}
#chair{
  height: 55vh;
  width: 20vw;
  background-image: url("../assests/chair3.png");
  background-size: 100% 100%;
  position: absolute;
  top:47vh;
  left:30vw;
}
#football{
  height:100px;
  width:100px;
  position: absolute;
  bottom:8vh;
  right:8vw;
  background-image: url("../assests/f1.png");
  background-size: 100% 100%;
  animation: rotateF,moveF infinite;
  animation-direction: alternate;
  animation-duration: 4s;
  animation-play-state: paused;
  cursor: pointer;
}
@keyframes rotateF{
  0% {
    transform: rotateZ(0deg);
  }
  50%{
    transform: rotateZ(-360deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@keyframes moveF{
  0% {
    transform: translateX(0vw) rotateZ(0deg);
  }
  50%{
    transform: translateX(-20vw) rotateZ(-360deg);
  }
  100% {
    transform: translateX(0vw) rotateZ(0deg);
  }
}
#football:hover{
  animation-play-state: running;
}

#resume{
  position: absolute;
  height: 5vh;
  width: 2.5vw;
  left:15vw;
  top:0vh;
  border: 2px solid red;
  transform-style: preserve-3d;
  transform: rotateX(15deg);
}

#lamp{
  position: absolute;
  height: 20vh;
  width: 6vw;
  left:6vw;
  top:-16vh;
  background-image: url('../assests/lamp1.png');
  background-size: 100% 100%;
}
#desktop{
  position: absolute;
  height: 20vh;
  width: 12vw;
  right:6vw;
  top:-16vh;
  background-image: url('../assests/desktop.png');
  background-size: 100% 100%;
}
#desktopscr{
  display: flex;
  position: absolute;
  height: 12.8vh;
  width: 10.68vw;
  right:0.96vw;
  top:0.6vh;
  background-color: black;
  background-size: 100% 100%;
  justify-content: center;
  align-items: center;
}


/* book design */
.bookrow{
  position: absolute;
  top:3vh;
  left: 1.44vw;
  width:16.8vw;
  height:12.24vh;
}
.br2{
  top:19vh;
}
.scene{
  height: 11.628vh;
  width: 1.68vw;
  perspective: 30.333vh;
  margin-top: 0.489vh;
  transition-duration: 0.5s;
}

.books{
  height: 11.628vh;
  width: 3.36vw;
  font-size: 10px;
  transform-style: preserve-3d;
  transform: rotateY(90deg);
  transition-duration: 0.5s;
  cursor: pointer;
}
.bookface{
  position: absolute;
  height: 11.628vh;
  width: 3.36vw;
  opacity: 1;
}
.frontcover{
  transform: translateZ(2.3vh);
  background-image: url("./../assests/front-cover.png");
  background-color: white;
  background-size: 100% 100%;
  transform-origin: 0% 0% 0px;
  transition-duration: 2s;
  color: white;
  opacity: 1;
}
.backcover{
  transform: rotateY(180deg) translateZ(0.8vh);
  background-image: url("./../assests/back-cover.png");
  background-size: 100% 100%;
}
.leftside{
  transform: rotateY(-90deg) translate3d(0.7vh,0,0.77vw);
  background-color: rgb(80, 83, 81);
  width: 1.512vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("./../assests/left-cover.png");
  background-size: 100% 100%;
  opacity: 1;
}
.rightside{
  transform: rotateY(90deg) translate3d(-0.7vh,0,2.5vw);
  width: 1.478vw;
  height: 11.395vh;
  background-color: rgb(255, 255, 255);
}
.topside{
  transform: rotateX(90deg) translate3d(0vw,0.8vh,1.3vh);
  background-color: rgb(253, 253, 255);
  height: 2.674vh;
  width: 3.225vw;
}
.bottomside{
  transform: rotateX(-90deg) translate3d(0vw,-0.8vh,10.1vh);
  background-color: rgb(255, 255, 255);
  height: 2.686vh;
  width: 3.225vw;
}
.b1{
  z-index:10;
  position: absolute;
  left: -10%;
}
.b2{
  z-index: 9;
  position: absolute;
  left: 1%;
}
.b3{
  z-index: 8;
  position: absolute;
  left: 12%;
}
.books .book-title{
  white-space: nowrap;
  transform: rotateZ(90deg);
  color: rgb(204, 175, 8);
  font-weight: bold;
  font-size: 0.4rem;
}
.hoverbook:hover{
  transform: rotateY(90deg) rotateZ(-30deg) translateX(-1.5rem);
  /*transform: rotateY(360deg);*/
}

.setZIndex{
  z-index: 100;
  left:70%;
}
.br2 .setZIndex{
  top:-130%;
}

.selectbook{
  transform: rotateY(0deg) translate3d(0vw,1.5vw,15vh);
}


.page{
  z-index:90;
  transform: translateZ(2.2vh);
  transform-origin:0% 0% 0px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0.5vw 0vh 1vw -0.1vw rgb(104, 101, 101) inset;
  transition-duration: 1s;
}
.lastpg{
  z-index:60;
}
.turnleft{
  transform : rotateY(-179deg) translateZ(-2.2vh);
}
.turnpageleft{
  transform : rotateY(-179deg) translateZ(-2.3vh);
}

/* Design Page Content*/
.pgcontent{
  height: 100%;
  width: 100%;
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.5s;
  font-size: 0.3vh;
  text-align: center;
  margin-top: 20%;
}
.pgcontent img{
  height:10%;
  border-radius:0%;
  width:15%;
  margin:5% 0%;
}
.pgcontent span{
  font-size: 0.4vh;
  font-weight: bold;
}
.pgcontent p{
  text-align: justify;
  padding:3% 3%;
}

/*Design Desktop */
#loginscr,#osdesktop{
  height: 100%;
  width: 100%;
  position: inherit;
}
#loginscr{
  display: block;
}
.wallpaper{
  height: 100%;
  width: 100%;
  position: absolute;
  background-image: url("../assests/wallpaper1.png");
  background-size: 100% 100%;
  filter: blur(0.3vh);
}
#logins{
  height: 100%;
  width: 100%;
  position: absolute;
  font-size: 0.5vh;
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#logins img{
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 0.1vh solid rgb(255, 255, 255);
}
#logins input{
  height:5%;
  width: 30%;
  margin-top: 1%;
  border: none;
  outline: none;
  font-size: 0.4vh;
  text-align: center;
}
#logins i{
  margin-top: 2%;
  font-size: 0.8vh;
  border-radius: 50%;
  color: rgb(161, 157, 157);
  cursor: pointer;
}
#logins i:hover{
  color: white;
}

#osdesktop{
  display: none;
  justify-content: center;
  align-items: center;
}
#osdesktop .wallpaper{
  filter: blur(0px);
}
#menubar,#taskbar,#messagetext{
  width:100%;
  height:10%;
  position: absolute;
  bottom:0%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1vh;
  background-color: rgba(164, 167, 172, 0.5);
}
#taskbar{
  width:auto;
  border-radius: 0.2vw;
  padding: 0.1vh 0.3vw;
}
#taskbar i{
  margin: 0 0.05vw;
  transition-duration: 0.2s;
  cursor: pointer;
  color: rgb(216, 227, 229);
}
#menubar{
  bottom: 97%;
  height:3%;
  background-color: rgb(216, 227, 229);
  background-image: url("../assests/osdesk.png");
  background-size: 100% 100%;
}

#taskbar i:hover{
  margin-top:-1vh;
  text-shadow: 0vh 0.1vh white;
}

#messagetext{
  height:60%;
  bottom:20%;
  width: 60%;
  display: none;
  margin: 0 0;
  justify-content: start;
  flex-direction: column;
  font-size: 0.7vh;
  text-align: center;
  background-color: rgba(215, 226, 228,0.6);
}
#messagetext i{
  margin-top: 10%;
  line-height: 1vh;
}
#messagetext i a{
  text-decoration: none;
  color: black;
}
#topbar{
  height:5%;
  background-color: rgba(212, 226, 244, 0.5);
  width: 100%;
  display: flex;
  justify-content: end;
  font-size: 0.3vh;
}
#topbar .tbtn{
  height:100%;
  width:0.3vw;
}
#topbar i{
  margin-top: 0%;
  line-height: 0.5vh;
}

/* Design Rubic Cube */
.rubic {
  position: absolute;
  bottom: 24vh;
  right:3vw;
  width: 30px;
  height: 30px;
  perspective: 300px;
  }

  .cube {
  width: 30px;
  height: 30px;
  position: absolute;
  transform-style: preserve-3d;
  transition-duration: 3s;
  transform: rotateY(30deg);
  cursor: pointer;
  }

  .cubeface {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid black;
  }
  .frontface  { transform: rotateY(  0deg) translateZ(15px); background-color: red;}
  .rightface  { transform: rotateY( 90deg) translateZ(15px); background-color: blue;}
  .backface   { transform: rotateY(180deg) translateZ(15px); background-color: green;}
  .leftface   { transform: rotateY(-90deg) translateZ(15px); background-color: yellow;}
  .topface    { transform: rotateX( 90deg) translateZ(15px); background-color: white;}
  .bottomface { transform: rotateX(-90deg) translateZ(15px); background-color: orange;}

  .cube:hover{
      transform: rotateY(360deg) translateY(-5vh);
  }
  .hline{
      position: absolute;
      height:2px;
      width:100%;
      background-color: black;
  }
  .vline{
      position: absolute;
      height:100%;
      width:2px;
      background-color: black;
  }

  /* Animating Widndow */
  .cloud{
    position: absolute;
    height:10vh;
    width: 10vw;
    top:10vh;
    left:-10vw;
    background-image: url("../assests/cloud1.png");
    background-size: 100% 100%;
    animation:cloudmove 20s linear infinite;
    animation-direction: alternate;
  }
  .c1{
    height:10vh;
    width: 10vw;
    top:10vh;
  }
  .c2{
    height:10vh;
    width: 10vw;
    top:10vh;
  }
  .c3{
    height:10vh;
    width: 10vw;
    top:10vh;
  }

  @keyframes cloudmove{
    0%{
      left:-10vw;
    }
    100%{
      left:24vw;
    }
  }
  .bird{
    position: absolute;
    height:10vh;
    width: 10vw;
    left:-10vh;
    top:10vh;
    background-size: 100% 100%;
    transition-duration: 0s;
  }
  #bluebird{
    background-image: url("../assests/flying-bird-blue.gif");
  }
  #redbird{
    background-image: url("../assests/flying-bird.gif");
  }
  #yellowbird{
    background-image: url("../assests/yellow-bird.gif");
  }

  .dirright{
    left:24vw;
    transition-duration: 10s;
  }

  /* page tour */
  #tour{
    position: absolute;
    background-image: radial-gradient(rgb(83, 61, 61),black,black);
    opacity: 0;
    bottom:2vh;
    left:38vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 3vh;
    color: rgb(255, 255, 255);
    font-weight: bold;
    animation: fadeOut 5s linear;
    padding: 1vh 1vw;
  }
  #tour span{
    font-size: 2.5vh;
  }

  @keyframes fadeOut{
    0%{opacity: 0;}
    25%{opacity: 0.8;}
    75%{opacity: 0.8;}
    100%{opacity: 0;}
  }