:root{
	--light-red: #5d231b;
	--red: #cc2c1c8c;
	--background-color: #171616;
	--text-color: #ddd;
	--link-color: #5050b9;
	--link-hover-color: #2b12d5;
}

@media screen and (prefers-color-scheme: light) {
	:root{
		--light-red: #ffe3df;
		--red: #f65;
		--background-color: #fff;
		--text-color: #222;
		--link-color: #44f;
		--link-hover-color: #2b12d5;
	}
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body, td{
	font-size: 19px;
}
body{
	margin: 10px auto;
	background-color: var(--background-color);
	color: var(--text-color);
/*	max-width: 700px;*/
	font-family: Sans-Serif;
}
h3{
	text-align: center;
}
a{
	color: var(--link-color);
	font-weight: bold;
}
a:hover{
	color: var(--link-hover-color);
}
.button{
	text-decoration: none;
	background: var(--link-color);
	color: var(--text-color);
	padding: 2px 6px;
	border-radius: 10px;
	border: none;
	font-weight: 800;
}
.button:hover{
	background: var(--link-hover-color);
	color: var(--background-color);
}
header{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	padding-bottom: 4px;
	margin-bottom: 8px;
	border-bottom: 3px solid var(--text-color);
}
header a{
	text-decoration: none;
	margin:0 8px;
}
form p{
	margin: 10px 0 7px 0;
}
label{
	display: inline-block;
	width: 126px;
	font-weight: bold;
	text-align: right;
	vertical-align: top;
}
select, input, textarea{
	width: 30vw;
	background: var(--background-color);
	color: var(--text-color);
	border-radius: 6px;
	font-size: 19px;
}
input[type=checkbox]{
	width: initial;
}
input[type=submit]{
	font-weight: 800;
	width: calc(30vw + 134px);
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 10px;
}
input[required]:invalid{
	background: var(--light-red);
}
form.singlebutton {
	display: inline;
}
form.singlebutton input[type=submit]{
	width: initial;
	font-size: 19px;
	margin: revert;
	padding: revert;
}
content{
	margin: auto;
	display: block;
	width: max-content;
}
table{
	margin: auto;
	border-collapse: collapse;
}
thead tr{
	border-bottom: 2px solid var(--text-color);
}
td{
	padding: 3px;
}
th{
	padding: 5px;
}

.galery{
	max-width: 650;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 1fr;
}
.galery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flag{
	font-weight: bold;
}
.red{
	background: var(--red);
}
.text-center{
	text-align: center;
}
.text-right{
	text-align: right;
}