.grid_container{
    border: 20px solid black;
    border-radius: 15 solid rgb(194, 194, 22);
    background-color: rgb(35, 153, 231);
}

.map_1, .map_2, .map_3, .map_4, .map_5{
    text-align: center;
    font-size: xx-large;
    display: grid;
    grid-template-columns: repeat (5, 1fr);
    gap: 15px;

}

.map_1 {
	-webkit-animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-11-1 17:16:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-fwd-center
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-11-1 17:14:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-90-vertical-fwd
 * ----------------------------------------
 */
@-webkit-keyframes rotate-90-vertical-fwd {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
}
@keyframes rotate-90-vertical-fwd {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
}

.map_2 {
	-webkit-animation: rotate-in-2-br-ccw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: rotate-in-2-br-ccw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-11-1 17:30:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-in-2-br-ccw
 * ----------------------------------------
 */
@-webkit-keyframes rotate-in-2-br-ccw {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes rotate-in-2-br-ccw {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
}

.map_3 {
	-webkit-animation: slide-out-elliptic-left-fwd 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-elliptic-left-fwd 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
            /* ----------------------------------------------
 * Generated by Animista on 2026-11-1 17:12:1
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-elliptic-left-fwd
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-elliptic-left-fwd {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: -500px 50%;
            transform-origin: -500px 50%;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px) rotateY(-20deg) scale(6);
            transform: translateX(-1000px) rotateY(-20deg) scale(6);
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    opacity: 0;
  }
}
@keyframes slide-out-elliptic-left-fwd {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: -500px 50%;
            transform-origin: -500px 50%;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px) rotateY(-20deg) scale(6);
            transform: translateX(-1000px) rotateY(-20deg) scale(6);
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    opacity: 0;
  }
}

.map_4 {
	-webkit-animation: text-shadow-pop-bottom 0.6s both;
	        animation: text-shadow-pop-bottom 0.6s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-11-1 17:25:0
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-shadow-pop-bottom
 * ----------------------------------------
 */
@-webkit-keyframes text-shadow-pop-bottom {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    text-shadow: 0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555;
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@keyframes text-shadow-pop-bottom {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    text-shadow: 0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555;
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}

.map_5 {
	-webkit-animation: bg-pan-tl 8s both;
	        animation: bg-pan-tl 8s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-11-1 17:46:45
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bg-pan-tl
 * ----------------------------------------
 */
@-webkit-keyframes bg-pan-tl {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes bg-pan-tl {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

footer {
    background-color: yellow;
    text-align: center;
    border-radius: 30px;

}