@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

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

.noto-serif-700 {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.noto-serif-500 {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.noto-serif-900 {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
body {
 background-color: #000000;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #FFFFFF;


}

/* Responsive styling starts here for different devices */
h1{
  font-size: 2rem;
  font-size: clamp(2.0rem, 1.3881rem + 1.9120vw, 4.0rem);
}

.wrapper {
 max-width: min(100% - 40px,60rem);
 margin-inline: auto;
 }

 img {
  max-width: 100%;
  height: auto;
 }
 .container {
  max-width: 80%;
  margin-left: 10%;
  margin-right: 10%;
 }

 .center-text-grid {
    display: grid;
    place-items: center;
}