a{
    position: relative;
    text-align: center;
    top: 10%;
    font-size: 30px;
    transition: 1s;
    color: #03396c;
}
body {

    background: linear-gradient(0deg, rgba(255, 213, 62, 1) -10%, rgba(36, 135, 201, 1) 100%);
    background: radial-gradient(circle, rgba(255, 213, 62, 1) 0%, rgba(36, 135, 201, 0.7315126734287465) 100%);
    margin: 0;
    padding: 0;
    font-family: 'Tilt Warp', cursive;


}

#wybor {
    background-color: #2487c9;
    border: 3px black solid;
    border-radius: 15px;
    padding: 5px;
    height: 850px;
    width: 50%;
    text-align: center;
    box-shadow: 5px 5px 5px black;
    margin: 20px auto;
    padding: 10px;
    background-color: white;
    position: relative;
    /* z-index: -1; */
    animation: mymove 3.5s forwards cubic-bezier(0, 0, 0, 0);
    ;

}

#wybor_1 {
    background-color: #2487c9;
    border: 3px black solid;
    border-radius: 15px;
    padding: 5px;
    height: 850px;
    width: 50%;
    text-align: center;
    box-shadow: 5px 5px 5px black;
    margin: 20px auto;
    padding: 10px;
    background-color: white;
    position: relative;
    /* z-index: -1; */

    ;

}

button {
    margin: 10px;
    height: 40px;
    width: 120px;
    border: 2px black;
    border-radius: 15px;
    box-shadow: 5px 5px 5px black;
    margin: 10px;
    color: black;
    font-family: 'Tilt Warp',
        cursive;
}

img {
    display: inline-block;
    height: auto;
    width: 30%;
}

a {
    word-spacing: 1px;
    text-decoration: none;
    font-family: 'Tilt Warp', cursive;

}

.name {
    font-family: 'Tilt Warp', cursive;
    text-align: center;
    font-size: 1.25em;
    color: #03396c;
    font-weight: 900;
}

.city {
    font-size: 15px;
    color: #03396c9a;
}

footer {
    text-align: right;
    font-family: 'Tilt Warp', cursive;
}

#kolory {
    height: 40px;
    width: 100%;
    margin-bottom: 10px;
    padding-left: 9px;

}

.niebieski {
    background-color: #00b9cf;
    display: block;
    width: 100px;
    height: 40px;
    float: left;
    border-radius: 10px 0px 0px 10px;

}

.niebieski p {
    margin: 5px;
}

.zielony {
    background-color: #00c567;
    display: block;
    float: left;
    width: 100px;
    height: 40px;
}

.zielony p {
    margin: 5px;
}

.zielony_2 {
    background-color: #86c328;
    display: block;
    float: left;
    width: 90px;
    height: 40px;

}

.zielony_2 p {
    margin: 5px;
}

.pomarańczowy {
    background-color: #fbb902;
    display: block;
    float: left;
    width: 90px;
    height: 40px;

}

.pomarańczowy p {
    margin: 5px;

}

.pomarańczowy_2 {
    background-color: #f59f02;
    display: block;
    float: left;
    width: 90px;
    height: 40px;

}

.pomarańczowy_2 p {
    margin: 5px;

}

.różowy {
    background-color: #e9747e;
    display: block;
    float: left;
    width: 90px;
    height: 40px;
}

.różowy p {
    margin: 5px;

}

.czerwony {
    background-color: #e24200;
    display: block;
    float: left;
    width: 100px;
    height: 40px;
    border-radius: 0px 10px 10px 0px;
}

.czerwony p {
    margin: 5px;
    font-size: 75%;

}

#znacznik {
    position: relative;
}

table,
td,
tr {
    height: 100px;
    margin-left: 30px;
}

table tr td img {
    width: 200px;
    height: 100%;
}

table tr td img:hover {

    border-radius: 50px;
    transition: 2.0s;
}

td:hover {

    background: linear-gradient(0deg, rgba(255, 213, 62, 0.637) -10%, rgba(36, 135, 201, 0.582) 60%);
    border-radius: 20px;
    transition: 1.0s;
}

@keyframes mymove {
    from {
        top: 10px;
    }

    50% {

        bottom: 100px;
    }

    75% {
        bottom: 300px;
    }

    to {
        bottom: 600px;
    }
}