/* defines colours used throughout the stylesheet*/
:root {
	--back-color: white;
	--fore-color: #076ae1;
}

/* Displays only on big screens */
/* Put only things that change if the screen is big here */
@media (min-width: 601px) {
	.logobar {
		position: fixed;
		bottom: 0;
		pointer-events: none;
		right: 0;
		width: 100%;	
		height: 100%;
		background: linear-gradient(80deg, var(--fore-color) 25%, rgba(0,0,0,0) 0%);	
	}

	.logo {
		position: absolute;
		top: 50%;
		margin: 0;
		-ms-transform: translateY(-50%);
    		transform: translateY(-50%);
	}

	.text {
		padding-left: 30vh;
	}

	.grid-container {
		display: inline-grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 75px;
	}
}

/* Displays only on small screens */
/* Put only things that change if the screen is small here */
@media (max-width: 600px) {
	.logobar {
		position: relative;
		background-color: var(--fore-color);
		width: 100%;
	}

	.logo {
	}

	.text {
		padding-left: 0px;
	}
}

h1 {
	padding-top: 5vh;
}

h2 {
	padding-top: 8vh;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li {
	padding: 2px;
}

a {
	font-family: Tahoma, sans-serif;
}

/* unvisited link */
a:link, a:visited {
  color: #076ae1;
}

/* mouse over link */
a:hover, a:active {
  color: #0728e1;
}

.text-with-border {
	padding: 7px;
	border-width: 2px; 
	border-style: solid;
	border-radius: 10px;
	text-decoration: none;
}

.text {
	text-align: center;
	font-family: Tahoma, sans-serif;
	color: #076ae1;
}