@charset "UTF-8";
/* CSS Document */

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

html,body {width:100vw;
    	   height: 100vh;
    	   margin: 0;
		   text-align: center;}

picture{height:100%;}

a{text-decoration: none;}

.dropbtn{background-color: transparent;
		color: white;
		padding: 16px;
		width: 100px;
		font-size: 16px;
		border: none;
		margin-bottom: 20px;}

.dropdown{position: fixed;
		display: inline-block;
		width: 100px;
		right: 10px;
		top: 20px;}

.dropdown-content{display: none;
				position: absolute;
				width: 100px;
				z-index: 1;
				text-align: center;
				background-color: black;}

.dropdown-content a{color:cornsilk;
					padding: 10px 16px;
					text-decoration:none; 
					display: block;
					border-radius: 10px;
					font-family: 'Montserrat', sans-serif;}

#logo{position: fixed;
			width: 250px;
			top:-72px;
			left:50%;
			transform:translate(-50%);
			height: auto;
			z-index: 1;}

#menu{width: 30px;
	height: auto;
	z-index: 5;}

.parallax {
  /* The image used */
	
  background-image: url("surf2.jpg");

  /* Set a specific height */
  min-height: 1000px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
	
@media only screen and (max-width: 600px) {
  .parallax {
    background-image: url("surf1.jpg");}}

	.scroll1{height:100%;
			width: auto;
			background-color: antiquewhite;
			font-size: 36px;
			background-image: url("surf.jpg");
			background-position: center;
  			background-repeat: no-repeat;
  			background-size: cover;}

@media only screen and (max-width: 600px) {
  .scroll1 {
    background-image: url("kite1.jpg");}}

.scroll{height: 80px;}

#butt{
	width: 200px;
	height: 400px;}


#button{
	text-decoration: none;
	background-color:darkcyan;
	position:relative;
	left:50%;
	transform:translate(-50%);
	top: 200%;
	width: 120px;
	padding: 20px;
	color: black;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}

#button:hover{
	background-color:black;
	color: white;
	text-decoration: none;}


/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
transition: transform 1s;}

.prev{
  left: 0;
  border-radius: 3px 0 0 3px;
transition: transform 1s;}

.next:hover{transform: scale(1.5);}
.prev:hover{transform: scale(1.5);}


h1{
	font-size:35px;
	font-family: 'Montserrat', sans-serif;
	font-weight:200;
	text-align: center;
	position: relative;
	top: 170%;
}

h2{
	font-size: 35px;
		font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	position: relative;
	top: 170%;
}


h3{	position: absolute;
	top: 200%;
	text-align: center;
	font-size: 35px;
	font-family: 'Oswald', sans-serif;
	color:black;
	z-index: 5;
	padding-top: 20px;
	font-weight:400;
	
}

#arrow{
	z-index: 3;
	position:absolute;
	max-width:50px;
	height: auto;
	opacity: 100%;
	left: 50%;
	transform: translate(-50%);
	text-decoration: none;
	color: black;
	transition: transform .5s;
	top: -25px;
}

#seemore{
		z-index: 1;
	position:absolute;
	max-width:200px;
	height: auto;
	bottom:5%;
	left: 50%;
	transform: translate(-50%);
	opacity: 70%;
	text-decoration: none;
	transition: transform .5s;
	font-family: 'Shadows Into Light', cursive;
	color: black;
}

h4{position: absolute;
	width: 150px;
	top: -75px;
	left: 50%;
	transform: translate(-50%);
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;}

h5{
	z-index: 1;
	color:grey;
	position: absolute;
	left: 50%;
	transform:translate(-50%);
	top: 50px;
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 30px;
	filter: drop-shadow(10px 10px 10px grey);
}

#slide1{
	scroll-behavior: smooth;
	
}

#arrow:hover{
	opacity: 100%;
}


#seemore:hover{
	transform: translate(0px, -15px);
	opacity: 100%;
	
}



@media only screen and (max-width: 600px) {
	h5{font-size: 25px;}}


@media only screen and (max-width: 600px) {
	h1{font-size: 40px;}}

@media only screen and (max-width: 600px) {
	.scroll1{height:900px;}
	#button{background-color: bisque;}}


@media only screen and (max-width: 600px){
	.dropdown-content{background-color: transparent;}
	.dropdown-content a{color: black;}}


@media only screen and (max-width: 600px) {
	#logo{left: 20%;}
	h2{top: 220%;}
	#button{top: 260%;}}


.dropdown-content a:hover{color:gray;}

.dropdown:hover .dropdown-content {display: block;}