@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap');

body{margin:0; padding:0; font-family:Calibri, sans-serif; background-color:#f8f8f8;}
.content{width:100%; height:100vh; display:flex; justify-content:center; align-items:center; color:#fff;}
.content .login{width:700px; height:auto; background-color:#f1f1f1; border-radius:10px; overflow:hidden;}
.content .login .form{width:calc(35% - 60px); padding:30px; height:220px; 
                      float:left; background-color:#0e0e13;}
.content .login .logo{width:65%; height:270px; float:left; text-align:center; display:flex; justify-content:center; align-items:center;}
.content .login .logo img{width:60%;}
.btnGiris, a.btnGiris {
    padding: 10px 15px 10px 15px;
    float: left;
    background-color: #009873;
    border-radius: 10px;
    color: #0e0e13;
    font-size: 13px;
    display: block;
    cursor: pointer;
    border: 1px #009873 solid;
    transition: all .5s ease-in-out;
}
.btnGiris:hover, .btnGiris:active, 
a.btnGiris:hover, a.btnGiris:active {background-color: #0e0e13;color: #fff;
text-decoration: none;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}

@media (max-width: 800px) {
    .content .login{width:80%;}
    .content .login .form{width:calc(100% - 60px); float:none; height:auto; display:block; overflow:hidden;}
    .content .login .logo{width:100% !important; float:none; }
    .content .login .logo img{width:80%;}
}