/* TO DO */


/* https://github.com/TarryDan/CSS-layouts */
/* Non commercial use only */

/* REPLACEMENTS &c*/

* {
	box-sizing: border-box;
}

body {
	height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


/* STICKY SCROLL SIDEBAR: TWO PANEL LAYOUT */

/* Everything on the page is in a MAIN */
    /* ASIDE is a sidebar */
    /* ARTICLE is the main flow of your content */
    /* SECTION divides the article into neat boxes */

body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

aside  {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: 10rem;
  flex-grow: 1;
}

main {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: 5%;

}

/* This produces a narrow sidebar. If you want the panels to be more 50/50 use these code blocks instead: 

main > :first-child  {
  flex-basis: 30rem;
  flex-grow: 1;
  height:100%;
}

main > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 35%;

*/


/* These rules for images are so images in your sidebar section will do the right behaviour. You may need to tinker with this to get your preferred result */

aside img {
    aspect-ratio: 201 / 718;
    max-width:100%;
}

/* What does the sidebar look like*/
aside {
	margin-left:2vw;
    top: 0;
    display:flex;
    flex-direction: column;
	justify-content: flex-start;
    align-items: center;
    position: sticky;
    max-height: 99vh;
    max-width: 30vw;
}

aside a:hover {
  cursor: url('../key-cursor.cur'), auto;
}

body {
    background-image: url(../bg/wall3.jpg), linear-gradient(180deg, rgba(180,100,66,1) 0%, rgba(141,95,76,1) 27%, rgba(50,24,2,1) 100%); ;
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


shel-ving {
  --min: 20ch;

  display: grid;
  /*grid-gap: var(--gap);*/
  /* min() with 100% prevents overflow
  in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
  margin-left: 4vw;
  margin-right: 4vw;
  grid-row-gap:2px;
    align-items: end;
}           


shel-ving > * {
    border-image: linear-gradient(180deg, rgba(180,100,66,1) 0%, rgba(141,95,76,1) 27%, rgba(50,24,2,1) 100%);
    border-width: 10px;
    border-style: solid;
    border-image-slice: 1;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 1em;
    padding-bottom: 0.5px;
    margin-bottom: 1em;

}

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


.house {
    position: fixed;
    z-index: -1;
    bottom: 0;
    right: 0%;
    max-width: 30vw;
    /*positions right but sizing issues */
}



/* OBJECTS */

bo-ok img:hover, rec-ord img:hover,cer-amic img:hover {
    transform: scale(1.3);
}

bo-ok img:hover,rec-ord img:hover,.newspaper:hover,.telephone:hover {
  cursor:grab;
}

rec-ord, bo-ok, wall-thing, cer-amic, clut-ter {
    display: none;
}

rec-ord img, bo-ok img {
    box-shadow: 
    rgba(0, 0, 0, 0.25) 0px 54px 55px, 
    rgba(0, 0, 0, 0.12) 0px -12px 30px, 
    rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, 
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

bo-ok img, rec-ord img, cer-amic img {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
    -webkit-transition-property: all;
      -webkit-transition-duration: 0.3s;
      -webkit-transition-timing-function: ease;
    }

/* WALL OBJECTS */

.pictures-row {
  height:fit-content;
  display: flex;
  justify-content: flex-end;
}


wall-thing {
    padding: 1em;
    margin-bottom:2em;
    max-width: 25em;
}

.fancyframe  {
    border-image-source: url('../bg/border-image.png');
    border-image-slice: 70;
    border-image-repeat: stretch;
    border-width: 30px;
    border-style: solid;
    border-color:goldenrod;
}

.poster {
    width: 50%;
    transform: rotate(8deg);
}



@font-face {
    font-family: 'Albertus';
    src: url('albertusmt-webfont.woff2') format('woff2'),
         url('albertusmt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #a65300 #ff8000;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ff8000;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #a65300;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
 
.map {
    position: fixed;
    z-index: 6;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*positions right but sizing issues */
    text-align:center;
    padding: 2ch;
}

button {
    font-family: 'Albertus', sans-serif;
    font-size: 1.5em;
    color: goldenrod;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
   
}

  .big-map {
    z-index: 6;
    width: 70vw;
    height: 80vh;
    background-color:brown;
    background-image: url(../bg/cork.jpg);
    background-size: contain;
    position: fixed;
    left: 13%;
    border: 20px brown solid;
    top: 10%;
  }

  #bigmap {
    display:none;
  }