body {
    font-family: Verdana,'Yantramanav', Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #161142;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#blok {
    width:50%;
    font-size:1.6em;
    color:rgb(184, 160, 100);
    background-color: #161142;
    box-shadow: 0px 12px 13px -1px  #343752, 5px 5px 15px 5px rgba(0,0,0,0);
    margin:3%;
    padding: 2%;
    
 
 overflow: hidden;
}

#blok > p {
    margin:0;
    white-space:nowrap;
    animation:przesun 50s linear infinite;
}
@keyframes przesun
{
     from {
        transform:translateX(0%);
    }
    to {
        transform:translateX(100%);
    }
}
.box01 {
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    
   border: 1px  
   rgb(7, 6, 0);
}
.box01left, .box01right
{

    width: 20%;
    margin: 0 5% 5% 5%;
}

img{
    width:100%;
   border: 1px;
   border-color: black;
    border-radius: 10%;
    margin: 5% 0% 1% 1%;
    
    
}

.down      {
    width:40%;
    height:2%;
    display: flex;
    margin:5%;
    padding: 1% 0%;
    background-color: #161142;
    justify-content: space-around;
    
    box-shadow: 0px 10px 13px -1px #3a370b, 5px 5px 15px 5px rgba(0,0,0,3);
    flex-wrap: wrap;
}

a:hover {
    color:rgb(90, 54, 6);
}

a {
    font-size:1em;
    font-weight: 150;
    color: rgb(231, 202, 105);
    padding: 2% 2% 2% 2%;
}



@media only screen and (max-width: 300px) {
    .box01 {
        flex-direction: column;
        width:90%;
    }
    .box01left, .box01right {
        width: 100%;
        margin: 0;
    }
    .top
    {
        width:auto;
    }
    .down {
        flex-wrap: wrap;
        width: 60%;
    }
        #blok {
  width: 85%;}

}
@media only screen and (max-width: 680px) and (min-width:301px){
    .box01left, .box01right{
        width: 40%;
    }
    a {padding: 0;}
    #blok {
  width: 85%;}
    .top {padding: 2%;
          font-size: 1em;
    }
}