@import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --cream: #FFF2DC;
  --orange: #FDB557;
  --light-brown: #CF8132;
  --dark-brown: #7D372D;
  --paper: #F3E5C9;
  --white: #ffffff;
  --blue: #7eb4b5;
}

body{
	background-color: var(--cream);
	margin: 0;
	align-items: center;
    display: flex;
    flex-direction: column;
	}

	.content{
		margin: 0 auto;
		display:flex;
		flex-direction: column;
		gap:60px;
		align-items: center;
		background-color: var(--cream);
		padding: 5% 20%;
		position:relative;
		z-index: 1;
	}

	header{
		width: 100%;
		height: 135vh;
		min-height: 500px;
		min-width: 500px;
		position: relative;
		contain: paint;
		position:relative;
		z-index: 1;
	}

	.header-bg{
		background-image: 
		linear-gradient(to top, var(--cream) 0%, #fff0 25%),
		url(image/BG.jpg);
		background-size: cover;       
		background-position: center;
		background-repeat: no-repeat; 
		height: 135vh;
	}

	.header-contents{
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height:100%;
		padding-top:20vh;
	}

	.birdwatcher-logo{
		width:40vw;
	}

	.birdwatcher-logo img{
		width: 100%;
	}

	button, .secondary-button{
		background-color: var(--cream);
		color: var(--dark-brown);
		font-family: "Gaegu";
		font-size: 28px;
		font-weight: bold;
		border-radius: 8px;
		padding: 16px 20px;
		border-style: none;
		transition: 0.3s ease-in-out;
		transform: translateY(0px);
	}

	button:hover, .secondary-button:hover{
		background-color: var(--light-brown);
		color: var(--white);
		transition: 0.3s ease-in-out;
		transform: translateY(-3px);
		cursor:pointer;
	}

	.secondary-button{
		background-color: var(--orange);
		color: var(--dark-brown);
	}

	.secondary-button:hover{
		background-color: var(--light-brown);
		color: var(--cream);
	}

	nav{
        position: fixed;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        animation: fadeIn;
        animation-duration: 0.3s ease-in-out;
        animation-timeline: scroll();
		flex-wrap:wrap;
	}

	nav ul{
		list-style:none;
		display: flex;
		flex-direction: row;
		gap: 2vw;
		align-items: center;
		font-size: 28px;
		color: var(--cream);
		text-transform: none;
		padding-inline-start: 0;
	}

	nav a{
        color: var(--cream);
		text-decoration: none;
		transition: 0.3s ease-in-out;
	}

	nav a:hover{
        color: var(--orange);
		transition: 0.3s ease-in-out;
		transform: translateY(-3px);
	}

    nav img{
        height: 40px;
        filter: invert(80%) sepia(7%) saturate(1335%) hue-rotate(327deg) brightness(121%) contrast(107%);
        transition: 0.3s ease-in-out;
    }

    nav img:hover{
        filter: invert(74%) sepia(36%) saturate(774%) hue-rotate(339deg) brightness(101%) contrast(98%);
        transition: 0.3s ease-in-out;
    }

    /* Animate the navbar bg */
    @keyframes fadeIn {
    0% {
      background-color: none;
    }
    20%, 100% {
      background-color: var(--blue);
    }
    }

	.trailer{
		max-width: 100%;
		min-width: 75%;
        /* margin: -6%; */
        background-image: url(image/videoBG.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
		aspect-ratio: 1920/1080;
	}

    .trailer iframe{
        width: 100%;
        height: 100%;
    }

	.two-column{
		display: flex;
		gap: 8%;
		padding:20px 0;
        position:relative;
        align-items: center
	}

	.two-column-alt{
		display: flex;
		gap: 8%;
		padding: 20px 0;
        align-items: center;
	}

	.paragraph-text{
		width: 50%;
	}

	.photo-gif{
		width:50%;
		height: 100%;
		padding: 25px 25px 40px 25px;
		background: var(--white);
	}

	.gif-1{
		transform:rotate(3deg);
	}

	.gif-2{
		transform:rotate(-3deg);
	}

	.header-photo-container img{
		width:25vw;
		position: absolute;
	}

	/* Teleporter */
	.photo-1{
		transform: rotate(25deg);
		top: 3vh;
		left: -2vw;
	}

	/* Gateway */
	.photo-2{
		transform: rotate(10deg);
		right: 12vw;
		top:80vh
	}

	/* Sandy wormer */
	.photo-3{
		transform: rotate(6deg);
		top: 28vh;
		left: -4vw;
	}

	/* Brown Palm Warbler */
	.photo-4{
		transform: rotate(15deg);
		right: -5vw;
		top: 58vh;
	}

	/* Red bird in forest */
	.photo-5{ 
		transform: rotate(-25deg);
		top: 65vh;
		left: -6vw;
	}

	/* Cabin interior */
	.photo-6{ 
		transform: rotate(15deg);
		top: 74vh;
		left: 14vw;
	}

	/* cabin exterior */
	.photo-7{ 
		transform: rotate(-10deg);
		left: 38vw;
		top: 85vh;
	}

	/* Forest */
	.photo-8{ 
		transform: rotate(-25deg);
		top: 3vh;
		right: -2vw;
	}

	/* Red bird */
	.photo-9{ 
		transform: rotate(-10deg);
		top: 25vh;
		right: -4vw;
	}

	.team-description{
		width: 35%
	}

    .team-photos{
        display:flex;
        flex-direction:row;
        width:65%;
        gap: 40px;
    }

    .profile{
        display: flex;
        flex-direction: column;
        gap: 8px;
		align-items: center;
    }

    .team-profile{
        background-color: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        gap: 8px;
		width: min-content;
    }

    .team-profile img{
        width:250px;
    }

    .job-role{
        text-align: center;
    }

	.reuben{
		transform:rotate(-3deg);
	}

	.ann{
		transform:rotate(3deg);
	}
	.newsletter-signup{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		background-color: var(--paper);
		width: 600px;
    	padding: 40px;
	}

	/* Styling the mailchimp embed form */
	#mc_embed_shell{
		width: 80%;
	}

	#mc_embed_signup_scroll{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	#mc_embed_signup_scroll > div {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: center;
		gap: 10px;
	}

	.mc-field-group input{
		width:100%;
	}

	#mc_embed_signup_scroll label{
		width: 60%;
	}

	.mc-field-group input{
		border:none;
		background-color: var(--light-brown);
		border-radius: 4px;
		height:24px;
		padding: 4px 8px;
		font-family: "Gaegu";
		color: var(--cream);
		font-size: 24px;
	}


	footer{
		position: sticky;
		position: -webkit-sticky;
		bottom: 0;
		z-index: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 0;
		background-color: var(--orange);
		width: 100%;
	}

	p, a, h1, h2, h3, h4, h5, #mc_embed_shell{
		color: var(--dark-brown);
		font-family: "Gaegu";
        margin:0;
	}

	p, #mc_embed_shell{
		font-size: 24px;
	}

	h1{
		font-size: 48px;
	}

	h3{
		font-size: 36px;
	}

	.newsletter-signup h3 {
		text-align: center;
	}

    h4{
        font-size: 28px;
    }

	a:hover, a > p:hover{
		color: var(--cream);
	}

	.studios-logo{
		width: 20%;
		min-width: 200px;
		height: auto;
	}

	.centre-align{
		text-align: center;
	}

	
	@media (min-width: 630px){

	}

	@media only screen and (max-width: 1024px){
		header{
			min-width: 0;
		}

		.header-bg{
			height: 100vh;
		}

		.header-photo-container img{
			width: 35vw;
		}

		.header-contents{
			padding-top: 35vh;
		}

		nav{
		}

		nav ul{
			flex-wrap:wrap;
			justify-content: center;
			gap: 10px 20px;
			padding: 0 15vw;~
		}

		.birdwatcher-logo {
			width: 75vw;
		}

		/* Teleporter */
		.photo-1{
			top:65vh;
		}

		/* Gateway */
		.photo-2{
			right: 12vw;
			top:85vh
		}

		/* Sandy wormer */
		.photo-3{
			top: 75vh;
			left: 15vw;
		}

		/* Brown Palm Warbler */
		.photo-4{
			right: -5vw;
			top: 80vh;
		}

		/* Red bird in forest */
		.photo-5{ 
			top: 80vh;
			left: -6vw;
		}

		/* Cabin interior */
		.photo-6{ 
			top: 85vh;
			left: 14vw;
		}

		/* cabin exterior */
		.photo-7{ 
			left: 38vw;
			top: 80vh;
		}

		/* Forest */
		.photo-8{ 
			top: 65vh;
			right: -2vw;
		}

		/* Red bird */
		.photo-9{ 
			top: 72vh;
			right: 10vw;
		}

		.content{
			gap: 20px;
			padding: 5% 10%;
			justify-content: center;
		}
		.two-column, .two-column-alt, .team-photos{
			flex-wrap:wrap;
			gap: 40px;
		}

		#paragraph-2{
			flex-flow: column-reverse;
		}

		.photo-gif{
			width: 85%;
		}

		.trailer, .paragraph-text{
			width:100%;
		}

		.trailer{
			padding: 0;
			height:25vh;
		}

		.team-description{
			width:100%;
		}

		.team-photos{
			width: 100%;
			justify-content: center;
		}

		.team-profile img {
    		width: 150px;
		}

		.newsletter-signup{
			width: 60vw;
		}
	}