@font-face {
    font-family: WellFleet;
    src: url("./ttf/Wellfleet-Regular.ttf");
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-size: xx-large;
}

.h3-c {
    text-align: center;
}

a {
    color: #D7A31A;
}

#l {
    text-align: left;
}

#c {
    text-align: center;
}

.zahlavi {
    background-color: #1E3050;
    color: #E4F0FF;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
}
    .zahlavi1 {
        flex: 25%;
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 20px;
    }
    .zahlavi2 {
        flex: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: xx-large;
        padding: 20px;
    }
    .zahlavi3 {
        flex: 25%;
        display: flex;
        justify-content: right;
        align-items: center;
        padding: 20px;
    }
        .zahlavi3 a {
            color:#E4F0FF;
            text-decoration: none;
        }
        .zahlavi3 a:hover {
            color:#D7A31A;
        }

.obsah {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
}
    .obsah1 {
        flex: 67%;
        font-size: xx-large;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        text-align: center;
    }
    .obsah2 {
        flex: 33%;
        font-size: xx-large;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

.obsahlogin {
    width: 50%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    text-align: center;
}
    .obsahlogin form {
        width: 100%;
    }
    .obsahlogin input[type=text] {
        width: 100%;
        padding: 10px;
        font-size: large;
        text-align: center;
    }
    .obsahlogin input[type=password] {
        width: 100%;
        padding: 10px;
        font-size: large;
        text-align: center;
    }
    .obsahlogin input[type=submit] {
        width: 100%;
        padding: 10px;
        font-size: large;
    }

.tabklice {
    border-collapse: collapse;
    width: 100%;
}
    .tabklice tr {
        border:3px solid #4F5E81;
    }
    .tabklice td {
        text-align: center;
        padding: 10px;
    }
    #tabklicezahlavi {
        background-color: #4F5E81;
        color: #E4F0FF;
    }

.tabprofil {
    border-collapse: collapse;
    width: 100%;
}
    .tabprofil tr {
        border:3px solid #4F5E81;
    }
    .tabprofil tr:nth-child(even) {
        background-color: #E4F0FF;
        color:#1E3050;
    }
    .tabprofil td {
        text-align: center;
        padding: 10px;
    }
    #tabprofilzahlavi {
        background-color: #4F5E81;
        color: #E4F0FF;
    }

.prihradkyupravitform {
    width: 50%;
    margin: 0 auto;
}
    .prihradkyupravitform input[type=text] {
        width: 100%;
        padding: 10px;
        text-align: center;
        font-size: x-large;
    }
    .prihradkyupravitform input[type=submit] {
        width: 100%;
        padding: 10px;
        text-align: center;
        font-size: x-large;
        background-color: #4F5E81;
        color: #E4F0FF;
    }

.profilupravitform {
    width: 50%;
    margin: 0 auto;
}
    .profilupravitform input[type=text] {
        width: 100%;
        padding: 10px;
        text-align: center;
        font-size: x-large;
    }
    .profilupravitform input[type=email] {
        width: 100%;
        padding: 10px;
        text-align: center;
        font-size: x-large;
    }
    .profilupravitform input[type=submit] {
        width: 100%;
        padding: 10px;
        text-align: center;
        font-size: x-large;
    }
    .profilupravitform input[type=password] {
        width: 100%;
        padding: 10px;
        text-align: center;
        font-size: x-large;
    }

@media only screen and (max-width: 600px) {
    .zahlavi1 {
        flex: 100%;
        justify-content: center;
        padding: 10px;
    }
    .zahlavi2 {
        flex: 100%;
        padding: 10px;
    }
    .zahlavi3 {
        flex: 100%;
        justify-content: center;
        padding: 10px;
    }
    .obsah1 {
        flex: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .obsah2 {
        flex: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .obsahlogin {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .prihradkyupravitform {
        width: 100%;
    }
    .profilupravitform {
        width: 100%;
    }
}