/* Apply the Montserrat font globally */
body {
	font-family: "Montserrat", sans-serif;
	margin: 0;
	padding: 0;
	background-color: #e6eff5;
	text-align: center;
	color: #6a9bc7;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	padding: 0 20px; /* Padding for mobile devices */
	box-sizing: border-box;
}

.logo img {
	max-width: 75%;  /* Makes logo responsive */
	height: auto;     /* Maintain aspect ratio */
}

/* Unique style for the h1 */
h1 {
	color: #7fa8ce;
	font-weight: 300; 
	font-size: 2em;  /* Scalable font size */
}

p {
	color: #95b6d5;
	font-size: 1.2em;  /* Scalable font size */
}

.button {
	margin-top: 20px;
	padding: 10px 20px;
	font-size: 18px;
	color: white;
	background-color: #6a9bc7;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.3s;
}

.button:hover {
	background-color: #4a7ea3;
}


/* Netue logo styles (three horizontal lines) */
.logo-netue {
    position: absolute;
    top: 10px; /* Adjust to move the logo up/down */
    right: 10px; /* Adjust to move the logo left/right */
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer; /* Indicates that it's clickable */
    transition: transform 0.3s ease; /* Optional: add a smooth transform effect */
}

.logo-netue:hover {
    transform: scale(1.1); /* Slightly enlarge the logo on hover */
}

/* Line styles for the Netue logo with lighter color */
.line {
    width: 100%;
    height: 3px; /* Height of each line */
    background-color: #4a7ea3; /* Lighter blue color */
    border-radius: 2px; /* Rounded edges for a smoother look */
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
	h1 {
		font-size: 1.5em;  /* Smaller font size for small screens */
	}

	p {
		font-size: 1em;  /* Smaller font size for small screens */
	}

	.button {
		font-size: 16px;  /* Adjust button text size */
		padding: 8px 15px;  /* Adjust button padding */
	}
}

/* Style for the footer */
.footer {
	margin-top: 20px;
	font-size: 0.9em;
	color: #95b6d5;
}

.footer .trademark {
	font-weight: bold;
	font-size: 1.1em;
}

.footer .developed {
	font-style: italic;
}