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

.gravitas-one-regular {
  font-family: "Gravitas One", serif;
  font-weight: 400;
  font-style: normal;
}

.kumar-one-outline-regular {
  font-family: "Kumar One Outline", system-ui;
  font-weight: 400;
  font-style: normal;
}

.noto-sans {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* --------------- fonts and essentials ------------------ */

body {

  /*height: 100%;*/
  font-family: "Noto Sans", sans-serif;
  font-size: 1em;
  font-weight: 300;
  /*line-height: 1.5em;*/
  /*min-height: 100vh;*/
  background-color: white;
  color: black;
  
  display: block;
  padding: 10px;
  margin: auto;

}

a:link, a:visited {
  background-color: gainsboro;
  color: black;
  border-radius: 8px;
  padding: 13px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: gray;
}


h1 {
  font-family: "Noto Sans";
  font-size: 3.5em;
  /*font-weight: bold;*/
  /*line-height: 1.2em;*/
  margin-top: 100px;
  margin-bottom: 10px;
}

h3 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
}

p {
  color: rgb(64, 69, 75);
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: justify;
  font-weight: 350;
  /*margin-bottom: 20px;*/ /* Adds 20 pixels of space below each paragraph */
}

.scroll-container {

  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 10px;
  box-sizing: border-box;

}


figure {

  display: grid;
  place-items: center;
  margin: 60px auto;
  max-width: 1200px;
  padding: 0 40px;

}

.scroll-contents {

  padding: 10px;
  display: inline-block;

}

img {

  width: auto;
  max-width: 100%;
  max-height: 800px;
  box-shadow: 0 12px 12px rgb(222, 222, 222);
  border-radius: 25px;
  margin: 20px;

  /*background-color: white;
  border: 1px solid #646567;
  box-sizing: border-box;
  /*object-fit: cover;*/
}

.content-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2em;
  max-width: 1600px;
  padding: 0 20px;
  box-sizing: border-box;
  justify-content: space-evenly;

}

.content-item {

  background-color: gainsboro;
 
  border: 1.5px solid gray;
  border-radius: 12px;
  margin: 80px auto;
  padding: 40px

}

.content-item:first-child{

grid-column: 1;
grid-row: inherit;
padding: 50px;

}

.content-item:last-child{

grid-column: 2;
grid-row: inherit;
padding: 50px;

}


/*

hr {
  border: none;  Remove default border 
  height: 1px;  Set line thickness 
  background-color: #646567;  Set line color 
  margin-top: 100px 0;  Add space above and below 
} 

*/

header, footer {
  padding: 50px;
}