body{
    font-family: "Raleway", sans-serif;
}
#local{
    width: 30%;
    padding: 15px 0;
    margin: 0 auto 0 auto;

    font-weight: bold;
    border: 1px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 8px;
    background-color: white;

    font-size: 1.5rem;
    color: #000;
    text-align: center;
}
#style{
    width: 100%;
    --s: 140px; /* control the size */
    --c1: #AB3E5B;
    --c2: #FFBE40;
  
    --_g: 
    #0000 25%,#0008 47%,var(--c1)  53% 147%,var(--c2) 153% 247%,
    var(--c1) 253% 347%,var(--c2) 353% 447%,var(--c1) 453% 547%,#0008 553%,#0000 575%;
    --_s: calc(25%/3) calc(25%/4) at 50%; 
    background:
    radial-gradient(var(--_s) 100%,var(--_g)),
    radial-gradient(var(--_s) 100%,var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
    radial-gradient(var(--_s) 0   ,var(--_g)) calc(var(--s)/2) 0,
    radial-gradient(var(--_s) 0   ,var(--_g)) 0                calc(3*var(--s)/4),
    repeating-linear-gradient(90deg,#ACCEC0 calc(25%/-6) calc(25%/6),#61A6AB 0 calc(25%/2));
    background-size: var(--s) calc(3*var(--s)/2);
    animation: g4 2.5s infinite linear;

    box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
}

#outputStyle{
    width: 700px;
    height: 1600px;
    margin: 50px auto 50px auto;
    background-image: linear-gradient(to right, orange, blue);
    border-radius: 15px;
    background-size: 300%;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
    background-position: left;
    animation: bg 20s infinite linear;
    padding-top: 12px;
}
#innerStyle{
    width: 98%;
    height: 90%;
    background-color: #dedede;
    border-radius: 15px;
    margin: 0px auto 0 auto;
    padding: 20px 0px 120px 0px;
}
#cities{
    border-radius: 30px;
    border-collapse: collapse;
    width: 98%;
}
#cities td{
    border: 1px solid #dedede;
    padding: 8px;
}
#cities tr:nth-child(even){
    background-color: #f2f2f2;
}
.col1{
    width: 10%;
}
.col2{
    width: 45%;
}
#title{
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
    font-family: "Raleway", serif;
}

@keyframes g4 {
  to {
    background-position:
      var(--s) 0,
      calc(var(--s)/-2) calc(3*var(--s)/4),
      calc(3*var(--s)/2) 0,
      calc(-1*var(--s)) calc(3*var(--s)/4),
      0 0
      ;
    }
}
@keyframes bg {
    0% {background-position: left;}
    50% {background-position: right;}
    100% {background-position: left;}
}
@media screen and (max-width: 768px){
    #outputStyle {
        width: 18.75rem;
        height: auto;
    }
    h1{
        font-size: 2rem;
    }
    #outputStyle{
        margin: 20px auto 20px auto;
    }
    #local{
        padding: 0px 0px;
    }
}