*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}


body{
	--light: #95acda;
	--mid: #3f65ad;
	--dark: #283583;
	--gold: #dbaa50;

	.wrapper{
		height: 100dvh;
		width: 100dvw;
		background-color: var(--dark);
		background: linear-gradient(0deg, var(--dark), var(--mid), var(--light));
		.watermark{
			position: absolute;
			top: calc(50vh - 17.5vw);
			left: 0;
			width: 25vw;
			height: 35vw;
			background-size: contain;
			background-position: 0 50%;
			background-image: url('../assets/Watermark.png');
			opacity: 0.15;
			background-repeat: no-repeat;
			&.right{
				transform: scaleX(-1);
				left: auto;
				right: 0;
			}
		}
		.socials{
			position: absolute;
			top: 30px;
			right: 30px;
			display: flex;
			gap: 10px;
			a.social{
				display: grid;
				place-items: center;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				border: 1px solid white;
				color: white;
				text-decoration: none;
				&:hover{
					background-color: white;
					color: var(--mid);
				}
			}
		}
		.logowrapper{
			min-width: 300px;
			width: 50%;
			margin: 0 auto;
			color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 50px;
			height: 100dvh;
			text-align: center;
			padding: 20px 10px;
			.logo{
				width: 100%;
				background-size: contain;
				background-position: 50% 50%;
				background-image: url('../assets/Logo.png');
				background-repeat: no-repeat;
				height: 200px;
			}
			.info{
				h1{
					font-family: circe, sans-serif;
					font-size: 3rem;
					letter-spacing: 0.1em;
					line-height: 3rem;
				}
				p{
					font-family: circe-rounded, sans-serif;
					font-size: 1.3rem;
				}
				.email{
					font-family: circe-rounded, sans-serif;
					color: var(--gold);
					border-radius: 20px;
					height: 40px;
					display: inline-grid;
					place-items: center;
					padding: 0 20px;
					border: 1px solid var(--gold);
					text-decoration: none;
					margin-top: 20px;
					&:hover{
						background-color: var(--gold);
						color: white;
					}
				}
			}
		}
	}
}

@media (max-height: 450px) {
	body {
	    & .wrapper {
	        & .logowrapper {
	        	gap: 20px;
	            .logo{
	            	height: 120px;
	            }
				.info{
					h1{
						font-size: 2rem;
						line-height: 2rem;
					}
				}
	        }
	    }
	}
}