@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
body{
		color: #190f73; /*"color: red;"teksti värv*/
	background-color: #F0FFFF; /*taust*/
}
html{
	background-color: #F0FFFF; /*taust*/
    width: 100%;
    height: 100%;
}
header, footer{
	width: 60%;
	border: 3pt inset #cc7a1a; /*double, dashed, dotted*/
	text-align: center;
    margin-top: 2%;
	margin-left: 20%; /*от края*/
	border-radius: 10px;
    font-family: 'Courier New', monospace;

}
header{
    font-size: 21px;
    letter-spacing: 0.08cm;
    padding: 16px 0px 16px 0px;
}
/*navigeerimis menüü*/
nav{
	margin: 1%;
	text-align: center;
}

nav ul li {
	display: inline;
	margin: 10px; /*расстояние панели до всех объектов*/
	text-align: center;
	background-color: #F0F8FF;
	
}
nav a{
	font-variant: small-caps;
	letter-spacing: 0.1cm;
	text-decoration: none;
	font-family: 'Rubik', sans-serif;
    padding: 10px; /*расстояния текста от рамки*/
    border-right: 2pt solid #cc7a1a;
	border-left: 2pt solid #cc7a1a;
    transition-duration: 0.5s;
}
nav ul a:hover{
    border-right: 2pt solid #F0FFFF;
	border-left: 2pt solid #F0FFFF;
    border-bottom: 2pt solid #cc7a1a;
}
a:active, a:visited, a:link{
	color:#331f66;
	font-size:12pt;
	font-family: 'Rubik', sans-serif;
}
section{
	font-variant: small-caps;
	letter-spacing: 0.05cm;
	display: inline;
	margin: 1%;
	text-align: center;
	font-family: 'Rubik', sans-serif;
}
section h3{
	border-top: 2pt ridge  #cc7a1a;
	margin: 2%;
	font-family: 'Rubik', sans-serif;

}

/*Ülesanne.
1. OMA CSS kujundus
2. lisada section kujundus
3. avaleht.html <main> elementi sisu (tekst, pilt)*/
section_avaleht{
	font-variant: small-caps;
	letter-spacing: 0.03cm;
	display: inline;
	margin: 1%;
	text-align: center;
	font-family: 'Courier New', monospace;
}
footer{
	margin-top: 30%;
	
}
.centerpic {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 30%;
}
input[type=button], .toggle-btn{
	display: block;
	background-color: #7b38d8;
	border-radius: 10px;
	border: 4px double #cccccc;
	color: #eeeeee;
	text-align: center;
	padding: 20px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
	width: 7%;
	font-size: 16px;
}
#animation{
	background: #225;
	height: 50px;
	width: 50px;
	border-radius: 90px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}