/* All Pages */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* Homepage */
.body-home {
  background-color: #000;
}

.body-dark {
  background-color: #1f1f1f;
}

.home-text-container {
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  z-index: 99;
}

.home-title, .home-text, .home-text-link {
  font-family: 'Roboto';
  color: #fff;
  font-weight: 300;
}

.home-title {
  font-size: 3em;
  margin-bottom: 0.25em;
}

.home-text {
  font-size: 1em;
  margin-bottom: 1em;
}

.home-text-link {
  font-size: 1em;
}

.home-text-link a {
  color: #fff;
  text-decoration: none;
}

.home-text-link a:hover {
  color: #add8e6;
}

.home-footer {
  position: absolute;
  width: 100%;
  bottom: 2em;
  z-index: 99;
}

@media all and (max-height: 585px) {
  .home-footer {
    display: none;
  }
}

.footer-main {
  background-color: #1f1f1f;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: auto;
}

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

.footer-content-container {
  margin-bottom: 1em;
}

.footer-link:hover {
  color: #add8e6;
}

/* Navbar */
.topnav {
  position: fixed;
  width: 100%;
  z-index: 99;
  height: 5em;
}

.nav-scroll {
  transition-duration: 0.2s;
}

#topnav.open {
  height: 100% !important;
  z-index: 999 !important;
  background-color: #000 !important;
  transition: 0.5s !important;
  opacity: 0.9 !important;
}

.logo {
  position: fixed;
  top: 15px;
  left: .5em;
  z-index: 99;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 2.25em;
  letter-spacing: 0.05em;
  color: #fff;
  text-decoration: none;
}

.logo:hover {
  color: #fff;
}

.logo-dark {
  position: fixed;
  top: 15px;
  left: 1em;
  z-index: 99;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 2.25em;
  letter-spacing: 0.05em;
  color: #000;
  text-decoration: none;
}

.logo-dark:hover {
  color: #000;
} 

#logo.open {
  color: #fff;
  transition: 0.5s;
}

.section {
  height: 100%;
  width: 100%;
}

.section-dark {
  width: 100%;
  background-color: #1f1f1f;
}

.section-auto {
  height: auto;
  width: 100%;
}

#background {
  height: 100%;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.nav-icon-container {
  height: 3em;
}

.option-container {
  width: 100%;
}

.option-container ul {
  padding-left: 0;
  margin-top: 10em;
  text-align: center;
  list-style-type: none;
}

.option-1, .option-2, .option-3, .option-4 {
  z-index: 99;
  display: none;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 3em;
  color: #fff;
  word-spacing: 0.5em;
  text-decoration: none;

  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.option-1:hover, .option-2:hover, .option-3:hover, .option-4:hover {
  z-index: 99;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  -webkit-transition: .3s ease-in-out;
     -moz-transition: .3s ease-in-out;
       -o-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
}

#option-1.open, #option-2.open, #option-3.open, #option-4.open {
  margin: 0;
  display: block;
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 1s; /* Firefox < 16 */
      -ms-animation: fadein 1s; /* Internet Explorer */
       -o-animation: fadein 1s; /* Opera < 12.1 */
          animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.menu {
  position: fixed;
  top: 10px;
  right: 2em;
  z-index: 99;
  text-decoration: none;
}

/* Nav Icon */
#nav-icon, #nav-icon-dark {
  width: 2em;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
     -moz-transition: .5s ease-in-out;
       -o-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 0.3em;
  width: 100%;
  background: #fff;
  border-radius: 0px;

  left: 0;
   -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
     -moz-transition: .25s ease-in-out;
       -o-transition: .25s ease-in-out;
          transition: .25s ease-in-out;
}

#nav-icon-dark span {
  display: block;
  position: absolute;
  height: 0.3em;
  width: 100%;
  background: #000;
  border-radius: 0px;
  left: 0;
   -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
  -webkit-transition: .1s ease-in-out;
     -moz-transition: .1s ease-in-out;
       -o-transition: .1s ease-in-out;
          transition: .1s ease-in-out;
}

#nav-icon span:nth-child(1), #nav-icon-dark span:nth-child(1) {
  top: 1.25em;
}

#nav-icon span:nth-child(2), #nav-icon span:nth-child(3),
#nav-icon-dark span:nth-child(2), #nav-icon-dark span:nth-child(3) {
  top: 1.88em;
}

#nav-icon span:nth-child(4), #nav-icon-dark span:nth-child(4) {
  top: 2.5em;
}

#nav-icon.open span:nth-child(1), #nav-icon-dark.open span:nth-child(1) {
  display: none;
}

#nav-icon.open span:nth-child(2), #nav-icon-dark.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3), #nav-icon-dark.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4), #nav-icon-dark.open span:nth-child(4) {
  display: none;
}

#menu-1.open, #menu-2.open, #menu-3.open, #menu-4.open {
  background-color: #fff;
  color: #fff;
}

.light {
  color: #fff;
}

/* Footer */
.footer-content {
  font-family: 'Roboto-Dark';
  color: #fff;
  font-weight: 100;
  font-size: 0.75em;
  text-align: center;
}

.footer-content a {
  color: #fff;
  text-decoration: none;
}

.footer-content a:hover {
  color: #add8e6;
  text-decoration: none;
}

/* Body */
.container-main {
  padding-top: 10em;
}

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

.container-title h1 {
  font-family: 'Roboto';
  font-style: normal;
  font-variant: normal;
  font-weight: 800;
  font-size: 3em;
}

.container-cards {
  margin-top: 2em;
}

.container-contact {
  margin-top: 2em;
}

.container-about {
  margin-top: 2em;
}

.row-cards {
  margin-bottom: 0.5em;
}

.card {
  margin-bottom: 1.5em;
}

.card-link {
  color: #000;
}

.contact-link {
  color: #fff;
}

.contact-link:hover {
  color: #add8e6;
}

.contact-item {
  text-align: center;
  margin-bottom: 2em;
}

.container-bf {
  min-height: 100%;
  position: relative;
}

.container-body {
  padding-bottom: 10em;
}

.container-main-contact {
  padding-bottom: 2em;
}

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

.project-links-container {
  margin-bottom: 1em;
}

.project-img-container {
  margin-bottom: 1em;
}

.img-project {
  border-radius: 0.25em;
}



/* PROJECTS PAGE */
/*h5 {
  color: green;
}*/

h5 {
  border-top: 2px solid black; /* Top border */
  border-bottom: 2px solid black; /* Bottom border */
  padding: 10px 0; /* Optional padding to adjust spacing */
}

code {
  border: 1px solid black; /* Thin black border */
  padding: 2px; /* Optional padding for spacing */
  
}