body {
	font-family:Helvetica;
	background-image: linear-gradient(#a5d4d3, #F7F1F1, #F0F0F0);
	background-repeat: no-repeat;
	background-attachment: fixed;

}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.btn{
background-color:green;
color:white;
width:100%;
    	animation: fadein 1.5s;
       -moz-animation: easeout	 0.5s; /* Firefox */
       -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -o-animation: fadein 0.5s; /* Opera */
}
.input {
	background-color:transparent;
	border-bottom: 1px solid grey;
	border-radius:10px;
	border-top:none;
	font-weight:normal;
	width:90%;
	padding:5px;
	}
.btn:hover{
background-color:blue;
color:white;
width:100%
}

div.container{
  display: grid;
  justify-content: center; /* yatay ortalama */
  align-items: center;     /* dikey ortalama */
  height: 100%;           /* tüm ekran yüksekliği */
}

table.container{
color:black;
background-color:#F0F4FF;
border-radius:5px;
    	animation: fadein 0.5s;
       -moz-animation: fadein	 0.5s; /* Firefox */
       -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -o-animation: fadein 0.5s; /* Opera */
}

.alert {
    position:fixed;
    top:0;
    display:grid;
    align-items: center;     /* dikey ortalama */
    justify-content: center; /* yatay ortalama */
	background-color:red;
	color:white;
	width:100%;
	text-align:center;
	border-radius:10px;
	    	animation: fadein 0.5s;
       -moz-animation: fadein	 0.5s; /* Firefox */
       -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -o-animation: fadein 0.5s; /* Opera */
}

       /*
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
      /*
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
@media only screen and (max-width: 680px), (min-device-width: 760px) and (max-device-width: 1024px) {
	
.btn{
background-color:green;
color:white;
height:50px;
border-radius:10px;
width:100%;
    	animation: fadein 1.5s;
       -moz-animation: easeout	 0.5s; /* Firefox */
       -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -o-animation: fadein 0.5s; /* Opera */
}

.btn:hover{
background-color:pink;
color:white;
width:100%
}

table.container{
	margin:0 auto;
	position:relative;
	margin-top:40%;
	width:100%;
	color:white;
	border-radius:5px;
	background-color: grey;
    	animation: fadein 0.5s;
       -moz-animation: fadein	 0.5s; /* Firefox */
       -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -o-animation: fadein 0.5s; /* Opera */
}

.alert {
	position:relative;
	margin:0 auto;
	background-color:green;
	color:white;
	width:200px;
	text-align:center;
	border-radius:10px;
	padding:0px;
	    	animation: fadein 0.5s;
       -moz-animation: fadein	 0.5s; /* Firefox */
       -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -o-animation: fadein 0.5s; /* Opera */
}