#button {  
    width: 100%;
    height: 30px;
}
@media all and (min-width: 500px) {
    #button {
        height: 40px;
    }
}
@media all and (min-width: 700px) {
    #button {
        height: 50px;
    }
}
@media all and (min-width: 900px) {
    #button {
        height: 75px;
    }
}
@media all and (min-width: 1200px) {
    #button {
        height: 100px;
    }
}

.button-link {
    height:100%;
    display: block!important;
    width: 16%;
    float: left;
    background-color: YELLOW;
}

.button-link p{
    font-family: 'Pacifico', cursive;
    margin-top: 10px;
    font-size: 8px;	
}
@media all and (min-width: 500px) {
    .button-link p {
        margin-top: 12px;
        font-size: 10px;;
    }
}
@media all and (min-width: 700px) {
    .button-link p {
        margin-top: 12px;
        font-size: 20px;;
    }
}
@media all and (min-width: 900px) {
    .button-link p {
        margin-top: 20px;
        font-size: 25px;;
    }
}
@media all and (min-width: 1200px) {
    .button-link p {
        margin-top: 25px;
        font-size: 30px;;
    }
}


.tabela {
    margin-top: 10px;
    width:70%;
    margin-left: 15%;
}
.tabela p {
    font-size: 7px;
}
@media all and (min-width: 400px) {
    .tabela p {
        font-size: 8px;
    }
}
@media all and (min-width: 550px) {
    .tabela p {
        font-size: 10px;
    }
}
@media all and (min-width: 700px) {
    .tabela p {
        font-size: 14px;
    }
}
@media all and (min-width: 850px) {
    .tabela p {
        font-size: 17px;
    }
}
@media all and (min-width: 1000px) {
    .tabela p {
        font-size: 20px;
    }
}
@media all and (min-width: 1200px) {
    .tabela p {
        font-size: 24px;
    }
}

.tabela th{
    width: 33.333333%
}
.tabela td{
    width: 33.333333%
}


.tabela2 {
    margin-top: 10px;
    width:70%;
    margin-left: 15%;
    border-style:solid;
    border-width:3px;
    overflow:hidden;
    border-color:black;
}
.tabela2 th {
    width: 40%;
	border-style:solid;
    border-width:1px;
	border-color:black;
	text-align: center;
}
.tabela2 td {
    width: 20%;
	border-style:solid;
    border-width:1px;
	border-color:black;
	text-align: center;
}
.naglowek{
	background-color:purple;
	color:white;	
}

.tabela2 p {
    font-size: 7px;
	margin-top: 10px;
}
@media all and (min-width: 400px) {
    .tabela2 p {
        font-size: 8px;
    }
}
@media all and (min-width: 550px) {
    .tabela2 p {
        font-size: 10px;
    }
}
@media all and (min-width: 700px) {
    .tabela2 p {
        font-size: 14px;
    }
}
@media all and (min-width: 850px) {
    .tabela2 p {
        font-size: 17px;
    }
}
@media all and (min-width: 1000px) {
    .tabela2 p {
        font-size: 20px;
    }
}
@media all and (min-width: 1200px) {
    .tabela2 p {
        font-size: 24px;
    }
}


.tabela3 {
    margin-top: 10px;
    width:70%;
    margin-left: 15%;
    border-style:solid;
    border-width:3px;
    overflow:hidden;
    border-color:black;
}
.tabela3 th {
    width: 25%;
	border-style:solid;
    border-width:1px;
	border-color:black;
	text-align: center;
}
.tabela3 td {
    width: 15%;
	border-style:solid;
    border-width:1px;
	border-color:black;
	text-align: center;
}
.naglowek{
	background-color:purple;
	color:white;	
}

.tabela3 p {
    font-size: 7px;
	margin-top: 10px;
}
@media all and (min-width: 400px) {
    .tabela3 p {
        font-size: 8px;
    }
}
@media all and (min-width: 550px) {
    .tabela3 p {
        font-size: 10px;
    }
}
@media all and (min-width: 700px) {
    .tabela3 p {
        font-size: 14px;
    }
}
@media all and (min-width: 850px) {
    .tabela3 p {
        font-size: 17px;
    }
}
@media all and (min-width: 1000px) {
    .tabela3 p {
        font-size: 20px;
    }
}
@media all and (min-width: 1200px) {
    .tabela3 p {
        font-size: 24px;
    }
}