/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
html {
  cursor: url("mouse.png"), auto;
}


body {
  background-color: white;
  color: black;
  font-family: Verdana;
}


/* custom cursor for hovers (on a and button elements) */
a:hover, 
button:hover,
map:hover{
  cursor: url("mouseTwo.png"), auto;
}

#area2,
#area3,
#area1{
  display: block;
  cursor: url('mouseTwo.png'), auto;
}

  #bookBase {
  position: absolute;
  height: 75px;
  width: auto;
  margin-left:40%;
  margin-right:40%;
  bottom: 0
  }

.press {
  display: block;
  cursor: url('mouseTwo.png'), auto;
}

/* popup*/

.popup {
  position: relative;
  display: inline-block;
}

.popup .popuptext {
  visibility: hidden;
  width:160px;
  background-color: #555;
  color:#fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.hide {
  display: none;
  position: absolute;
  left:25%;
  bottom: 3%;
  width: 300px;
}

.popup:hover + .hide {
  display: block;
  color: black;
  text-align:center;
}
  
body {
  cursor:url('mouse.png'), auto;
}
.container {
  height: 75vh;
  width: 60vw;
  background-color: #ffffff;
  margin: 50px auto;
  position: relative;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  border-radius: 0;
  cursor: none;
}

.circle {
    position: relative;
    top: calc(15%);
    left: calc(30%);
    width: 15rem;
    height: 15rem;
    background: center center no-repeat fixed;
    background-size: cover;
    border-radius: 50%;
    z-index: 2;
}

.circle::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle);
    border-radius: 50%;
}

.textTest {
  display:inline-block;
  position: absolute;
  z-index:-1;
  left: 31%;
  top:42%;
  background-color:rgba(60, 223, 255, 0.2);
  color:black;
  width:17%;
  height:30%;
  transform:skewy(-13deg) rotate(-3deg);
  padding-left:2%;
  padding-right:2%;
  padding-top:1.5%;
  filter: saturate(100%);
  overflow: auto;
}

.tv {
  z-index:99999;
  position:relative;
  left:0%;
  bottom: 50%;
  width:60%;
  height:auto;
}

.cassettes {
  position: relative;
  margin-left:5vw;
  margin-right:80vw;
  margin-top:4vh;
  display: grid;
  }
  
  .cassettes img {
    height:28vh;
    width: auto;
  }
  .linkC {
    display: block;
    text-align: center;
  }
  
.underLaptop {
  position: absolute;
}

.choice {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 15vh;
} 
 .choice img {
   width: 35vw;
   height: auto;
   padding-left: 1vw;
   padding-right: 1vw;
  }
  
  .laptop {
    position: relative;
    z-index: 1;
  }
  .laptop img {
    width: 25vw;
    height: auto;
  }
  
  .laptopText {
    position: absolute;
    z-index: -1;
    top: 5vh;
  }
  .underLaptop {
    position: absolute;
    text-align: center;
  }
  .phone {
    position:relative;
    z-index: 1;
  }
  
  .phone img {
    width: 25vw;
    height: auto;
  }
  .phoneText {
    position: absolute;
    top: 3.75vh;
    left: 17.755vw;
    transform: rotate(5.5deg);
  }
  .underPhone {
    position: absolute;
    text-align: justify;

  }
 .linkA {
   display: grid;
   text-align: center;
   position: relative;
   top: 10vh;
   left:-6.5vw;
 }
 
 .containerA {
   position: relative;
   width: 50vw;
   height: auto;
   top: 25vh;
   left: 23vw;
 }
 
 .infoText {
   text-align: center;
 }
 
 .bookShelf {
    position: absolute;
    top: 6vh;
    left:24vw;
  
   }
.homeText {
  position: relative;
  text-align: center;
  top: 85vh;
}

.phoneNav {
  position: absolute;
  left: 6vw;
}

/*

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #ccc;
}


.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
 

.NavBox {
  position: relative;
  left: -2vw;
  top: -2vh;
  width:105%;
  height:10vh;
  background-color:#FFC5D3;
}

.NavImg {
  position: absolute;
  left: 2vw;
  top:1vh;
  height: 8vh;
  width: auto;
} 

.phoneOuter{
  position: relative;
  width:90vw;
  height:85vh;
  background-color:black;
  border-radius:10vw;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
  
}

.phoneScreen{
  position: absolute;
  width: 90%;
  height: 27%;
  background-color: blue;
  border-radius: 5vw;
  left:5%;
  top: 4%;
  z-index: 1;
}

.phoneNavigate{
  position: absolute;
  width: 90%;
  height: 15%;
  background-color: transparent;
  border-radius: 5vw;
  left:5%;
  top: 33%;
  z-index: 2;
}

#phoneEnter {
  position: absolute;
  width: 25%;
  height: 85%;
  background-color: purple;
  border-radius: 200%;
  top:7.5%;
  left:37.5%; 
  z-index: 100000;
  border: none;
}

#phoneLeft{
  position:absolute;
  width: 40%;
  height: 86%;
  background-color: teal;
  border-radius: 25%;
  top: 7%;
  left: 20%;
  border: none;
}

#phoneRight{
  position:absolute;
  width: 40%;
  height: 86%;
  background-color: teal;
  border-radius: 25%;
  top: 7%;
  right: 20%;
  border: none;
}

.phoneButtons {
  position: absolute;
  width: 90%;
  height: 45%;
  background-color: transparent;
  right:5%;
  bottom: 5vh;
  font-size: 40px;
  z-index: 3;
}

#button1 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  left:2.5%;
  top:4.5%;
  color: black;
  border: green;
  border-radius: 100%;
  font-size: 30px;
}

#button2 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  left:35%;
  top:4.5%;
  color: black;
  border: green;
  border-radius: 100%;
}

#button3 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  right:2.5%;
  top:4.5%;
  color:black;
  border:green;
  border-radius:100%;
}

#button4 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  left:2.5%;
  top:29.5%;
  color: black;
  border: green;
  border-radius: 100%;
}

#button5 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  left:35%;
  top:29.5%;
  color: black;
  border: green;
  border-radius: 100%;
}

#button6 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  right:2.5%;
  top:29.5%;
  color:black;
  border:green;
  border-radius:100%;
}

#button7 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  left:2.5%;
  top:54.5%;
  color: black;
  border: green;
  border-radius: 100%;
}

#button8 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  left:35%;
  top:54.5%;
  color: black;
  border: green;
  border-radius: 100%;
}

#button9 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  right:2.5%;
  top:54.5%;
  color:black;
  border:green;
  border-radius:100%;
}

#buttonStar {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  left:2.5%;
  top:79.5%;
  color: black;
  border: green;
  border-radius: 100%;
  transform: rotate(-15deg) scale(0.9);
}

#button0 {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  left:35%;
  top:79.5%;
  color: black;
  border: green;
  border-radius: 100%;
}

#buttonPound {
  position: absolute;
  width: 30%;
  height: 18%;
  background-color:green;
  right:2.5%;
  top:79.5%;
  color:black;
  border:green;
  border-radius:100%;
  transform: rotate(15deg) scale(0.9);
}

.phoneNumber {
  position: relative;
  font-size: 40px;
}

.phoneLetters {
  font-size: 10px;
}

.phoneArrows {
  background: linear-gradient(45deg, transparent 50%, transparent 0);
  width: 6%;
  height: 11%;
}

#leftArrow {
  position:absolute;
  transform: rotate(45deg);
  bottom: 6%;
  left:5%;
}

#rightArrow {
  position:absolute;
  transform: rotate(-135deg);
  bottom: 6%;
  right:5%;
}

.phoneScreenText {
  position: absolute;
}

.categoryOptions {
  column-count: 2;
  column-gap: 10vw;
  position: absolute;
  left: 10%;
  bottom: 27%;
}

#phoneInstr {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align-last: center;
  width: 95%;
  left: 2.5vw;
  top: 3%;
}

*/

.phoneContainer {
  position: relative;
  width:95vw;
  height:85vh;
  background-color:pink;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
}

#TopPO {
  position: absolute;
  top: 0;
}

#BottomPO {
  position: absolute;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
}