@import url("./css/loading.css");

/* 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;
    }
}