body {
  background-color: white;
  color: black;
  font-family: Verdana;
  cursor: url(/images/glasses-cursor.png), default;

}

 @font-face { font-family: Handwriting; src: url('Handwriting-Regular.ttf'); } 
 @font-face { font-family: Handwriting-bold; src: url('Handwriting-Bold.ttf'); } 

a:hover { 
  cursor: url(/images/pointer-cursor.png), pointer; 
}

.x { 
  cursor: url(/images/glasses-cursor.png), default; 
}

.hpgifs img {
   cursor: url(/images/pointer-cursor.png), pointer; 
}

* {
     cursor: url(/images/glasses-cursor.png), auto ;
   }


.x {
  font-size: 50px;
}


/*mobile */

#mobile-logo {
  height: 139px;
  width: 281px;
}


@media only screen and (max-width: 600px) {
  body {
    background-color: white;
  }
}

.mobile-hplabels a {
  font-family: handwriting-bold;
  font-size: 30px;
  color: white;
  text-shadow: 0 0 10px #ffb1a9, 0 0 20px #ffb1a9, 0 0 30px #ffb1a9, 0 0 40px #ffb1a9, 0 0 50px #ffb1a9, 0 0 60px #ffb1a9, 0 0 70px #ffb1a9;
  z-index:4;
  text-decoration: none;
}


#mobile-label1 {
  position: absolute;
  right: 5px;
}

#mobile-label2 {
  position: absolute;
  bottom: 150px;
  left: 250px;
}

#mobile-label3 {
  position: absolute;
  top: 250px;
}

#mobile-label4 {
  position: absolute;
  right: 50px;
  top: 380px;
}

#mobile-label5 {
  position: absolute;
  bottom: 10px;
  left: 100px;
}

@media only screen and (max-width: 600px) {
  #logo {
    position: absolute;
    top: 5px;
    height: 20%;
  }
}


@media only screen and (max-width: 800px) {
  #navbar {
  display: none;
  }  
}

@media only screen and (min-width: 801px) {
  #mob-navbar {
  display: none;
  }  
}

#mob-navbar {
  width: 98%;
}


/*Projects */



#page-forward {
  position: absolute;
  top:0px;
  left:0px;
  height:2141px;
  width: 1631px;
}

#page-backward {
  position: absolute;
  top:0px;
  left:0px;
  height:2141px;
  width: 1631px;
}

.back {
  position: absolute;
  z-index: 3;
  font-size: 25px;
}

.pushback {
  z-index: -1;
}



/*LIGHTBOX */

.gallery-container {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  margin: 160px auto;
  margin-bottom: 20px;
}


.gallery-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-container img:hover {
 cursor: url(/images/pointer-cursor.png), pointer; 
}

.gallery-container2 {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 80px;
  margin: 160px auto;
}




.gallery-container2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.gallery-container2 img:hover {
 cursor: url(/images/pointer-cursor.png), pointer; 
}

#patterns-div {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  margin: 160px auto;
  margin-top: 0px;
}

#patterns-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 150px;
}

.pattern {
  max-height: 150px;
}


.new {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: fit-content;
  max-height: 800px;
  z-index: 2;
}

.x {
  position: fixed;
  top: 100px;
  right: 50px;
}


.description {
  position: fixed;
   top: 93%;
  left: 50%;
  background: white;
  transform: translate(-50%, -50%);
}









/*                  LANDING PAGE                  */

@media only screen and (min-width: 601px) {
  #landing-text {
    position: absolute;
    bottom: 100px;
    right: 100px;
  }
  .under-construction {
    opacity: 0.3;
    position: absolute;
    bottom: 82px;
    left: 30px;
  
  }
  .under-construction img {
    height: 105%;
    width: 105%;
  }
}


@media only screen and (max-width: 600px) {
  #landing-text {
    font-size: 35px;
    text-align: center;
  }
 #cont-dev {
   width: 100%;
   height: auto;
 }
 
}





/*                    HOMEPAGE            */


#eyecare {
  display:none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.75;
}


#logo {
  position: absolute;
  z-index: 2;
}

.hpgifs {
  margin: 0px;
  position:fixed;
  width: 1631px;
  height: 917px;
  opacity:1;
  aspect-ratio: 16 / 9;
}



.hplabels {
  font-family: handwriting-bold;
  font-size: 30px;
color: white;
text-shadow: 0 0 10px #ffb1a9, 0 0 20px #ffb1a9, 0 0 30px #ffb1a9, 0 0 40px #ffb1a9, 0 0 50px #ffb1a9, 0 0 60px #ffb1a9, 0 0 70px #ffb1a9;
  z-index:4;
}






#label1 {
  position: fixed;
  left: 820px;
  top: 75px;
}

#label2 {
  position: fixed;
   left: 920px;
   top: 405px;
}

#label3 {
  position: fixed;
  top:510px;
  left:410px;
}

#label4 {
  position: fixed;
  left: 660px;
  top: 370px;
}

#label5 {
  position: fixed;
  top: 600px;
  left: 660px;
}

.static {
  position:relative;
  top: 226px;
  left: 328px;
}


.static3 {
  position:relative;
  top: 95px;
  right: 570px;
}

.static2 {
  position:relative;
  left: 255px;
  top: 585px;
}


.static4 {
  position:relative;
  left: 880px;
  bottom: 340px;
}


.static5 {
  position:relative;
  left: 360px;
  bottom: 55px;
}




/*                    OTHER PAGES            */

.bh-vid {
  position: absolute;
  top:800px;
  left:600px;
}

#bh-link {
  opacity: 0;
  position: absolute;
  top: 323px;
  left: 1215px;
  font-size: 30px;
}

#logo-special {
  z-index: 2;
  position: relative;
}

#navbar {
  position:absolute;
  top: 0px;
  z-index: 1;
}

.nav-links a {
  font-size: 22px;
  padding: 20px;
  opacity:0;
}

#home {
  position: absolute;
  top:20px;
  left:440px;
  z-index: 1;
}

#illustration {
  position: absolute;
  top:20px;
  left:600px;
  z-index: 1;
}

#chara-design {
  position: absolute;
  top:20px;
  left:800px;
  z-index: 1;
}

#watercolor {
  position: absolute;
  top:10px;
  left:1010px;
  z-index: 1;
}

#projects {
  position: absolute;
  top:6px;
  left:1160px;
  z-index: 1;
}

#about-me {
  position: absolute;
  top:10px;
  left:1400px;
  z-index: 1;
}

.about-me-text {
  position: absolute;
  left:150px;
  height:500px;
  width: 600px;
}

.about-me-text p {
  font-size: 35px;
  font-family: Handwriting-bold;
  letter-spacing: -2px;
}