styl.css

html{
    height: 100%;
}
body{
    min-height: 100%;
    margin: 0;
    font-family: 'Arial';
    display: flex;
    flex-direction: column;
}
#tabela-text{
    flex-direction: row-reverse;
}
#main-hello{
    width: 100%;
    color: white;
    background-color: #2A3A3B;
    font-size: 350%;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
#animation{
    width: 100%;
}
#user, #shop{
    width: 50%;
    text-align: center;
    float:left;
}
#user a,#shop a{
    text-decoration: none;
    color:black;

}
#user h2,#shop h2{
    transition: 2s;
}
#user:hover h2, #shop:hover h2{
    font-size:200%;

}
#user img, #shop img{
    height: 35%;
    width: 35%;
    transition: 2s;
}
#user:hover img, #shop:hover img{
    height: 50%;
    width: 50%;
}
.btn{
    border: 2px solid #981816;
    background-color: white;
    transition: 1s;
    color: #981816;
    width: 145px;
    height: 40px;
    cursor: pointer;
}
.btn:hover{
    background-color: #981816;
    color: white;
}
#menu-markt{
    width: 100%;
    height: 40px;
}
#menu-markt-1, #menu-markt-2,#menu-markt-3,#menu-markt-4{
    width: 25%;
    float:left;
    text-align: center;
    font-size:30px;
    border-left: 2px solid #981816;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: 1s;
    cursor: pointer;
    border-left: 2px solid #981816;
    border-top: 2px solid #981816;
    border-bottom: 2px solid #981816;
}
#manu-markt-4{
    border-right: 2px solid #981816;
}
#menu-markt-1:hover, #menu-markt-2:hover,#menu-markt-3:hover,#menu-markt-4:hover{
    background-color: #981816;
    color: white;
}
#menu-markt-1:hover a, #menu-markt-2:hover a,#menu-markt-3:hover a,#menu-markt-4:hover a{
    color: white;
}
#menu-markt a{
    text-decoration: none;
    color: black;
}
#markt-items{
    text-align: center;
    margin-top: 10px;
}
#markt-login
{
    width: 100%;
    background-color: #2A3A3B;
    color: white;
    font-size: 35px;
    padding-top: 15px;
    padding-bottom: 15px;
}
#markt-login-login{
    text-align: center;
    width: 90%;
    float: left;
}
#markt-menu{
    width: 10%;
    text-align: right;
    float:left;
    color:white
}
#markt-avilible{
    font-size:30px;
    color:#981816;
    text-align: center;
    font-weight: bold;
}
#markt-table{
    width: 100%;
    margin-top: 15px;
}
#markt-table table{
    border: 1px solid black;
    border-collapse: collapse;
    margin-right: auto;
    margin-left: auto;
}
#markt-table td{
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
}
#markt-table th{
    border: 1px solid black;
}
#markt-table tr{
    transition: 1s;
}
#markt-table tr:hover{
    background-color: #981816;
}
#btn_buy{
    background-color: white;
    color:black;
    transition: 1s;
}
#btn_buy:hover{
    background-color: black;
    color:white;
    cursor:pointer;
}
#login-main{
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    background-color: #2A3A3B;
    color:white;
}
#login-data{
    width: 100%;
}
#login-data table{
    margin-left: auto;
    margin-right: auto;
}
.aclass{
    color:cornflowerblue;
    text-align: center;
}
.aclass:hover{
    color:midnightblue;
    transition: 1s;
}
.sbm{
    background-color : white;
    color:black;
    border: 2px solid #981816;
    transition: 1s;
}
.sbm:hover{
    background-color:#981816;
    color:white;
    cursor: pointer;
    border: 2px solid black;
}
#register-register{
    margin-left: auto;
    margin-right: auto;
}
#register-register h1{
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}
#register-register a{
    text-decoration: none;
    color:black;
}
#add-table{
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}
#charge-main{
    text-align: center;
    width: 100%;
}
#charge-main h3{
    margin-top: 30px;
    margin-bottom: 20px;
}
.fontt{
    font-weight: bold;
}
#account-ttable{
    margin-right: auto;
    margin-left: auto;
}
#account-ttable table{
    border-collapse: collapse;
}
#account-ttable th{
    border: 1px solid #2A3A3B;
}
.account-t{
    border:1px solid black;
}
#account-info-info{
     /*margin-bottom: 20px;*/
     /*text-align: center;*/
     /*width: 100%;*/
     /*float:left;*/
     /*background-color: #2A3A3B;*/
     /*font-size: 35px;*/
    width: 100%;
    background-color: #2A3A3B;
    color: white;
    font-size: 35px;
    padding-top: 15px;
    padding-bottom: 15px;
 }
#account-info{
    /*text-align: center;*/
    /*width: 90%;*/
    /*color:white;*/
    /*float:left;*/
    /*padding-top:20px;*/
    /*padding-bottom: 20px;*/
    text-align: center;
    width: 90%;
    float: left;
}
#account-table{
    width: 100%;
}
#account-table-table{
    margin-left: auto;
    margin-right: auto;
}
#account-item-text{
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 15px;
    background-color: #2A3A3B;
    color:white;
}
footer{
    width: 100%;
    margin-top: auto;
    background-color: #24292f;
    height: 200px;
}
#register-reg{
    width: 100%;
    text-align: center;
    background-color: #2A3A3B;
    color:white;
    margin-bottom: 30px;
}
#menuu{
    display: block;
    position:fixed;
    right: 0;
    transition: 2s;
    opacity: 0;
    width:0;
    height:100%;
    background-color: #323F45;
    color:white;
    /*display: none;*/
}
.menuu{
    display: block;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid white;
    text-align: center;
    cursor: pointer;
}
.menuu:hover{
    background-color: burlywood;
    transition: 1s;
}
.menuu:first-child{
    border-top:1px solid white;
}
.menuu:last-child{
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}
.markt-th{
    color:#981816;
}
.menu-block
{
    display: block;
    position: absolute;
    right: 3%;
    top: 0;
    color: white;
    font-size: 40px;
    padding-top: 30px;
    padding-bottom: 20px;
    background-color: #2A3A3B;
    border: 1px solid #2A3A3B;
    border-radius-bottomleft: 20%;
    border-radius-topleft: 20%;
    cursor: pointer;
}
.title-main{
    font-size: 50px;
    width: 100%;
    color: white;
    background-color: #2A3A3B;
    padding-top: 20px;
    padding-bottom: 20px;
}
#charge-table{
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
}