* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1, h2, p {
    text-align: center;
}

#radioLabel {
    text-align: left;
}

a {
    text-decoration: none;
    color: darkgray;
    transition: 0.36s;
}

a:hover {
    color: rgb(199, 226, 207);
}

#headlineDiv {
    width: 350px;
    box-sizing: border-box;
    margin: 5px auto 5px auto; /* Toto by melo vycentrovat kontejner doprostred (horizontalne) */
}

#formDiv {
    width: 360px;
    background-color: rgb(199, 226, 207, 0.50);
    padding: 15px 20px 20px 20px; /* top+bottom & right+left */
    border: 1px solid darkgray;
    border-radius: 7px;
    box-sizing: border-box;
    margin: auto; /* Toto by melo vycentrovat kontejner doprostred (horizontalne) */
}

#footerDiv {
    color: darkgray;
    font-size: small;
    margin: -5px auto 65px auto;
}

input[type=text] {
    width: 100%;
    padding: 8px;
    margin: 0px auto 12px auto;
    display: inline-block;
    box-sizing: border-box; /* Sirka elementu = padding + margin + width dohromady */
    border: 1px solid darkgray;
    border-radius: 5px; /* Zaoblene rohy ve stylu MS Surface */
    
}

#textLabel {
    display: block; /* Aby fungoval padding, protoze Label je inline element */
    padding-bottom: 2px;
    box-sizing: border-box;
}

label {
    display: inline-block;
    padding-bottom: 3px;
}

/*
-- NEFUNGUJE V MICROSOFT EDGE --
input[type=text]:focus {
    background-color: rgb(70, 120, 200);
}
*/

input[type=email] {
    width: 100%;
    padding: 8px;
    margin: 0px auto 12px auto;
    box-sizing: border-box; /* Sirka elementu = padding + margin + width dohromady */
    border: 1px solid darkgray;
    border-radius: 5px; /* Zaoblene rohy ve stylu MS Surface */
    
}

input[type=tel] {
    width: 100%;
    padding: 8px;
    margin: 0px auto 12px auto;
    box-sizing: border-box; /* Sirka elementu = padding + margin + width dohromady */
    border: 1px solid darkgray;
    border-radius: 5px; /* Zaoblene rohy ve stylu MS Surface */
    
}

input[type=submit] {
    width: 150px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    border: 1px solid darkgray;
    border-radius: 5px; /* Zaoblene rohy ve stylu MS Surface */
    font-weight: 600;
    font-size: large;
    transition: 0.36s;
    position: relative;
    margin: 0px auto 0px auto;
}

input[type=submit]:hover {
    background-color: rgb(199, 226, 207);
    border: 1px solid darkgray;
}

input[type=file]:hover {
    background-color: rgb(199, 226, 207);
    border: 1px solid darkgray;
}

/* Responsive design for mobile devices */
/* Takto se bude chovat na zarizeni s viewportem pod 500px */
@media only screen and (max-width: 500px) {
#headlineDiv {
    width: 95vw;
    margin: auto;
    }
    
#formDiv {
    width: 95vw;
    margin: auto;
    }
    
#footerDiv {
    width: 95vw;
    margin: auto;
    }
}