@font-face {
  font-family: "Major Mono Display";
  src: url("https://fonts.gstatic.com/s/majormonodisplay/v10/RWmVoLyb5fEqtsfBX9PDZIGr2tFubRh7DXeR.woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTT7PB1QTsUX8KYth-orYadYY35Zlk.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTT7PB1QTsUX8KYth-orYadb435.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTW7PB1QTsUX8KYth-gCKSIUKw.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTW7PB1QTsUX8KYth-gBqSI.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTT7PB1QTsUX8KYth-o9YedYY35Zlk.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTT7PB1QTsUX8KYth-o9Yedb435.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTR7PB1QTsUX8KYvrGyEY2tbZX9.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTR7PB1QTsUX8KYvrGyEYOtbQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTU7PB1QTsUX8KYthSQBLyM.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTU7PB1QTsUX8KYthqQBA.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTR7PB1QTsUX8KYvumzEY2tbZX9.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmmono/v8/aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

html,
body {
  margin: 0 auto !important;
  padding: 0 !important;
  /*height: 100% !important;
  width: 100% !important;*/
  font-family: "DM Mono", monospace;
  font-weight: 400;
  scroll-behavior: smooth;
}

h1 {
  font-family: "Major Mono Display", monospace;
  font-weight: bold;
  font-size: 2.5rem;
  text-align: left;
  color: #3d5370;
}

h2 {
  font-family: "Major Mono Display", monospace;
  font-size: 2.3rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  text-align: center;
  color: red;
}

p {
  font-size: 1.3rem;
  line-height: 2rem;
  margin-bottom: 1rem;
  color: #2b46ab; /*#000;*/
}

a {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  font-weight: 500;
  color: #004fb1;
}

img {
  max-width: 75%;
  height: auto;
  border-radius: 15px;
}

.menu {
  overflow: hidden;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  background-color: white;
  padding: 0.4rem 0rem 0rem 0rem;
}

.menu a {
  font-family: "Major Mono Display", monospace;
  color: red;
  font-weight: bold;
  font-size: 1.3rem;
  text-decoration: none;
}

.gridmenuitem {
  border: none;
  justify-self: center;
  border-bottom: 1px solid #ccc;
}

.gridmenu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /*  border-bottom: 1px solid #eee;*/
}

/*.grid {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 0px;
}*/

.textitem {
  border: none;
  justify-self: center;
}

.itemgray {
  border: none;
  background-color: #f1f1f1;
  display: grid;
  /*border-bottom: 0.2rem solid #eee;*/
}

.itemwhite {
  border: none;
  background-color: white;
  border-bottom: 0.2rem solid #eee;
  display: grid;
}

.itemblue {
  border: none;
  background-color: rgba(207, 227, 255, 0.2);
  border-bottom: 0.2rem solid #eee;
  display: grid;
}

.main {
  margin-top: 6rem; /* Add a top margin to avoid content overlay */
}

.button {
  display: inline-block;
  padding: 1rem 1rem;
  font-family: "DM Mono", monospace;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #34457e;
  background-color: white;
  border: 1;
  border-radius: 15px;
  box-shadow: 0 6px #ccc;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.button:active {
  /*background-color: #34457e;
  color: white;*/
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.grid-container {
  /* CONTAINER FOR H1 TITLE ;*/
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  /*grid-template-columns: auto auto auto;*/
  /* background-color: #2196f3;*/
  border: none; /*0px solid blue;*/
  padding: 0px;
  gap: 0;
  justify-content: space-between;
  justify-items: stretch;
}

.grid-itemc {
  /* GRID ITEM FOR H1 TITLE ;*/
  /*grid-column: 1 / 3;*/
  border-top: solid 1px red;
  border-bottom: solid 1px red;
  border-right: solid 1px red;
  border-bottom-right-radius: 15px;
  border-top-right-radius: 25px;
  padding: 0rem 0rem 0rem 7vw;
}

.grid-item {
  /* CONTAINER FOR PICTURE ;*/
  border: none;
  padding: 0px;
  max-width: 60rem;
  padding: 1rem;
}

@media only screen and (max-width: 640px) {
  .textitem {
    padding: 0 5% 0 5% !important;
  }
  h1 {
    font-size: 1.8rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  .menu a {
    font-size: 0.9rem !important;
  }
  .menu a:hover {
    font-size: 0.9rem !important;
  }
  .menu a:visited {
    font-size: 0.7rem !important;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .textitem {
    padding: 0 10% 0 10% !important;
  }
}

@media only screen and (min-width: 1025px) {
  .textitem {
    max-width: 800px !important;
  }
}