/* 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." */

body {
    background-color: #FAD066;
    color: black;
    font-family: 'pixelFont', sans-serif;
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}


/* SCALING */
.scene {
    position: relative;

    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));

    margin: auto;
    overflow: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.scene img {
  image-rendering: pixelated;
}

/* THIS CODE IS FOR GENERAL STYLES */
/* BORDER */
.notepaper {
  position: relative; 
  top: 50px;   
  left: 20px;   
  z-index: 10;  

  width: fit-content;
  height: fit-content;
  padding: 20px;
  border: 2px solid #4a4a4a;
  color: black;
  border-width: 20px 11px 20px 19px;
  border-image-slice: 20 11 20 19 fill;
  border-image-repeat: repeat round;
  border-style: solid;
  border-color: transparent;
  image-rendering: auto;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAABoCAMAAABvw+gRAAAALVBMVEUAAADu7u6qqqqZmZmIiIh3d3e7u7vMzMz////d3d1mZmZVVVX+/v7v7+/w8PCGxkBUAAAAAXRSTlMAQObYZgAAA+lJREFUeNqNWAmC2zAINKeM4u3/n9tYK2yTcdzSY3UwGhAINlkuQiyibzE1MxbTfcbMsq/zAmLmjda30HqVoKAIFzWVqq9TowAo50TRxPQK8PVB6JfN9YT0+KJaOZtqYQAXQMjzArRq01coif1SXJZAtW6RciLy5EqFh/ySyPosiTwQ1nLtmxN0DmIgwCS6mJIbubUHnv/LqASdiHLoQ2j6noGw+yTTj3koM2fiIQsiVjJ+i9Izx8gsN7N4o0c4Wf9l1RSLHTDwbRhU4k3HSuiCorfBe0A8Jw1JvnF1nwD3p3dC+qtvlOOS+/gGaGhxXOGvuCsOlOPGuxmHV8YqVFyGSEZBpM5TbpFC7n59IoTZTnAyJvVAmJSTKgBhmlcF5xXi6oecm43biiyfVvWW88ZhIQ6xq9y6+GG/Wx8t4VAgoBgczq4iKpwFUqAjlPvF3DXHayB8UdaXpc/G0KoSlUlyWHPhNq3iewfynwyCNobTKH+qqUPNKCij+VgYqFSfMWUT8+IrkBHtCIYw05xuP7f1yhyOTNn+lMeViO6g/pCP80XNtTQuviETIQ/PCEOSHA9JXnED0dNMINmgWtCMR3I24ZbocVVo5ERMCDfrTaFElVnIbpVTRKwrL8NEPVQ2uOGs1Natt2h9pmIrRmHnBOHTig0K3PTDupkdWB70J0ktPiOvwj1iGIUtKmnoEvPe5jzc8p0frg8a+shdaxkC526unIdu23Qd8or5mDX104afP9tHRIhmtjdaUQhvl2o3oMsrqBGkGnmdl0PQyE4OrHD81MaAZlpFX5Q2RPF8g8X+vF3wPa16HYRdXz5hebvFtUTQK46sZLG1eF6Js7bzi47GwOyQVal/7R+NTTJ15fJsf2oVzW5QxbnWROiDz4ihXSMryyLcTbuqTYSu9UVVGuKzIgY7eA427Rx89nNpHsqoRReK0aPOnTem1tMNKIiXQYL0xRGqiEVLJa4UKJmJqV9GQEHDj9o/qOps0KUGggnduO2cNN+5ciqTd/7wfINy/UZ4m83Yhd27zJ2E/FTmgciayCNJMuYglAiPufDaEdDkAKULv4K5RfMJWASqCtSShaf2RBR9EDs12fGzAXKQ5jOSFlK/PrgH0tBqHDQyFykQxTsgScO1e5RESlvq5ygG5hsfKBECjQ9Ldpk3KRyghGvB+XsJnI7jk6Ond9ipsOa77xztyaRKHeJLeYQAADfU74IWqUD0eUgbiOkI3Z9dQOQzrfReAx0Jc/gu6vkLE1b4NgqOLUuhgp9s8NGdnE1tOaXrqRr3WFZdipixRwRFEBGtFOuYrWPWWNh0ARFRURFR3Uc2f8r47yD4C5YqfMcto41mAAAAAElFTkSuQmCC");
}

/* FONT */
@font-face {
  font-family: 'pixelFont';
  src: url('fonts/pixelFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* REMOVE SPACE BETWEEN <p> AND <img> */
img.block-image {
  display: block;
  margin-bottom: 0;
}

p.close-space {
  margin-top: 0;
}







/* THIS CODE IS FOR HOMEPAGE INDEX.HTML */
/* INDEX BACKGROUND */
.scene.house_background {
    background-image: url("pics/graphics/house on a sunny street.png");
}

/* HOVER DOOR EFFECT */
/* click container */
.imgtxt.door { 
  position: absolute; 
  top: 54.2%;
  left: 53%;
  width: 5.7%;
  transform: translateX(-50%);

}

/* hide opendoor.png */
.imgtxt.door img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0; 
}

/* hide hover text */
.imgtxt span { 
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 2.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}

/* reveal image when cursor hovers */
.imgtxt:hover img, .imgtxt:focus img, .imgtxt:hover span, .imgtxt:focus span { 
  opacity: 1; 
}

/* flower */
.flower_gif {
    position:absolute;
    bottom:15%;
    left:41%;
    width:5%;
    z-index:5;
}








/* THIS CODE IS FOR THE INTERIOR HOUSE PAGE */
/* INTERIOR BACKGROUND */
.scene.interior_background {
    background-image: url("pics/graphics/interiorhouse.png");
}

.bedroom-page .notepaper {
    position:absolute;
    top:72%;
    left:74%;
}

.rotate {
    display: block;
    position: absolute;
    text-decoration: none;
}

.rotate img {
    display: block;
    width: 100%;
}

.rotate span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;

    text-shadow:
        1px 1px 2px black,
       -1px 1px 2px black,
        1px -1px 2px black,
       -1px -1px 2px black;
}

.rotate:hover img {
    transform: rotate(3deg);
}

.rotate:hover span {
    opacity: 1;
}












/* PHOTO GALLERY */
.photo_background {
    background-image:   linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("pics/cow.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    width: 100%;
    height: 100vh;
    
    display: flex;
    align-items: flex-start;   
    justify-content: flex-end;
    
    padding: 50px 40px 50px 0;
    box-sizing: border-box;
    
    overflow: hidden;
}

.gallery_card {
  position: absolute;

  left: 40px;
  top: 50px;

  width: 40%;

  margin-left: 70px;

  color: white;
  text-align: center;

  z-index: 5;
}

.gallery_card h1 {
  margin: 0;
  font-size: 2rem;
}

.gallery_card p {
  margin: 5px 0 0 0;
  font-size: 1rem;
}

.left_scroll {
  color: white;
  position: absolute;

  left: 40px;
  top: 120px;

  width: 40%;
  height: calc(100vh - 100px);

  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 30px;
  box-sizing: border-box;
  
  margin-left: 70px;
}

.left_scroll img {
  width: 100%;
  height: auto;
  display: block;
}

.photo_scroll {
    width: 55%;
    height: 100vh;

    overflow-y: auto;
    overflow-x: visible;

    scrollbar-width: none;
}

.photo_scroll::-webkit-scrollbar {
    display: none;
}

/*PHOTO PILE from ribo.zone */

.photopile {
    display: grid;

    grid-template-columns: repeat(3, 155px);

    row-gap: 10px;
    column-gap: 0;

    align-items: start;
    justify-content: center;

    padding: 40px 70px;

    box-sizing: border-box;

    margin-left: auto;
    margin-right: 40px;
}

.photo_scroll::-webkit-scrollbar {
    display: none;
}

/* POLAROIDS */

.photopile figure {
    display: block;

    width: 175px;

    background: white;

    box-shadow:
        1px 4px 5px rgba(0,0,0,0.55);

    /* THIS CREATES THE OVERLAP */
    margin: 0 -20px 20px -20px;

    position: relative;

    cursor: pointer;

    z-index: 1;

    /* smooth "pick up" animation */
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


/* PHOTOS */

.photopile figure img {
    width: calc(100% - 2rem);

    margin: 1rem 1rem 0 1rem;

    border: 2px solid rgba(0,0,0,0.55);

    display: block;

    box-sizing: border-box;
}


/* CAPTIONS */

.photopile figcaption {
    text-align: center;

    margin: 0.5rem 1rem 1rem;

    font-size: 1rem;

    color: black;
}

/* POLAROID ROTATIONS */

/* Give every polaroid a rotation */
.photopile figure:nth-child(6n + 1) {
    transform: rotate(2deg);
}

.photopile figure:nth-child(6n + 2) {
    transform: rotate(-10deg);
}

.photopile figure:nth-child(6n + 3) {
    transform: rotate(5deg);
}

.photopile figure:nth-child(6n + 4) {
    transform: rotate(4deg);
}

.photopile figure:nth-child(6n + 5) {
    transform: rotate(-2deg);
}

.photopile figure:nth-child(6n) {
    transform: rotate(-7deg);
}


/* HOVER / PICK-UP EFFECT*/

.photopile figure {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;

    cursor: pointer;
}


/* EVERY POLAROID RISES */

.photopile figure:hover {
    z-index: 100;

    box-shadow:
        4px 12px 15px rgba(0,0,0,0.45);
}


/* Keep rotation while lifting */

.photopile figure:nth-child(6n + 1):hover {
    transform: translateY(-12px) rotate(2deg) scale(1.04);
}

.photopile figure:nth-child(6n + 2):hover {
    transform: translateY(-12px) rotate(-10deg) scale(1.04);
}

.photopile figure:nth-child(6n + 3):hover {
    transform: translateY(-12px) rotate(5deg) scale(1.04);
}

.photopile figure:nth-child(6n + 4):hover {
    transform: translateY(-12px) rotate(4deg) scale(1.04);
}

.photopile figure:nth-child(6n + 5):hover {
    transform: translateY(-12px) rotate(-2deg) scale(1.04);
}

.photopile figure:nth-child(6n):hover {
    transform: translateY(-12px) rotate(-7deg) scale(1.04);
}

/* DARK BACKGROUND BEHIND POPUP */
.photo-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.75);

    align-items: center;
    justify-content: center;
}

/* popup is open */
.photo-modal.active {
    display: flex;
}


/* photo itself */
.modal-photo-container {
    background: #f5f0df;
    padding: 15px 15px 30px;
    max-width: 80vw;
    max-height: 80vh;

    box-shadow: 0 10px 40px rgba(0,0,0,0.4);

    text-align: center;
}

#modalPhoto {
    display: block;
    max-width: 70vw;
    max-height: 65vh;
    object-fit: contain;
}

#modalCaption {
    margin: 12px 0 0;
    font-size: 14px;
}

/* X button */
.modal-close {
    position: absolute;
    top: 25px;
    right: 35px;

    background: none;
    border: none;

    color: white;
    font-size: 40px;
    cursor: pointer;
}

/* left/right arrows */
.photo-arrow {
    background: none;
    border: none;

    color: white;
    font-size: 60px;

    cursor: pointer;

    padding: 30px;
}

.photo-arrow:hover {
    color: #ddd;
}