body{
        background-image: url('aged paper.png');
        background-size: cover;
        background-color: #E8E3DE;
        font-family: Georgia, serif;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
      }

      h1{
        text-align: center;
      }



      .info{
        width: 45%;
        min-width: 400px;
        border-left-color: #88888855;
        border-left-width: 5px;
        border-left-style: solid;
        padding-left: 10px;
        font-size: 20px;
      }

      .line {
        fill: none;
        stroke: #939393;
        stroke-miterlimit: 10;


                stroke-dasharray: 5000;
                stroke-dashoffset: 5000;
                animation: stem;
                animation-duration: 20s;
                animation-timing-function: ease-in;
                animation-fill-mode: forwards;
              }

          .delay {
            animation-delay: 1s;
            animation-duration: 50s;
          }

          @keyframes stem {
            from {
              stroke-dashoffset: 5000;
            }
            to {
              stroke-dashoffset: 0;
            }
          }


          .map {
            width: 45%;
            min-width: 300px;
            margin-top: -100px;
            margin-bottom: -80px;
          }

          .image{

            width: 45%;
            min-width: 300px;

          }




          .container{
            display:flex; 
            justify-content: space-around; 
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
          }



          @keyframes fade-in {
            from {opacity: 0;} to {opacity: 1;}
          }

          .flex {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;
            margin-top: 100px;
          }

          .inner {
            width: 20%;
            min-width: 200px;
            height: 100px;
            background-size: cover;
            background-repeat: no-repeat;
            background-color: #00000022;
            cursor: pointer;
            margin: 20px;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            font-weight: bold;
            font-size: 25px;
            color: #efefef !important;
            text-decoration: none;
            z-index: +1;
            text-shadow: 0 0 5px black;

          }

  .inner:hover{
    opacity: 0.4;
  }

    footer {
    text-align: right;
    padding-top: 100px;
    width: 100%;
  }


          @media(max-width: 1000px){

              .map {
              width: 100%;
              min-width: 250px;
            }

            .info {width: 80%;
              min-width: 300px;}

          }