html {
  background-image: linear-gradient(to left, darkred, #000080);
  background-repeat: inherit;
}

body {
  background-color: blueviolet;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.esas {
  color: #00ffff;
  border: 5px solid black;
  border-radius: 30px;
  width: 665px;
  height: 50px;

  transition: 3s;
  transition-duration: 3s;
}

.gelecek {
  color: blueviolet !important;
}

.men {
  color: blueviolet;
}

.meqsed {
  position: absolute;
  z-index: auto;
  border: 5px solid black;
  border-radius: 30px;
  display: flow-root;
  margin-top: 20px;
  width: 371px;
  height: 50px;

  transition: 3s;
  transition-delay: 0s;
  transition-duration: 2s;
}
.is {
  color: blueviolet;
}

.meqsed2 {
  color: blueviolet;
}

.meqsed3 {
  color: blueviolet;
}

.bacarmaq {
  color: #00ffff;
}

.duyme {
  color: blueviolet;
}

/*.gmail{
    position: absolute;  
    align-items: center;
    background-color: blueviolet;
    border-color: blueviolet;
    
    border-radius: 30px;
    position: absolute;
    box-shadow: none;
    left:580px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    cursor:auto;
}
.gmail:hover{
    background-color:blue;
    outline: blue;

    animation: rotateScale 5s linear 1; 

   
}*/

.email-button {
  display: inline-block;
  margin: 10px;

  padding: 10px 20px;

  background-color: blueviolet;

  color: #fff;

  text-decoration: none;

  border-radius: 5px;

  font-weight: none;

  position: absolute;

  left: 588px;
}

.email-button:hover {
  opacity: 0.7;
}

.Meqsed {
  border: 5px solid black;
  border-radius: 30px;
  position: absolute;
  left: 400px;
  display: flow-root;
  margin-top: 20px;
  width: 270px;
  height: 50px;

  transition: 3s;

  transition-duration: 2s;
}

.meqsed4 {
  color: #00ffff;
}

.maraqlidir {
  height: 50px;
  width: 300px;
  position: absolute;
  top: 58px;
  left: 690px;
  align-items: center;
  display: flow-root;

  transition: 2s;
  transition-delay: 0s;
  transition-duration: 3s;
}
.maraqli2 {
  color: #00ffff;
  border: 5px solid black;
  border-radius: 30px;
  height: 50px;
  align-items: center;
}

.maraqli3 {
  color: blueviolet;
}

.maraqlidir:hover {
  background-color: rgb(0, 0, 0);

  height: 200px;
  width: 300px;
  border-radius: 30px;
}

.esas:hover {
  background-color: black;

  height: 200px;
  width: 665px;
  border-radius: 30px;
}

.Meqsed:hover {
  background-color: black;

  height: 200px;
  width: 285px;
  border-radius: 30px;
}

.meqsed:hover {
  background-color: black;

  height: 200px;
  width: 380px;
  border-radius: 30px;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: blueviolet;
  color: white;
  border-radius: 70px;
  position: absolute;
  left: 720px;
  bottom: 300px;
}

.fa-twitter {
  background: blueviolet;
  color: white;
  border-radius: 70px;
  position: absolute;
  left: 820px;
  bottom: 300px;
}

.fa-youtube {
  background: blueviolet;
  color: white;
  border-radius: 70px;

  position: absolute;
  left: 920px;
  bottom: 300px;
}

@keyframes RotateScale {
  100% {
    transform: rotate(90deg);
  }
}

.text {
  position: absolute;

  border: 3px solid black;
  background-color: blueviolet;
  border-radius: 20px;
}

.forma {
  position: absolute;
  left: 1000px;
  top: 110px;
  color: white;
}

.loadingbar {
  position: absolute;
  display: flex;
  left: 1150px;
  top: 240px;
  background-image: url(data:image/jpeg;base64,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);
  width: 100px;
  height: 100px;
  border: 20px solid blueviolet;
  border-top: 20px solid lightblue;
  border-radius: 50%;
  animation: daire 10s linear infinite;
}

@keyframes daire {
  100% {
    transform: rotate(3600deg);
  }
}

.bordering{
  background-color: none;
  width:97.98%;
  position: absolute;
  bottom: 90px;
  border:10px, solid, black;
  border-radius:20px;
  
}


.load{
  background-color: #008075;
  width: 100px;
  height: 40px;
  position: absolute;
  bottom:105px;
  border-radius: 20px;
  animation: ani 5s alternate infinite;
}


@keyframes ani{
  from{
    transform:translateX(0%);
    transform: rotateY(180deg);
    
  }
  to{
    transform: translateX(1250%);
    
  }
}