body {
    background-color: #c0c0c0;
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
}
#niebieskiProstokat {
    width: 100%; 
    height: 400px; 
    background-color: #0077bb; 
    text-align: center;
}
#napis {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 30px;
    height: 50px;
}
#napis2 {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 30px;
    height: 50px;
}
#napis3 {
    color: black;
    font-family: Arial, sans-serif;
    font-size: 50px;
    height: 50px;
    margin-top: 30px;

}
#cyjanPasek {
    width: 100%;
    height: 10px; 
    background-color: #289dcc; 
}
#pasek-egzamin {
    width: 100%;
    height: 50px;
    background-color: #232323;
    color: white;
    font-family: Arial, sans-serif;
    margin: auto;
    text-align: center; 
    font-size: 24px;
}
#ogolne{
    margin-top: 10px;
    width: 100%;
    height: 40px;
    text-align: center;
    word-spacing: 60px;
}
#dom {
    position: absolute;
    top: 410px;
    left: 0%;
}
#test{
    width: 44px;
    height: 46px;
    background-color: #289dcc;
    position: absolute;
    top: 410px;
    left: 48px;
}
.zakladki{
    display: inline-block;
    line-height: 50px;
    width: 11%;
    background-color:  #232323;
    font-weight: bold;
    color: gray;
    text-align: center;
    margin-top: 0%;
}
.zakladki1{
    display: inline-block;
    line-height: 50px;
    width: 13%;
    background-color:  #232323;
    font-weight: bold;
    color: gray;
    text-align: center;
    margin-top: 0%; 
}

.zakladki:hover{
    color: white;
}
.zakladki1:hover{
    color: white;
}
.b1{
    color: white;
}
.b1:hover{
    color: gray;
}
.p1{
    text-align: center;
    width: 50%;
    font-size:x-large;
    margin-left: auto; 
    margin-right: auto; 
}
.p2{
    width: 100%;
    font-size: 30px;
    text-align: center;
    word-spacing: 10px;
    margin-left: auto; 
    margin-right: auto; 
}
.p3{
    width: 42%;
    font-size: 30px;
    color: #0077bb;
    margin-left: auto; 
    margin-right: auto; 
}
.p4{
    width: 50%;
    font-size: x-large;
    text-align: center;
     
}
.p5{
    width: 50%;
    font-size: large;
    text-align: center;
    margin-left: auto; 
    margin-right: auto; 
}
.p6{
    width: 100%;
    font-size: 30px;
    text-align: center;
    word-spacing: 10px;
    margin-left: auto; 
    margin-right: auto; 
}
.a2{
    color: #0077bb;
    font-size: 30px;
}
.a3{
    color: black;
    font-size: 22px;
}
.a4{
    color: #0077bb;
}
a:hover {
    color: gray;
}
.linia{
    width: 42%;
    height: 3px;
    background-color: #0077bb;
    margin-left: auto; 
    margin-right: auto; 
}

ol {
    list-style-type: none;
    padding: 0;
}
 
ol li {
    display: inline-block;
    position: relative;
}

ol li a {
    text-decoration: none;
    color: white;

}

ol li ol {
    display: none;
    position: absolute;
    z-index: 1;
}

ol li:hover ol {
    display: block;
    background-color: #232323;
}

ol li ol li {
    display: block;
    margin-right: 0%;
}
.ang{
    text-align: center;
    width: 158%;
    margin-left: -37px;
}
.pol{
    text-align: center;
    width: 232%;
    margin-left: -60px;
}
.mat{
    text-align: center;
    width: 124%;
    margin-left: -20px;
}
.niem{
    text-align: center;
    width: 166%;
    margin-left: -40px;
}
.his{
    text-align: center;
    width: 128%;
    margin-left: -27px;
}
.ang1{
    color: black;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
}
.ang2{
    color: black;
    font-weight: bold;
    font-size: 20px;
    width: 100%;
    margin: 0;
    text-align: center;
}
ul{
    color: black;
    display: inline-block;
    text-align: left;
    margin-left: 40%;
}
li{
    font-size: 20px;
}
.img1{
    position: absolute;
    right: 5%;
    top: 55%;
    width: 300px;
    border-radius: 30px;
}