/* Boilerplate */

/* Fonts */
@font-face {
  font-family: Executive;
  src: url(/fonts/F25_Executive.otf);
}

@font-face {
  font-family: The Wall;
  src: url(/fonts/TheWall.ttf);
}

:root {
  /* Colours*/
  --jet: #2d2a28;
  --linen: #f5ebe0;
  --cerise: #e63e62;
  --mountbatton-pink: #9b6f7f;
  --blush: #c76f82;

  /* Text: */
  --normal-font: Executive;
  --pixel-cursive-font: The Wall, serif;
  --font-size: 12px;
}

/* Main Elements */

* {
  cursor: url(/images/ghost.gif), auto;
  box-sizing: border-box;
}

:root{
  overscroll-behavior: none;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%;
  overflow: hidden;
}

.container {
  width: 90%;
  margin: 0 auto;
  padding-top: 10px;
  position: relative;
  z-index: 0;
  flex: 1;
}

body {
  background-image: url("/images/backgrounds/wood_background.jpg");
  @supports (background-image: url("/images/backgrounds/wood_background.webp")) 
  {
    background-image: url("/images/backgrounds/wood_background.webp");
  }
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

#accessible-heading {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

p {
  font-family: var(--pixel-cursive-font);
  font-size: 1.3em;
  color: var(--jet);
}

a {
  font-family: var(--normal-font);
  color: var(--blush);
  text-decoration: underline dashed;
} 

a:hover {
  color: var(--cerise);
  text-decoration: none;
}

a::selection {
  color: var(--linen);
  background: var(--cerise);
}

#note {
  position: absolute;
  background-image: url("/images/backgrounds/paper_background.jpg");
  @supports (background-image: url("/images/backgrounds/paper_background.webp")) 
  {
    background-image: url("/images/backgrounds/paper_background.webp");
  }
  padding: 25px;
  left: 100px;
  top: 50px;
  display: inline-block;
  filter: drop-shadow(2px 2px 5px var(--jet));
  transform: rotate(-2.3deg);
  border-radius: 2px;
}

.moveable-image{
  position: relative;
}

#image-gallery {
  margin-top: 180px;
  padding-bottom: 200px;
}

#image-gallery img{
  max-height: 500px;
  max-width: 500px;
  object-fit: contain;
  filter: drop-shadow(2px 2px 5px var(--jet));
  position: relative;
}

.link-decor:hover{
  transform: rotate(5deg);
  transition: .2s ease;
}

#back-image {
  position: fixed;
  bottom: 2vh;
  left: 1vw;
  z-index: 999;
}

/* Footer */

footer{
  position: relative;
  text-align: center;  
  background: var(--jet);
  font-family: var(--normal-font);  
  padding: 1% 15% 1% 15%;
  border-top: 5px double var(--linen);
  margin-top: 10%;
  z-index: -10;
}

footer p{
  /* Special version of blush colour to meet accessibility requirements */
  color: #CC7B8C;
  font-family: var(--normal-font);
  font-size: 1em;
  font-size-adjust: 0.5;
  line-height: calc(1ex / 0.32);
  margin: calc(1ex / 0.32) 0;
}