* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body,
 html {
   width: 100%;
   height: 100%;
   font-family: 'Segoe UI', sans-serif;
   background: #f8f3eb;
 }

 #main {
   width: 100%;
   height: 100vh;
 }

 #info-webpage {
   display: flex;
   position: fixed;
   top: 20px;
   left: 20px;
   width: 70%;
   padding: 20px;
   border-radius: 12px;
   /* box-shadow: 0 8px 20px rgba(0,0,0,0.1); */
   z-index: 10;
 }

 #info-webpage img {
   width: 10%;
   border-radius: 10px;
   border: 1px solid black;
 }

 #info-webpage-text {
   padding: 10px;
 }

 #info-webpage-text h3 {
   font-size: 1.5rem;
   margin-bottom: 10px;
   text-transform: uppercase;
   font-family: Georgia, 'Times New Roman', Times, serif;
 }

 #info-webpage-text p {
   font-size: 1rem;
   color: #444;
 }

 #main-screen {
   width: 90%;
   height: 75%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -40%);
   /* position: absolute;*/
   /* overflow: hidden; */
   /* background: aqua; */
 }

 .loc-name {
   width: 45%;
   height: 200px;
   position: absolute;
   top: 10%;
   left: 0%;
   opacity: 1;
   /* background-color: blue; */
   overflow: hidden;
 }

 .loc-name h1 {
   font-size: 5rem;
   font-weight: 900;
   -webkit-text-stroke: 1px white;
   font-family: Georgia, 'Times New Roman', Times, serif;
   text-transform: uppercase;
   position: absolute;
   top: -150%;
   z-index: 999;
   opacity: 0;
   /* transition: all 0.5s ease; */
 }

 .loc-info {
   width: 45%;
   height: 400px;
   padding: 10px;
   position: absolute;
   top: 35%;
   left: -4%;
   opacity: 1;
   /* background-color: brown; */
   overflow: hidden;
 }

 .loc-info p {
   font-size: 2rem;
   font-weight: 300;
   /* font-family: 'Courier New', Courier, monospace; */
   margin-top: 20px;
   position: absolute;
   top: 100%;
   z-index: 999;
   opacity: 0;
 }

 .loc-img {
   width: 60%;
   height: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-15%, -50%);
   overflow: hidden;
 }

 .loc-img img {
   position: absolute;
   height: 100%;
   width: 0%;
   object-fit: cover;
   object-position: center;
   border-radius: 15px;
   opacity: 0;
 }


 @media screen and (max-width: 1024px) {
   #info-webpage {
     flex-direction: row;
     width: 100%;
     top: 10px;
     left: 0%;

   }

   #info-webpage img {
     width: 15%;
     height: 15%;
   }

   #info-webpage-text h3 {
     font-size: 1rem;
   }

   #info-webpage-text p {
     font-size: 0.7rem;
   }

   #main-screen {
     width: 80%;
     flex-direction: row;
     top: 50%;
     transform: translate(-50%, -50%);
   }

   .loc-name {
     width: 100%;
     text-align: center;
     left: 0;
     top: 10%;
   }

   .loc-info {
     width: 100%;
     text-align: center;
     left: 0;
     top: 85%;
   }

   .loc-name h1 {
     font-size: 2rem;
   }

   .loc-info p {
     font-size: 1rem;
   }

   .loc-img {
     transform: translate(-50%, -50%);
     width: 90%;
     height: 50vh;
   }
 }

 @media screen and (max-width: 600px) {

  #info-webpage-text h3 {
     font-size: 0.7rem;
   }

   #info-webpage-text p {
     display: none;
   }

   #main-screen {
     flex-direction: column;
     height: auto;
     padding-top: 50px;
   }

   .loc-img {
     width: 90%;
     height: 40vh;
     transform: translate(-50%, 0);
     left: 50%;
     top: -300%;
   }

   .loc-name {
     width: 100%;
     text-align: center;
     left: 0;
     top: -400%;
   }

   .loc-info {
     width: 100%;
     text-align: center;
     left: 0;
     top: 500%;
   }
 }