* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}




a{
  text-decoration: none;
}
ul{
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  list-style: none;
  width: 50%;
}
li{
  margin: 10px;
}
.menu{
  display: flex;
  align-items: center;
  justify-content: space-around;

}
.logo{
    color: blue;
    font-size: 30px;
}


.flex-nav{
  display: flex;
  justify-content: space-between;
  padding: 20px 30px;
}
.toggleNav { display: none; }
.flex-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.flex-nav li {
    flex: 3;
}


.drakon h1{
	font-size: 50px
}

.drakon{
	width: 100%;
	text-align: center;
}
.text{
	padding-bottom:40px;
	padding-top:60px;
	margin: 0 auto;
	width: 50%;
}

.drakon img{
	width:30%;
}

h2{
	font-size: 30px;
	padding-top: 80px;
	text-align: center;  
	padding-bottom: 40px;
}

.maincard{
	text-align: center;
	padding: 0px 200px;
	width: 100%;
	grid-gap: 50px;
	justify-content: center;
	display: grid;
	grid-template-columns:1fr 1fr 1fr;
}

.first{
-webkit-box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
-moz-box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
	border: 1px solid;
	border-color:rgba(0,0,0,0.5);
}

.two{
-webkit-box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
-moz-box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
	border: 1px solid;
	border-color:rgba(0,0,0,0.5);
}

.ther{
-webkit-box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
-moz-box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
box-shadow: 0px 0px 9px 1px rgba(181,181,181,0.59);
	border: 1px solid;
	border-color:rgba(0,0,0,0.5);
}

.mark{
	padding-top: 20px;
	font-size: 20px;
	color:black;
}

.span1{
	color:rgba(0,0,0,0.5);
}

.thing,.tools{
	padding-top: 20px;
	color:rgba(159,90,253);
}

.text span{
	font-size: 20px;
	color: rgba(0,0,0,0.7);
}

footer{
  margin-top: 60px;
  background-color: #741cff;
}

.mainfoter a,i,h2,li{
  list-style: none;
  text-decoration: none;
  color: white;
}

.info1{
  margin: 0 auto;
  width: 30%;
  justify-content: space-around;
  display: flex;
}

.info2{
  padding-top: 20px;
  margin: 0 auto;
  width: 20%;
  justify-content: space-around;
  display: flex;
}

.info3{
  opacity: 0.5;
  font-size: 15px;
  padding-top: 20px;
  margin: 0 auto;
  width: 20%;
  justify-content: space-around;
  display: flex;
  padding-bottom: 45px;
}


.info1 a:hover{
  transition: all 0.3s ease-out;
  color:#EE7930;
}

.info2 a:hover{
transition: all 0.3s ease-out;
  opacity: 0;
}

.projectmain{
	padding-top:50px;
}

.projectmain h1,p{
	text-align: center;
}	

.projectmain p{
	padding-top: 25px;
	font-size: 20px;
 color: rgba(0,0,0,0.7);
}

.conteiner{
	padding-top: 50px;
	display: flex;
	object-fit: contain;
    object-position: 50% 50%;
    justify-content: center;
}


.conteiner img{
	margin-right: 60px;
	width: 25%;
	border-radius: 10%;
}

.text1{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #a8a8a8;
width: 35%;
align-self: center;
padding:120px 0;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(255,183,0,1) 99%, rgba(255,183,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(98%, rgba(255,255,255,1)), color-stop(99%, rgba(255,183,0,1)), color-stop(100%, rgba(255,183,0,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(255,183,0,1) 99%, rgba(255,183,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(255,183,0,1) 99%, rgba(255,183,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(255,183,0,1) 99%, rgba(255,183,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(255,183,0,1) 99%, rgba(255,183,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffb700', GradientType=0 );
}

.text1 h3{
 text-align: center;
 color:rgba(255,195,34,0.9);
 padding-bottom: 35px;
 font-size: 30px;
 align-self: center;
}

.text1 p{
	color: rgba(0,0,0,0.7);
}



.text2{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #a8a8a8;
width: 35%;
align-self: center;
padding:120px 0;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(88,83,255,1) 99%, rgba(88,83,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(98%, rgba(255,255,255,1)), color-stop(99%, rgba(88,83,255,1)), color-stop(100%, rgba(88,83,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(88,83,255,1) 99%, rgba(88,83,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(88,83,255,1) 99%, rgba(88,83,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(88,83,255,1) 99%, rgba(88,83,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 98%, rgba(88,83,255,1) 99%, rgba(88,83,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#5853ff', GradientType=0 );

}

.text2 h3{
 text-align: center;
 color:rgba(255,195,34,0.9);
 padding-bottom: 35px;
 font-size: 30px;
 align-self: center;
}

.text2 p{
	color: rgba(0,0,0,0.7);
}
.skill{
  color: black;}
  



@media all and (max-width: 700px) {
  .flex-nav ul { display: none;
    flex-direction: column;
    order: 1;}
  .toggleNav { display: block; order:2;}
  .flex-nav li { flex-basis: 100%; margin-top: 50px}
  .wrapper{
    display: flex;
    flex-direction: column;

}
 .info1{
  margin: 0 auto;
  width: 30%;
  justify-content: space-around;
  display: flex;
  flex-direction: column;
}
.maincard{
	text-align: center;
	padding: 0px 50px;
	width: 100%;
	grid-gap: 50px;
	justify-content: center;
	display: grid;
	grid-template-columns:1fr;
}
}