:root {
	/* Primary - logo colors */
	--primary: #3FBDE7;
	--primary-light: #a1e4ff;
	--primary-dark: #14738c;
	
	/* Secondary - purple */
	--secondary: #5069ED;
	--secondary-dark: #4B0082;
	--secondary-light: #C77DFF;
	
	/* Other Logo colors */
	--black: #000000;
	--gray: #222222;
	--gray-light: #2A2A2A;
	--dark-blue: #19192d;

	/* Background */
	--background-1: #1e232e;
    --background-2: #1b202a;
	--background-3: #353f54;
    --background-4: #222834;	

	--background-5: #0e1018;

	--text: rgb(216, 225, 230)
}



ul {
    font-family: "Roboto", sans-serif;
  	font-weight: 400;
  	letter-spacing: 1px;
  	text-align: justify;
	padding-bottom: 2%;
	color: var(--text);
    margin-left: 0%;
    list-style-position: outside;
    padding-left: 1.5rem;
}

h3 {
    text-align: left;
    margin-top: 6%;
}


.cookies {
    margin: 5% 20% 5% 20%;
}

.cookies a{
    color: var(--primary);
    transition: 0.3s;
}

.cookies a:hover{
    color: var(--secondary);
    transition: 0.2s;
}





header {
	width: 94%;
	display: flex;
	padding: 0.5% 3%;
	background: linear-gradient(145deg, var(--background-4), var(--background-3));
	gap: 1%;
	justify-content: right;
	position: sticky;
	top: 0;
	margin: 0%;
	align-items: center;
	z-index: 1000;
	margin-bottom: 0;
}

.logo {
	width: 8%;
}

    .logo img{
        transform: scale(1.0);
		transition: 0.3s;
    }
    .logo img:hover{
        transform: scale(1.2);
		transition: 0.3s;
    }
.language {
	width: 92%;
	text-align: right;
}

h2 {
	font-size: 30px;
}





/* Tablets */
@media screen and (max-width: 1124px) {
	.cookies {
		margin: 5% 10% 5% 10%;
	}

	header {
		width: 94%;
		padding: 0.5% 3%;
	}

	.logo {
		width: 12%;
	}

	.language {
		width: 88%;
		text-align: right;
	}

}

/* Mobile devices */
@media screen and (max-width: 767px) {
	.cookies {
		margin: 10% 5% 20% 5%;
	}

	header {
		width: 94%;
		padding: 3% 3%;
	}

	.logo {
		width: 18%;
	}

	.language {
		width: 82%;
		text-align: right;
	}
}