* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html {

height: 100%;
width: 100%;

}


body {

background-color: lavender;
color: #4c002d;
font-family: ArchivoBlack;
height: 100%;
width: 100%;
}

@font-face {
  font-family: ArchivoBlack; /* set name */
  src: url('./Archivo_Black/ArchivoBlack-Regular.ttf'); /* url of the font */
}

@font-face {
  font-family: EBGaramond; /* set name */
  src: url('./EB_Garamond/EBGaramond-VariableFont_wght.ttf'); /* url of the font */
}


a {

cursor: crosshair;
color: #4c002d;
}

a:hover {

cursor: crosshair;

}

a:active {
cursor: crosshair;

}

.title {
text-shadow: 0px 0px 8px white;
font-size: 20px;
position: fixed;

}


.learn {
position: absolute;
font-family: EBGaramond;
left: 66%;
font-size: 17px;
bottom: 10%;
}

.information {
position: absolute;
bottom: 0%;
right: 44%;
height: 100%;
width: 35%;
background-color: gainsboro;
padding: 2%;
color: #4c002d;
font-family: sans-serif;
font-size: 20px;
font-style: italic;
text-align: left;
border: 3px ridge;
overflow: scroll;
}

.information:hover {

background-color: gainsboro;
color: #4c002d;

}

.out {
position: absolute;
right: 0%;
bottom: 0%;
filter: grayscale(100%);

}


.in {
position: absolute;
bottom: 0%;
right: 39%;
filter: grayscale(100%);

}

.window {
position: absolute;
filter: grayscale(100%);
bottom: 51%;
right: 39%;

}


.stairs {
position: absolute;
filter: grayscale(100%);
bottom: 51%;
right: 0%;

}


.building:hover {
z-index: -1;

}


.dinner {
position: absolute;
filter: grayscale(0%);
right: 0%;
top: -10%;
transform: rotate(-5deg);
}


.bloom {

border: 1px solid white;

}

.ig {

position: absolute;
bottom: 22%;
right: 7%;

}

.ah_mobile {

display: none;

}