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

:root{
  --backgroundSize: 400px;
}

body {
  background-color: white;
  color: black;
  background-image: url("https://i.imgur.com/hCUB1Om.png");
  background-size: var(--backgroundSize);
  z-index: 0;
  box-sizing: border-box;
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  animation: movingBackground 3s linear infinite;
}
body:after {
  
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@keyframes movingBackground {
  from { background-position: 0 0;}
  to {background-position: var(--backgroundSize) var(--backgroundSize);}
}






.float{
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

 @keyframes floating {
    0% {
      transform: translate(0, 0px);
    }

    50% {
      transform: translate(0, 6px);
    }

    100% {
      transform: translate(0, -0px);
    }


}









center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

@font-face{
  font-family:'Nintendo-DS-BIOS';
src: url('https://circusbythesea.neocities.org/Nintendo-DS-BIOS.ttf');
}

@font-face {
  font-family:'OwlsNInk';
src: url('https://circusbythesea.neocities.org/OwlsNInk.ttf');
}

@font-face {
  font-family:'RomanceA';
  src: url('https://circusbythesea.neocities.org/RomanceA.ttf');
}



/* Container holding the image and the text */
.door {
 object-fit: scale-down;
	display: block;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  top:20px;  
	flex: 1 1 9%;
	flex-wrap: wrap;
  position:relative;
  text-align: center;
  
  
  h1 {
    
    font-family: 'Nintendo-DS-BIOS';
    color: #91B771;
  }
  h2 {
    font-family: 'Nintendo-DS-BIOS';
  color: #91B771;
  }
  img {
    
    height: 35rem;
    
    filter: drop-shadow(0px 10px 8px #403833);

  }
}




.windchime {
  width: 100px;
  height: 300px;
	top:0px;
	right: 80px;
	background-image: url("https://i.imgur.com/9P9fDHk.png");
	background-size: contain;
	background-repeat:no-repeat;
	position:absolute;
	animation-name: sway;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  transform-origin: 50% 0% 0;
  
  
}


@keyframes sway {
  0%, 100%{ transform: rotate(-6deg);}
    50%{ transform: rotate(6deg); }
}




.welcomemat {
  background-color:white;
  
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  padding:5px;
  height:60px;
	border-radius: 10px;
	flex: 1 1 9%;
	flex-wrap: wrap;
  position:relative;
  color: #91B771;
  text-align: center;
}
h1, h2, h3, h4, h5, h6, p  { 
margin: 5px;
line-height: 1.2;
}
h1 { 
font-size: 1.8rem;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
padding-bottom: 5px;
font-family: 'OwlsNInk';
}

h2 { 
  font-family: 'Nintendo-DS-BIOS';
font-size: 2rem;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
padding-bottom: 5px;

}
p{
  font-family: 'Nintendo-DS-BIOS';
  font-size: 1rem;
font-weight: normal;
text-align: center;
}
a {
  text-decoration: none;
}

.scripted {
  filter: drop-shadow( 0 2px white) drop-shadow( 2px 0 white) drop-shadow( 0 -2px white) drop-shadow( -2px 0 white) ;
 } 
 
 
        ::-webkit-scrollbar {
        width: 0;
        /* remove scrollbar space */
        background: transparent;
        /* to make scrollbar invisible */
        }

        ::-webkit-scrollbar-thumb {
        background: transparent;
        }