body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

}

.banner-rectangle {
  position: fixed;
  top: 0;
  /*width: 100%;*/
  width: 100%;
  /*background-color: black;*/
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  background-color: rgba(255, 255, 255, 1); /* Semi-transparent white background */

  /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  border-radius: 20px; /* Rounded corners */
  /*padding: 20px;*/
  /*box-sizing: border-box;*/
  z-index: 1000;
}


.banner-box {
  background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
  padding: 20px 40px;
  border-radius: 20px; /* Rounded corners */
  position: fixed;

  /*text-align: center;*/
  /*width: 90vh;*/
  /*!*display: flex;*!*/
  /*justify-content: center;*/
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.banner-container {
  display: flex;
  /*justify-content: center;*/
  flex-direction: row;
  min-width: 100vh;
}
.banner-text-container {
  display: flex;
  align-items: center;
  min-width: 70vh;
  flex-grow: 1;
  flex-direction: column;
  background-color: black;


}
.banner-github-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 30vh;
  /*margin-left: 50px;*/
  /*display: flex;*/
  /*!*justify-content: center;*!*/
  /*align-content: center;*/
  /*flex-direction: column;*/
  /*width: fit-content;*/
}
.banner-mail-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 30vh;
  /*margin-left: 50px;*/
  /*display: flex;*/
  /*!*justify-content: center;*!*/
  /*align-content: center;*/
  /*flex-direction: column;*/
  /*width: fit-content;*/
}


.banner-text {
  text-align: center;
  color: orange;
  font-family: 'Fira Code', monospace;
  font-size: 3.5em;
  /*flex-grow: 1;*/
}

/*.banner-text h1 {*/
/*  margin: 0;*/
/*  font-size: 2em;*/
/*}*/

/*.banner-text sub {*/
/*  font-size: 0.75em;*/
/*  color: #777;*/
/*}*/
/*.banner-text {*/
/*  color: black;*/
/*  text-align: center;*/
/*  font-family: 'Fira Code', monospace;*/
/*  font-size: 7vh;*/
/*}*/

.banner-subscript {
  color: orange;
  text-align: center;
  font-family: 'Fira Code', monospace;
  font-size: 1.6em;
  margin-top: 0;
}


.body-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: 'Fira Code', monospace;
  padding-left: 10vh;
  padding-right: 10vh;
  font-size: large;
  margin-top: 20vh;

}
.contact-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

.contact-state-box {
  background-color: black; /* Semi-transparent white background */
  padding: 20px 40px;
  border-radius: 20px; /* Rounded corners */
  /*position: fixed;*/
  /*min-width: 70vh;*/
  /*flex-grow: 1;*/
}

.contact-state-box-text {
  text-align: center;
  color: orange;
  font-family: 'Fira Code', monospace;
  font-size: 3.5em;

  /*flex-grow: 1;*/
}

.contact-container img {
  max-width: 100px;
  border-radius: 5px;
  /*margin-left: 15em;*/

  /*width: 40px;*/
  /*height: 40px;*/
}

.body-text {
  align-items: center;
  font-family: 'Fira Code', monospace;
  padding-left: 10vh;
  padding-right: 10vh;
  font-size: large;
  /*margin-top: 10vh;*/
}

.json-box {
  background-color: #000000; /* Black background */
  color: #00FF00; /* Green font color */
  padding: 20px;
  border-radius: 10px; /* Rounded corners */
  margin-top: 20px;
  width: fit-content; /* Adjust box size to fit content */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

.json-box pre {
  margin: 0;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; /* Monospace font for code */
  font-size: 1.5vw; /* Font size adjusts with viewport width */
}


.github-box {
  background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
  padding: 20px 40px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  width: fit-content;
  height: 50px;
  /*margin-top: 30px;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.github-link {
  /*margin-top: 30px;*/
  /*display: flex;*/
  align-items: center;
  /*margin-left: 15em;*/
  /*gap: 10px;*/
}

.banner-github-container img {
  max-width: 100px;
  border-radius: 5px;
  /*margin-left: 15em;*/

  /*width: 40px;*/
  /*height: 40px;*/
}
.banner-mail-container img {
  max-width: 100px;
  border-radius: 5px;
  /*margin-left: 15em;*/

  /*width: 40px;*/
  /*height: 40px;*/
}

.github-link span {
  font-size: 1.06em;
  color: #777;
  text-align: center;  /*font-size: 1.8vw;*/
  /*color: #333;*/
  text-decoration: none;
}

.rectangle-container {
  display: flex;
  flex-direction: column;
  height: 100vh;

}

hr {
  border: none; /* Removes the default border */
  height: 3px; /* Sets the thickness of the line */
  background-color: black; /* Sets the color of the line */
  /*margin: 20px 0; !* Adds some space above and below the line *!*/
}


.body-rounded-rectangle {
  /*width: 100%; !* Width of the rectangle *!*/
  /*height: calc(100vh - 20px); !* Height of the rectangle *!*/
  height: 700px;
  /*height: calc(100vh - 100px); !* Height of the rectangle *!*/
  border: 1px solid black;
  border-radius: 10px; /* Rounded corners */
  margin: 20px;
  box-sizing: border-box;
  /*margin: 20px 5px 5px;*/
}
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}