@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono&display=swap');

* {
	margin: 0;
	padding: 0;
	color: black;
}

body {
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: url(../static/images/q.jpeg);
	background-size: 20%;
	background-repeat: repeat;
	font-size: 22px;

}

a {
	text-decoration: none;
}

input {
	font-size: 20px;
}
/* коммент */
.header {
	width:80%;
	height: 5vh;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: white;
	border-left: 5px solid #0c44b6;
	border-right: 5px solid #0c44b6;
	border-bottom: 5px solid #0c44b6;
	align-items: center;
	font-family: 'Chivo Mono', monospace;
	margin-left: auto;
	margin-right: auto;
}
.header span {
	margin: 0 2vw;
}
.header ul {
	display: flex;
	align-items: center;
	list-style: none;
	height: 100%;
}

.header li {
	display: flex;
	align-items: center;
	height: 100%;
	color: black;
}
.header li:hover {
	background: #0c44b6;
}

.header li:hover a {
	color: white;
}
.header li a {
	padding: 0 2vw;
}

.main {
	width:80%;
	background: white;
	border: 5px solid #0c44b6;
	align-items: center;
	font-family: 'Chivo Mono', monospace;
	margin-top: 2vw;
	margin-left: auto;
	margin-right: auto;
}
.main-page-content {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	align-items: center;
	height: 75vh;
}
.info {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}
.info p  {
	width: 50%;
	text-align: end;
	margin-top: 1vw;
}
.info a {
	margin-top: 2vw;
	padding: 0.8vw 2vw;
	background: #0c44b6;
	color: white;
	border-radius: 10px;
	border: 5px solid #0c44b6;
}
.info a:hover {
	background: white;
	color: black;
}

.main-photo {
	width: 50%;
	display: flex;
	align-items: flex-start;
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width:100%;
	height: 3vw;
	background: white;
	border-top: 5px solid #0c44b6;
	align-items: center;
	font-family: 'Chivo Mono', monospace;
	margin-top: 2vw;
	margin-left: auto;
	margin-right: auto;
	background: #0c44b6;
	text-align: center;
}
.footer p {
	color: white;
}

.projects-page-content {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.card {
	display: flex;
	width: 100%;
	align-items: center;
	margin-top: 2vw;
}
.part{
	display: flex;
	width: 50%;
	flex-direction: column;
	text-align: end;
}
.part:first-child {
	justify-content: flex-end;
	margin-right: 2vw;
}
.part:last-child {
	margin-right: 2vw;
}
.card:nth-child(odd)  .part:first-child{
	order:-1;
	justify-content: flex-end;
	text-align: end;
}


.card:nth-child(even)  .part:first-child{
	order:1;
	justify-content: flex-start;
	text-align: start;
}
.card:nth-child(even)  .part:last-child img{
	order:-1;
	justify-content: flex-end;
	text-align: end;
	margin-left: auto;
}

.part img{
	width: 40%;
	border-radius: 5%;
}
.card:nth-child(odd) .part:first-child p{
	width: 80%;
	margin-left: auto;
}
.card:nth-child(even) .part:first-child p{
	width: 80%;
	margin-right: auto;
}
.card:last-child {
	margin-bottom: 20vh;
}
.part p{
	margin-top: 1vw;
}

.about-page-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.about-page-content p {
	margin: 2vw 0;
	width: 70%;
}
.about-page-content img{
	width: 50%;
	border-bottom: 5px solid #0c44b6;
	margin:2vw 0 ;
}

.about-page-content span{
	border-top: 5px solid #0c44b6;
	margin-bottom: 10vw;
}

h2{
	text-align: center;
}



.form ul {
	list-style: none;          
	padding: 0;                
	margin: 0;    
	padding: 10px;             
}

.form li {
	margin-bottom: 2vw; 
	padding: 10px; 
}


.form label {
	display: block;            
	margin-bottom: 0.5vw;      
	color: #0c44b6;            
	font-size: 1rem; 
}


.form input,
.form textarea {

	width: 90%;               
	padding: 0.8vw 1vw;        
	border: 2px solid #0c44b6; 
	border-radius: 6px;        
	font-size: 1rem;          
	font-family: 'Chivo Mono', monospace; 
	outline: none;  

}


.form input:focus,
.form textarea:focus {
	border-color: #003399;   
	padding: 10px; 

}


.form textarea {
	min-height: 6em;          
	resize: vertical;          
}

.form button {
	padding: 1vw 2vw;          
	font-size: 1rem;           
	color: white;             
	background: #0c44b6;       
	border: none;             
	border-radius: 8px;        
	cursor: pointer;           
	font-family: inherit;
	padding: 10px;     
	min-height: 20px;
	min-width: ; 10px;
}


.form button:hover {
	padding: 10px;
	background: #003399;
	min-height: 20px;
	min-width: ; 10px;       
}


.alert {
	margin: 1vw 0;            
	padding: 0.8vw 1.2vw;      
	border-radius: 6px;        
	font-size: 1rem;           
}

.aidar_error {
  display: flex;
  flex-direction: row;
  justify-content: space-between;  
  align-items: left;
  gap: 200px;  
  width: 100%;  
  padding-bottom: 25px;
  margin: 10px;
}

.aidar_error form {
	display: grid;
	grid-template-columns: 0.2fr 1fr 1fr 1fr 1fr 0.2fr 0.2fr; 
	grid-gap: 5px;
	grid-auto-rows: minmax(50px, auto);
}

.aidar_error button {
	min-width: 50px;
	min-height: 50px;
	font-size: 25px;
}
.id{
	max-width: 50px;
	max-height: 50px;
}

.main{
	text-align: center;
	padding: 10px ;
}
.btn_login{
	color: red;
}