/*

         ||  '||  '||   ||                                         
......  ...   ||   ||  ...    ....  .. ...     ....   ....   ....  
'  .|'   ||   ||   ||   ||  .|...||  ||  ||  .|...|| ||. '  ||. '  
 .|'     ||   ||   ||   ||  ||       ||  ||  ||      . '|.. . '|.. 
||....| .||. .||. .||. .||.  '|...' .||. ||.  '|...' |'..|' |'..|' 


*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');


/* background */

#background{
  background-color: #050B15;
  min-height: 100vh;
}

#scene {
  background-color: #060E19;
  background-image: url("directory images/backgroundsketch.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-width: 400px;
  min-height: 300px;
  max-height: 100vh;
  aspect-ratio: 1920/1080;
  position: relative;
  margin: auto;
}


/* scene overlay image */
.sceneoverlay, .vintageoverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.vintageoverlay {
  z-index: 3;
  mix-blend-mode: multiply;
}


/* cursor */

body {
  /* cursor: url("pinkarrowcursor.png"), default; */
  cursor: url('directory images/purplearrowcursorlight.png'), auto;
}

a:hover, button:hover { 
  cursor: url("directory images/purplearrowcursordark.png"), auto;
  
}

.auto {
    cursor: url("directory images/purplearrowcursorlight.png"), auto;
}


/* welcome image */

.welcomeimage {
  aspect-ratio: 613/216.12;
  width: 31.92%;
  left: 32.91%;
  top: 68.70%;
}

.welcomeimage:hover {
  transform: scale(1.1);
}


/* home page directory links as interactive images */
/* affects all icons */

.homeicons a, .welcomeimage{
  display: inline-block;
  background-size: contain;
  position: absolute;
  transition-duration: 400ms;
}

/* affects home icon labels */

.homeiconlabel {
  position: absolute;
  display: none;
  height: 11%;
  top: 16.29%;
  left: 50%;
  transform: translate(-50%,0);
}

/* individual icons */

.homeicon1 {
  background-image: url("directory images/1a.png");
  aspect-ratio: 323.34/206.12;
  width: 16.84%;
  top: 46.59%;
  left: 12.65%;
}

.homeicon1:hover {
  background-image: url("directory images/1b.png");
  transform: scale(1.1); 
}


.homeicon2 {
  background-image: url("directory images/2a.png");
  aspect-ratio: 244/236;
  width: 12.70%;
  top: 31.51%;
  left: 30.83%;
}

.homeicon2:hover {
  background-image: url("directory images/2b.png");
  transform: scale(1.1); 
}


.homeicon3 {
  background-image: url("directory images/3a.png");
  aspect-ratio: 101.59/185.6;
  width: 5.29%;
  left: 49.18%;
  top: 35.10%;
}

.homeicon3:hover {
  background-image: url("directory images/3b.png");
  transform: scale(1.1); 
}


.homeicon4 {
  background-image: url("directory images/4a.png");
  aspect-ratio: 292.08/126.99;
  width: 15.21%;
  left: 62.77%;
  top: 37.81%;
}

.homeicon4:hover {
  background-image: url("directory images/4b.png");
  transform: scale(1.1); 
}


.homeicon5 {
  background-image: url("directory images/5a.png");
  aspect-ratio: 381/143;
  width: 19.84%;
  left: 65.88%;
  top: 51.38%;
}

.homeicon5:hover {
  background-image: url("directory images/5b.png");
  transform: scale(1.1); 
}


/* text */

footer{
  position: sticky;
  bottom: 3px;
  width: 100%;
  text-align: center;
  z-index: 2;
  opacity: 25%;
}


p {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 1%;
  color: #f8f8f8;
  text-align: center;
  line-height: 158%;
}