:root {
	--clr-primary-400: #213553;

	--clr-accent-200: hsl(208, 52%, 83%);
	--clr-accent-400: #5DA9EF;
	--clr-accent-500: #202734;
	--clr-accent-600: #3a3b6c;
	

	--clr-neutral-100: #fff;
	--clr-neutral-400: #B0B0B0;
	--clr-neutral-500: #96B9E3;
	--clr-neutral-700: #0d1936;
	--clr-neutral-900: #090c12;

	--ff-primary: Helvetica, san-serif;

	--ff-body: var(--ff-primary);
	--ff-heading: var(--ff-primary);

	--fw-regular: 400;
	--fw-bold: 700;

	--fs-300: 0.8rem;
	--fs-400: 1rem;
	--fs-500: 1.1rem;
	--fs-600: 1.8rem;
	--fs-700: 2rem;
	--fs-800: 2.5rem;
	--fs-900: 3.5rem;

	--fs-body: var(--fs-400);
	--fs-primary-heading: var(--fs-800);
	--fs-secondary-heading:var(--fs-700);
	--fs-nav: var(--fs-500);
	--fs-button: var(--fs-300);

	--size-100: .25rem;
	--size-200: .5rem;
	--size-300: .75rem;
	--size-400: 1rem;
	--size-500: 1.5rem;
	--size-600: 2rem;
	--size-700: 3rem;
	--size-800: 4rem;
	--size-900: 5rem;
}

@media (min-width:50em) {
	:root {
		--fs-body: var(--fs-500);
		--fs-primary-heading: var(--fs-900);
		--fs-secondary-heading: var(--fs-800);
		--fs-nav: var(--fs-300);
	}
}

/* utility classes */

.text-primary-400 {	color: var(--clr-neutral-100);	}

.text-accent-400 {	color: var(--clr-accent-400);	}
.text-accent-200 {	color: var(--clr-accent-100);	}

.text-neutral-100 {	color: var(--clr-neutral-100);	}
.text-neutral-400 {	color: var(--clr-neutral-400);	}
.text-neutral-900 {	color: var(--clr-neutral-900);	}


.bg-primary-400 {	background-color: var(--clr-primary-400);	}

.bg-accent-400 {	background-color: var(--clr-accent-400);	}
.bg-accent-200 {	background-color: var(--clr-accent-100);	}

.bg-neutral-100 {	background-color: var(--clr-neutral-100);	}
.bg-neutral-400 {	background-color: var(--clr-neutral-400);	}
.bg-neutral-900 {	background-color: var(--clr-neutral-900);	}


.fw-bold {	font-weight: var(--fw-bold);	}
.fw-regular {	font-weight: var(--fw-regular);	}

.fs-primary-heading {
	font-size: var(--fs-primary-heading);
	line-height: 1.2;
	margin: 0;
}
.fs-secondary-heading {
	font-size: var(--fs-secondary-heading);
	line-height: 1.1;
}

.fs-300 {	font-size: var(--fs-300);	}
.fs-400 {	font-size: var(--fs-400);	}
.fs-500 {	font-size: var(--fs-500);	}
.fs-700 {	font-size: var(--fs-700);	}

.padding-start-0 {
	padding-block-start: 0 !important;
}

.padding-block-700 {
	padding-block: var(--size-700);
}

.padding-block-600 {
	padding-block: var(--size-600);
}

.padding-block-900 {
	padding-block: var(--size-900);
}

.padding-600 {
	padding: var(--size-600);
}

.container {
	--max-width: 1110px;
	--padding: 	1rem;

	width: min(var(--max-width), 100% - (var(--padding) * 2));
	margin-inline: auto;
}

.accent {
	color: var(--clr-accent-400);
	font-weight: var(--fw-bold);
}

.even-columns {
	display: grid;
	gap: 1rem;
}

@media (min-width: 50em) {
	.even-columns {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

/* Main CSS */
body {
	font-family: var(--ff-body);
	margin: 0;
	background-color: var(--clr-neutral-900);
	scroll-behavior: smooth;
	color: var(--clr-neutral-100);
}

* {
	box-sizing: border-box
}

.head-bar {
	position: fixed;
	width: 100%;
	height: 70px;
	z-index: 998;
	top: 0;
	left: 0;
}

.primary-navigation {
	display: none;
}

.primary-navigation ul {
	display: flex;
    width: 100%;
    justify-content: space-evenly;
    list-style: none;
	margin: auto;
}

.primary-navigation ul li a {
	text-decoration: none;
	color: var(--clr-neutral-100);
	font-weight: var(--fw-bold);
	padding: 1em 0;
	border: 0.2em solid transparent;
}

.primary-navigation ul li a:hover {
	border: 0.2em solid var(--clr-accent-400);
	text-shadow: 0 0 0.25em var(--clr-accent-400); 
}

.contact-btn {
	right: 0;
    position: absolute;
    padding: 1rem;
    margin: 12px 1rem;
    font-weight: var(--fw-bold);
    border: none;
    border-radius: 5px;
}

.start-box {
	width: 100%;
	height: 110vh;
	background-image: linear-gradient(var(--clr-neutral-900), var(--clr-neutral-700), var(--clr-accent-600), var(--clr-neutral-900));
	background-size: cover;
	position: relative;
	overflow: hidden;

}

.logo-main {
	width: 50%;
	height: auto;
	position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%);
	z-index: 999;
}

.logo-shell {
    width: 200px;
    margin: 0 20px;
}

.cloud {
	display: none;
	opacity: 0.5;
}

.button {
	cursor: pointer;
	text-decoration: none;
	border: 0;
	border-radius: 100vmax;
	padding: 1em 2.5em;
	font-weight: var(--fw-bold);
	font-size: var(--fs-button);
	color: var(--clr-primary-400);
	background-color: var(--clr-neutral-100);
}

.button[data-type="inverted"] {
	color: var(--clr-neutral-100);
	background-color: var(--clr-primary-400);
}

.button:hover,
.button:focus-visible {
	background-color: var(--clr-neutral-100);
	color: var(--clr-primary-400);
	scale: 1.05;
	transition: 1s;
}

.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
	background-color: var(--clr-primary-400);
	color: var(--clr-neutral-100);
}

.glass {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

@media only screen and (min-width: 480px) {
	.contact {
		display: none;
	}

	.head-bar {
		display: flex;
	}

	.head-bar .primary-navigation {
		display: flex;
		justify-content: center;
		width: 70%;
	}

	.start-box {
		height: 110vh;
	}

	.cloud {
		position: absolute;
		bottom: 0;
		width: 70%;
		height: auto;
		display: block;
	}

	.cloud-left {
		left: -20%;
	}
	
	.cloud-right {
		right: -20%;
	}
}


.rain {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
  }
  
  .rain.back-row {
	display: block;
	bottom: 60px;
	opacity: 0.5;
  }
  
  .drop {
	position: absolute;
	bottom: 100%;
	width: 15px;
	height: 120px;
	pointer-events: none;
	animation: drop 0.5s linear infinite;
  }
  
  @keyframes drop {
	0% {
	  transform: translateY(0vh);
	}
	75% {
	  transform: translateY(100vh);
	}
	100% {
	  transform: translateY(150vh);
	}
  }
  
  .stem {
	width: 3px;
	height: 60%;
	margin-left: 7px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
	animation: stem 0.5s linear infinite;
  }
  
  @keyframes stem {
	0% {
	  opacity: 1;
	}
	65% {
	  opacity: 1;
	}
	75% {
	  opacity: 0.5;
	}
	100% {
	  opacity: 0;
	}
  }
  
  .scroll-message {
	display: block;
  }

  .chevron {
	position: absolute;
    text-align: center;
    margin: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(0%);
	animation: scrolldown 1.2s ease-in-out infinite;
  }

  @keyframes scrolldown {
			0%{
				transform: translateY(20%);
				opacity: 0.7;
			}
			50%{
				transform: translateY(0%);
				opacity: 0.2;
			}
			100%{
				transform: translateY(20%);
				opacity: 0.7;
			}
		}