@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
:root
{
	/*soda-safer*/
	--bluel:rgb(165,218,243);
	--bluem:rgb(87,196,238);
	--blueh:rgb(30,150,210);
}
html,body
{
	scroll-behavior:smooth;
	font-family: 'Titillium Web', sans-serif;
	margin:0;
	padding:0;
	background:#f4f4f4;
}
header
{
	position:fixed;
	padding:0;
	margin:0;
	width:100%;
	z-index:9001;
	border-bottom:3px solid var(--blueh);
}
nav
{
	padding:10px;
	padding-left:50px;
	padding-right:50px;
	background:#f4f4f4;
	height:100px;
	display:grid;
	grid-template-columns:2fr 1fr;
}
#toggle
{
	display:none;
}
#menu
{
	align-self:center;
}
#menu a
{
	font-size:28px;
	margin-right:30px;
	text-decoration:none;
	color:var(--bluem);
	transition-property:color,font-size,font-weight;
}
#menu a:hover
{
	color:var(--blueh);
	font-weight:700;
}
#menu img
{
	height:20px;
	background:var(--bluem);
	padding:3px;
}
#menu img:hover
{
	height:20px;
	background:var(--blueh);
	padding:3px;
}
#logolink
{
	justify-self:end;
}
#logoimg
{
	height:100px;
}
.anchor
{
	display:block;
	position:relative;
	top:-140px;
	visibility:hidden;
}
#splash
{
	background:url('splash_bg.jpg') center;
	background-size:cover;
	height:100vh;
	display:grid;
	grid-template-columns:1fr;
	border-bottom:3px solid var(--blueh);
}
#backlight
{
	background:var(--blueh);
	opacity:0.85;
	justify-self:center;
	align-self:center;
	text-align:center;
	border-radius:30px;
}
#Stitle
{
	font-size:35px;
	color:white;
	margin:0;
	padding:20px;
	text-shadow:3px 3px var(--bluem);
}
h1
{
	font-size:35px;
	color:var(--blueh);
	text-shadow:2px 2px var(--bluem);
}
h3
{
	font-size:20px;
	color:var(--bluem);
}
.article
{
	width:65%;
	margin:auto;
	border-bottom:3px solid var(--blueh);
}
.article p
{
	color:var(--bluem);
}
.article ul
{
	list-style:inside url("list-style.png");
}
.article ul li
{
	padding:5px;
	color:var(--blueh);
}
.article ul li:nth-child(odd)
{
	color:var(--blueh);
}
.article ul li:nth-child(even)
{
	color:var(--bluem);
}
#vidiya
{
	text-align:center;
	margin-bottom:30px;
}
#vidiyalink
{
	display:none;
}
#vidcsi
{
	width:570px;
	margin:auto;
	background:var(--blueh);
	padding:10px;
}
.gallerygrid
{
	text-align:center;
	margin:auto;
}
.gallerimg
{
	background:var(--blueh);
	max-width:200px;
	margin:10px;
	padding:5px;
	transition:0.25s;
}
.gallerimg:hover
{
	transform:scale(1.1);
}
#Contacts
{
	border-bottom:0;
}
#Contacts a
{
	color:var(--bluem);
}
#Contacts a:visited
{
	color:var(--bluem);
}
#Contacts a:hover
{
	font-weight:700;
}
#szlogo
{
	height:250px;
	position:fixed;
	bottom:0;
	right:0;
}
footer
{
	text-align:center;
	margin:0;
	padding:10px;
	border-top:3px solid var(--bluem);
}
footer img
{
	height:200px;
}
@media(max-width:1000px)
{	
	nav
	{
		padding-left:0px;
		padding-right:25px;
		height:50px;
	}
	#toggle
	{
		padding-left:25px;
		grid-column:1;
		display:block;
		font-size:35px;
		align-self:center;
		justify-self:start;
		cursor:pointer;
		color:var(--blueh);
		border:none;
		background:none;
	}
	#menu
	{
		width:100%;
		background:#f4f4f4;
		grid-row:2;
		position:fixed;
		top:-100%;
		transition:top 350ms 100ms;
		text-align:center;
		border-bottom:3px solid var(--blueh);
	}
	#menu a
	{
		font-size:20px;
		display:block;
		padding:15px;
		border-bottom:3px solid var(--blueh);
		margin-right:0px;
	}
	#menu a:hover
	{
		font-size:20px;
	}
	.anchor
	{
		top:-90px;
	}
	#splash
	{
		height:400px;
	}
	#menu img
	{
		height:25px;
		background:var(--blueh);
		padding:3px;
	}
	#toggle:focus + #menu
	{
		top:73px;
		transition-delay:0;
	}
	#logoimg
	{
		height:50px !important;
	}
	.article
	{
		width:90%;
	}
	#vidiya
	{
		display:none;
	}
	#vidiyalink
	{
		display:block;
	}
	#vidiyalink
	{
		display:block !important;
		color:var(--blueh);
		font-size:20px;
		margin-bottom:20px;
	}
	.gallerimg
	{
		background:var(--blueh);
		max-width:100px;
		margin:5px;
		padding:5px;
		transition:0.25s;
	}
	.gallerimg:hover
	{
		transform:scale(1.0);
	}
	#szlogo
	{
		height:150px;
		position:fixed;
		bottom:0;
		right:0;
	}
	footer
	{
		text-align:left;
		height:150px;
	}
	footer img
	{
		height:100px;
	}
	#footerdiv
	{
		height:100%;
		display:grid;
		grid-template-columns:1fr;
	}
	#footerdiv a
	{
		align-self:start;
	}
	h1
	{
		font-size:30px;
		text-align:center;
	}
	.article p
	{
		font-size:14px;
	}
}