:root {
    background-color: rgb(230, 227, 227);
    }
  
  
    .headerContainer {
      background-color: rgb(230, 227, 227);
    }

/*.mainHeaderRow {
    margin-left: 5% !important;
    width: 80%;
    align-items: center;
    justify-content: center !important;
    margin-top: 50px !important;
    display: flex;
    gap: 1rem;
    text-align: center !important;
    padding-bottom: 50px;
}*/

.headerContent {
    background-color: rgb(230, 227, 227);
  text-align: center;
  padding-bottom: 45px;
  padding-top: 50px;
}

.headerContent h2{
  padding:15px;
  padding-block:40px;
}

.headerContent h4 {
    margin-top: 20px;
    color: gray;
}

.headerContent p {
    font-size: 23px;
}

.headerContent hr {
    width: 90%;
    margin-left: 5%;
}


#headerNamePhotoId {
    margin-top: -95px;
}

.col a:hover {
  color: grey;
  text-decoration: underline rgb(188, 67, 19) !important; 
}

.col-md-4 h5:hover {
  text-decoration: rgb(188, 67, 19) !important; 
}


.experienceContent {
    background-color: rgb(230, 227, 227);
    padding-bottom: 10px;
 padding-left: 20%;
padding-right: 20%;
}

.experienceContent p{
font-size: 22px;
text-align:left;

}

.backToContactWrapper {
    background-color: rgb(230, 227, 227);
}

.backToContact {
    background-color: rgb(230, 227, 227);
}

.backToContact a {
    background-color: rgb(230, 227, 227);
    font-family: "Birthstone", cursive;
    font-size: 50px;
    color: rgb(188, 67, 19) !important;
}

.backToContact {
    text-align: center;
}

/*.footerWrapper {
    background-color: rgb(230, 227, 227);
  }
    
    .footerContainer {
      justify-content: center;
      width: 80%;
      font-size: 20px;
      margin-left: 12.25%;
      padding-top: 35px;
    }
    
    .footerRow {
      justify-content: center;
      
    }
    
    .footerContainer a {
        color: rgb(188, 67, 19) !important;
    }*/



#backToTop {
  position: fixed; /* Fixed position */
  bottom: 30px;    /* 10px from the bottom */
  right: 30px;     /* 10px from the right */
  z-index: 9999;   /* Make sure it's on top of other content */
  padding: 8px 16px; /* Padding for size */
  background-color: #666; /* Background color */
  color: white; /* Text color */
  border: none; /* No border */
  cursor: pointer; /* Cursor indicates it's clickable */
  border-radius: 5px; /* Rounded corners */
  opacity: 0.3; /* Slightly transparent */
  display: none; /* Hidden by default */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

#backToTop.visible {
  display: block; /* Show the button */
}

#backToTop.hidden-opacity {
  opacity: 0.3; /* Slightly transparent */
}

#backToTop:hover {
  opacity: 1; /* Fully visible when hovered */
}


@media (max-width: 576px){

  .row{
    display: flex;
    flex-direction: column;
  }

  .imageContainer h1 {
    justify-content: center;
  
    padding-right: 15px;
    padding-left: 20px;
    text-align: center !important;

  }
  #backToTop {
      position: fixed; /* Fixed position */
      bottom: 30px;    /* 10px from the bottom */
      right: 30px;     /* 10px from the right */
      z-index: 9999;   /* Make sure it's on top of other content */
      padding: 8px 16px; /* Padding for size */
      background-color: #666; /* Background color */
      color: white; /* Text color */
      border: none; /* No border */
      cursor: pointer; /* Cursor indicates it's clickable */
      border-radius: 5px; /* Rounded corners */
      opacity: 0.3; /* Slightly transparent */
      display: none; /* Hidden by default */
      transition: opacity 0.5s ease; /* Smooth transition for opacity */
  }
  
  #backToTop.visible {
      display: block; /* Show the button */
  }
  
  #backToTop.hidden-opacity {
      opacity: 0.3; /* Slightly transparent */
  }
  
  #backToTop:hover {
      opacity: 1; /* Fully visible when hovered */
  }
  

}