font-face {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-style: normal;
  font-display: fallback;
}



body{
margin: 0px;
padding: 0px;
display:flex;
flex-direction: column;
font-family: Verdana,Arial,Helvetica,sans-serif;
height: 100%;

}

header,
footer {
  flex: none;
  font-size:8px;
  padding-bottom:0px;
  margin-bottom:0px;
  background-color:#577DA8;

}

header {

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  text-align:left;
  max-height: 100px;
  word-wrap: break-word;
}
footer {
  text-align:center;
  color:#FFFFFF;
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
position: relative; bottom: 0px;
  width: 100%;
    word-wrap: break-word;
	max-height:75px;
  margin-top: 500px;
  }

.dictionary{
display: flex;
flex: 1 0 auto;
flex-direction: column;

}

.orta{
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
position: sticky; 
top: 425px;
	min-height:400px;



  
}


.sag,
.sol {
  max-width: 375px;
  padding: 2px;
  


}
.sol {
  order: -1;

}



    a:link {
        text-decoration: none;
		color:#000000;
		padding: 5px 10px;
    }
 
    a:visited {
        text-decoration: none;
    }
 
    a:hover {
        text-decoration: underline;
    }
 
    a:active {
        text-decoration: underline;
    }

.dil {
  font-family: Verdana,Arial,Helvetica,sans-serif;
color:#990000;
text-align:right;
}
.aramak {
border: 2px solid #577DA8;
border-radius: 5px 5px 5px 5px;
}
.hata {
border: 2px solid black;
min-width:100%;
height:5em;
padding-top:2em;
text-align:center;
}
  .kelime {
color:#FFFFFF;
font-size:18px;
word-wrap: break-word;
}
.usth1 {
text-align:center;
  word-wrap: break-word;
  top: 0px;
  font-size:12px;
  }

#ccdfff {
background:#ccdfff;
}
#f0f1f2 {
background:#f0f1f2;
}


.the-flex {
  display: flex;
  width: 100%;
  background:#8fb1d8;
  min-height:32px;
  padding: 5px 10px; 
  color:#FFFFFF;
  word-wrap: break-word;
}
.the-flex > li {
  flex: 1 1 auto;
}



/* basic styles */

* {
  box-sizing: border-box;
}




ul {
  margin: 0 0;
  padding: 0;
  list-style-type: none;
  border: 1px solid black;
  border-color:#999999;
  
}

li {
  text-align:left;
  min-width:50%;
}
li>a {
  display: block;
  
}








.arama {

  display: grid;
  align-items: center;
  height:120px;

}

form {
  display: flex;
  flex-direction: column;
  margin-bottom: .5rem;
  height:120px;
}

form > input {
    flex: 1 1 10ch;

  }


input {
display: flex;
flex-direction: column;
  border: none;
  background: hsl(0, 0%, 93%);
  border-radius: .25rem;
  width:100%;
  font-size: 14px;

  
  
}

input[type="submit"] {
display: flex;
flex-direction: column;
    background: hotpink;
    color: white;
    box-shadow: 0 .75rem .5rem -.5rem hsl(0, 50%, 80%);
	width:100%;
  }


select,
option {
display: flex;
flex-direction: column;
box-shadow: 0 .75rem .5rem -.5rem hsl(0, 50%, 80%);
  background: hsl(0, 0%, 93%);
  border-radius: .25rem;

  flex: 1 1 10ch;
  width:100%;

  
  }
.kutu {

  border: 2px solid #00B4CC;


  border-radius: 5px 5px 5px 5px;

  }
















@media (min-width: 430px) {
body{
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-style: normal;
  font-display: fallback;
	}
  .dictionary {
    flex-direction: row;
  }
  .header {
  height:100px;
  word-wrap: break-word;
  }
  .orta {
    flex: 1;
    padding: 10px;
    margin: 0;
	position: sticky; 
	top: 400px;
	min-height:400px;


  }
  .sol, .sag {
    flex: 0 0 12em;
  }
  .footer {
  max-height:75px;
  position: relative; bottom: 0px;
  width: 100%;
  margin-top: 500px;
  }
  
  
  
  

}