/* Global styles */
body {
	margin: 0;
	padding: 20px;
	font-family: 'Google Sans', Roboto, Arial, sans-serif;
	background-color: #f5f5f5;  /* Light background for better readability */
	color: #202124;  /* Dark text for contrast */
	line-height: 1.6;  /* Improved text readability */
}

/* Logo section */
.logo {
	display: flex;
	color: #5f6368;
	font-size: 2.5rem;  /* Use rem for better scalability */
	align-items: center;
	font-family: 'Product Sans', Arial, sans-serif;
	margin-bottom: 20px;
}
.logo img {
	width: 5cm;
	margin-right: 12px;  /* Increased margin for better separation */
}

/* Headings */
h1 {
	font-size: 2.5rem;  /* Adjusted for consistency */
	font-weight: 600;  /* Stronger weight for headings */
	margin-bottom: 20px;
	color: #e05813fa;  /* Dark color for better contrast */
}

/* Paragraphs */
p {
	font-size: 1.125rem;
	color: #0f7eae;  /* Using specific color instead of a CSS variable */
	margin-bottom: 20px;
	line-height: 1.8;
}

/* Form styling */
form#new {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;  /* Make the form stack vertically */
	gap: 10px;  /* Add spacing between input and button */
}

/* URL input field */
input[type='url'] {
	font-size: 1rem;  /* Use rem for better scaling */
	border-radius: 6px;  /* Slightly rounded corners for a modern look */
	border: 1px solid #d1d1d1;  /* Softer border color */
	padding: 12px 16px 12px 48px;
	box-sizing: border-box;
	background-color: white;
	background-repeat: no-repeat;
	background-position: 12px center;  /* Centered background icon */
	background-size: 24px;  /* Adjust size of the icon */
	background-image: url('images/link.svg');
	transition: border-color 0.3s ease;  /* Smooth transition on focus */
}

/* Input focus state for accessibility */
input[type='url']:focus {
	border-color: #1773e8;  /* Highlight border on focus */
	outline: none;  /* Remove default outline */
}

/* Button styling */
button {
	border: none;
	padding: 12px 20px;
	font-size: 1rem;
	cursor: pointer;
	border-radius: 5px;  /* Slightly rounded corners for a modern look */
	transition: background-color 0.3s ease;  /* Smooth hover transition */
}

/* Button inside the form */
form#new button {
	color: white;
	background-color: #17e828;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;  /* Slightly bolder text for buttons */
	gap: 10px;  /* Use gap for spacing between text and icon */
    width: 7cm;
    font-size: 1.2rem;
}

/* Button hover and active states */
form#new button:hover {
	background-color: #15c49b;  /* Darker blue on hover */
}
form#new button:active {
	background-color: #f1d41a;  /* Even darker on click */
}
form#new button:focus {
	outline: 2px solid #d35421;  /* Add focus outline for accessibility */
}

/* Button icon */
form#new button img {
	width: 1cm;  /* Define icon size */
    margin-left: 2cm;
}

form#join button {
    background-color: #080bce; /* Couleur verte pour "Join Room" */
    transition: background-color 0.3s ease;
  }

  form#join button:hover {
    background-color: #27a0a9; /* Couleur au survol */
  }

/* Responsive design for small screens */
@media (max-width: 768px) {
	h1 {
		font-size: 2rem;
	}

	input[type='url'] {
		padding: 10px 14px 10px 40px;
		background-size: 20px;
	}

	form#new button {
		font-size: 0.9rem;
		padding: 10px 16px;
	}
}
canvas {
  background: #232323;
  z-index: -1;
  position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
}