 {/*to delete all default values*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;/*chrome has a default one*/
 }
 
body{
    color: #3a3a3a;
    font: 700 20px Arial, Helvetica, sans-serif;
    background-color: #fafafa;
}
.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px; /*if I add 0 to the right before semicolon, then disappears blue background on the left*/
    /*border-radius: 5;*/
}

header{
    color: #fafafa;
    background-color: #0e2d91;
    text-align: center;
    align-items: center;
    /*overflow-x:visible;*/ /*did not work*/
    /*position: fixed;*/ /*did not work*/
    /*border-radius: 5;*/
}

header .container {
    display: flex;
    align-items: center;
    gap: 10px;
    /*border-radius: 5;*/
}

main .formContainer {
    background-image: url("HeadAndBodyTransparent-2.png");/*, url("1920x1080.png");*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;

}


 img{
    width: 100px;
 }

 h1 {
    font-size:45px;
 }

 /*Main*/

 p {
    margin:20px auto 30 px;
    font-size: 24px;
    text-align: center;

 }

 ul {
   display: table;
   margin: 0 auto;
 }

 form {
    width: 300px;
    margin: 0 auto;
    /*text-align: center;*/
    

 }

 label {
    display: block;
    margin-bottom: 10px;
    /*text-align: center;*/
 }

 input, textarea, select, button {
    /*width: 100%;*/
    display: block;
    margin: 5px 0;
    padding: 4px /*from top*/ 5px;
    border: 1px solid  #0e2d91;
    border-radius: 2px;
    color: inherit;
    font: 400 /*boldness*/ 17px Arial, Helvetica, sans-serif;
    letter-spacing: 0.6px;

 }

 input:focus, textarea:focus, select:focus {
    border-color: #2650d7;
    outline-color: #2650d7;
    border: 1px solid  #2650d7;

 }

 textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
 }

 button {
    display: block;
    width: 150px;
    margin: 15px 0 0 auto;
    padding: 8px;
    border: none;
    border-radius: 2px;
    font: inherit;
    color: #fafafa;
    background-color: #0e2d91;
    transition: .5s;
    cursor: pointer;
 }

 button:hover{
    background-color: #031a65;
    outline-color: #2650d7;
    border: 1px solid  #2650d7;
 }

 input [type="submit"] {
    display: block;
    width: 150px;
    margin: 15px 0 0 auto;
    padding: 8px;
    border: none;
    border-radius: 2px;
    font: inherit;
    color: #fafafa;
    background-color: #0e2d91;
    transition: .5s;
    cursor: pointer;
 }
 input[type="submit"]:hover {
    background-color: #031a65;
    outline-color: #2650d7;
    border: 1px solid  #2650d7;
 }
/*
 header.sticky { //works well, but with mobile better shor header or no sticky header
   position: sticky;
   top: 0;

 }
   
   */
