@charset "utf-8";
/* CSS Document */
*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
   font-size:20px;
}
article {
	
	
}

img,
iframe {
max-width: 100%;
height: auto;
/* so that aspect ratio is kept even if height is declared in markup */ 
border: none;
/* this stops a border if the image is inside a link */
}

/* This is a CSS comment.
Always comment your work to explain what you're doing */ 


/*
background color defaults
Note that HTML and CSS use American spelling (color not colour). */
body {
    background-image: url("flower pattren copy.png");
    background-repeat: repeat;
    background-size: 300px;
	font-family: arial, sans-serif;
}
header {
       background-color:rgba(255,0,4,0.00);
       }
/* Note that if we want a number of different elements to have the same style, we just comma separate them. */
header, footer {
               text-align:center;
               }
/*TYPEOGRAPOHY!*/
H1 {
	font-size:50px; 
	colour:blue;
	text-transform: uppercase;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-bottom: 100px;
}
H2 { 
	font-size: 100px;
	font-family: "dynapuff", sans-serif;
	text-transform: uppercase;
}
h3 {
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
h4 {
	font-size: 320px;
	margin-bottom: -100px;
	font-family: "dynapuff", sans-serif;
font-weight: 600;
font-style: normal;
}

h5 {
	font-family: "Old English Text MT", Gothic, serif;

	font-size: 2px;
		margin-bottom:-100px;
	margin-top: 50px;
	
	
}
h6 {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	margin-top: 10px;
	text-align: center;
	margin-bottom: -50px;
	text-decoration: underline;
	font-size: 30px
}
h7{
    font-family: "carol-gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    ;
    font-size: 70px;
    margin-left: 45px;
    margin-bottom: 40px;
    text-align: justify;
	
}
h8 {
	font-size: 20px;
	font-family: "dynapuff", sans-serif;
	display: block;
	padding: 30px;


	


}
.visit-range{
	margin-right: 200px;
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: black;
	padding: 10px;
	border-radius: 100px;
	background-color: white;
	

}

.visit-range:hover {
    color: white;
    background-color: #A9F0FF;
}
	
.range-title {
    font-size: 80px;
    text-align: left;
    margin-right: 100px;
    line-height: 1;
	font-family: "carol-gothic", sans-serif;
	margin-top: -50px
}
.range-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px; /* THIS creates the space */
}

nav a{
	text-colour: black;
}



.flowerbunch{
	width: 170px;
	margin-top: -200px;
	margin-bottom: 100px;
	margin-right: 150px;
}


.item {
	background-color:#F0C8FF;
	margin-top: 1%;
margin-right: 4.5%;
margin-bottom: 1%;
margin-left: 4.5%;
text-align: center;
	border-radius: 50px;
	
		}
main {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.email{
	
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: black;
	padding: 10px;
	border-radius: 100px;
	background-color: white;
}

.email:hover{
		color: white;
	background-color: #A9F0FF;
	

}

item li {
	margin-left: 25px;
}
blockquote {
	text-transform: uppercase;
	font-style:oblique;
	font-family: "dynapuff", sans-serif;
}
nav {
	text-align: center; 
	
}

.nav-article {
    background: #FFFFFF;
    margin-left: 4.5%;
    margin-right: 4.5%;
    margin-top: 1%;
    margin-bottom: 1%;

    border-radius: 100px;

    padding: 10px;
	
}
nav li {
	display: inline-block;
}
.nav-article 
 nav a {
	background: radial-gradient(100px);
	color:black;
	text-decoration: overline;
	border-radius: 200px; 
    padding: 10px 20px;
	text-transform: uppercase;
	 
	
	 
}
nav a:hover {
    background:#D8B44D ;
	height: 1px;
	
}
	


.slider {
  overflow: hidden;
  width: 100%;
  height: 200px;
}

.slide-track {
  display: flex;
  width: calc(250px * 8); /* image width × number of images */
  animation: scroll 10s linear infinite;
	
}

.slide-track img {
  width: 250px;
  height: 200px;
  object-fit: cover;
}
	
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.slider {
  margin-bottom: 0.00005px;
	
}
body {
  margin: 1px;
}

.hero {
  height: 400px;
  overflow: inherit;
  position: relative;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: fixed; /* makes it stay while scrolling */
  top: 0;
  left: 0;
  z-index: -1;
  transition: opacity 0.2s;
	
}

.content {
  margin-top: 400px;
  background-color: red;
  padding: 20px;
}
.hero img {
  will-change: opacity;
}

let opacity{
inherit:scrollY-200;
}
.image-box {
  position: relative;
  width: 30px;
}

.image-box img {
  width: 100%;
  display: block;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.6);
  color: red;

  display: flex;
  justify-content: center;
  align-items: center;
	

  opacity: 0;
  transition: opacity 0.8s ease;
}

.image-box:hover .overlay {
  opacity: 1;
}

.nav-article {
    width-right: 200%;
	width-left: 200%;
    background: #FFFFFF;        
}
nav ul {
    margin: 0;
    padding: 0;
}


.collage {
    position: relative;
    width: 720px;
    height: 260px;
    margin-left: -40px;
	margin-top: -100px
}

.pic {
    position: absolute;
    border-radius: 20px;          /* soft edges */
box-shadow: 0 0 40px rgba(255,255,255,255.7);
    object-fit: cover;
    transition: 0.3s;
}

/* individual image positions + sizes */

.pic1 {
    width: 190px;
    top: -180px;
    left: 60px;
    z-index: 10000;
	opacity: 100%;
}

.pic2 {
    width: 200px;
    top: -180px;
    left: 270px;
    z-index: 100;
}

.pic3 {
    width: 200px;
    top: 2px;
    left: 125px;
    z-index: 200;
}