@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');

:root{
   --h1: 40px;
   --h2: 32px;
   --h3: 28px;
   --h4: 24px;
   --h5: 20px;
   --h6: 16px;

   --sub: 20px;

   --label: 16px;
   --ls: 5px;

   --body: 14px;

   --font-1: "DM Serif Text", serif;

   --color-black-100: rgba(0, 0, 0, 1);
   --color-black-75: rgba(0, 0, 0, 0.75);
   --color-black-50: rgba(0, 0, 0, 0.50);
   --color-black-25: rgba(0, 0, 0, 0.25);

   --color-white-100: rgba(255, 255, 255, 1);
   --color-white-75: rgba(255, 255, 255, 0.75);
   --color-white-50: rgba(255, 255, 255, 0.50);
   --color-white-25: rgba(255, 255, 255, 0.25);

   --color-orange-100: rgba(215, 105, 0, 1);
   --color-orange-75: rgba(215, 105, 0, 0.75);
   --color-orange-50: rgba(215, 105, 0, 0.50);
   --color-orange-25: rgba(215, 105, 0, 0.25);
}

/* ******************************************************* */
/*      Removing Default Styles Of The Browser                         */
/* ******************************************************* */

*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgba(184, 227, 233, 1);
}

/* ******************************************************* */
/*                   Style Rules For Text Colors                                 */
/* ******************************************************* */

.text-white{
   color: var(--color-white-100);
 }

.text-black{
   color: var(--color-black-100);
 }

.text-orange{
   color: var(--color-orange-100);
 }

/* ******************************************************* */
/*             Style Rules For Common Classes                               */
/* ******************************************************* */

.text-center{
   text-align: center;
}

.grid{ 
   display: grid; 
   width: 100vw;
   height: 80vh;
   margin: auto;
   grid-template-columns: auto; 
   align-items: center;
   justify-content: center; 
   padding: 0px 0; 
} 

.responsive-image{
   width: 100vw;
   height: 100vh;
}

/* ******************************************************* */
/*                 Style Rules For Footer Section                               */
/* ******************************************************* */

.footer{
   font-family: var(--font-1);
   font-size: var(--h6);
   display: flex;
   flex-direction: row;
   justify-content: center;
   padding: 40px;
}

/* ******************************************************* */
/*                 Style Rules For Media Queries                              */
/* ******************************************************* */

@media (min-width: 1200px) {
   .grid {
      max-width: 669;
   }
}

@media (min-width: 992px) {
   .grid {
      max-width: 740px;
   }
}

@media (max-width: 768px) {
   .grid {
      max-width: 500px;
   }
   
   .footerLinks{ 
      flex-direction: column;
      align-items: center;
}
}

@media (max-width: 568px) {
   .grid {
      max-width: 90%px;
   }
}