body {
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #d7d2cc, #304352);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #d7d2cc, #304352);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.lead {
  font-size: 28px;
}

.container {
  text-align: center;
}

.jumbotron {
  background: #ADA996;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.card {
  box-shadow: 0 10px 1px rgba(0, 0, 0, 0.1);
  background: #ADA996;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  .card-subtitle {
    color: #669194;
  }
}

#this-site {
  background-color: #e7e7e7;
  width: 50%;
  min-width: 420px;
}

.image-left {
  margin-left: 20px;
  margin-right: 40px;
  float: left;
}

.small-badge {
  font-size: 0.9rem !important;
  font-weight: 600;
}

.right {
  border-radius: 2px 2px 90px 2px;
}

.left {
  border-radius: 2px 2px 2px 90px;
}

.right2 {
  border-radius: 2px 90px 90px 2px;
}

.left2 {
  border-radius: 90px 2px 2px 90px;
}

.righttop {
  border-radius: 2px 90px 2px 2px;
}

.lefttop {
  border-radius: 90px 2px 2px 2px;
}

.bottom {
  border-radius: 2px 2px 90px 90px;
}

.top {
  border-radius: 90px 90px 2px 2px;
}

.separator {
  height: 170px;
}

.display-5 {
  font-weight: 200;
}

.content {
  background-color: white;
  height: 400px;
}

.breadcrumb {
  width: 100%;
  margin: 3rem auto;
  text-align: center;
  background-color: #ddcbcb;
}

.breadcrumb-item {
  float: none;
  font-size: 1.6rem;
  font-weight: 300;
  vertical-align: middle;
}

.breadcrumb-item.active {
  color: #222;
  font-weight: 400;
}

.email {
  font-size: 1.4rem;
  color: #0078c1;
  text-decoration: none;
  border-bottom: 1px solid white;
}


/* animations */


/*breadcrumb*/

.heightUp {}

.js-video-button {
  color: #2c8a8d;
  font-weight: 700;
  margin-bottom: 20px;
}

.js-video-button:hover {
  color: #2c8a8d;
  font-weight: 700;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes heightUp1 {
  0% {
    height: 12px;
    margin: 3rem auto;
  }

  30% {
    height: 18px;
    margin: 2.4rem auto;
  }

  60% {
    height: 18px;
    margin: 2.4rem auto;
  }

  100% {
    height: 12px;
    margin: 3rem auto;
  }
}


/* Standard syntax */

@keyframes heightUp1 {
  0% {
    height: 12px;
    margin: 3rem auto;
  }

  30% {
    height: 148px;
    margin: 2.4rem auto;
  }

  60% {
    height: 18px;
    margin: 2.4rem auto;
  }

  100% {
    height: 12px;
    margin: 3rem auto;
  }
}

.hu {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hu img {
  width: 300px;
  border: 1px black solid;
  border-radius: 10px;
}

.hu #viewreel {
  text-align: center;
  color: #000;
  font-size: 22px;
  margin-bottom: 20px;
}

.hu #viewreel:hover {
  text-align: center;
  color: #000;
}

.aboutme {
  margin-bottom: 10px;
}

.github {
  margin-bottom: 25px;
}

.contactme {
  margin-bottom: 15px;
}

/*boxes*/

.moveRight {
  position: relative;
  -webkit-animation-name: moveRight1;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0.7s;
  /* Safari 4.0 - 8.0 */
  animation-name: moveRight1;
  animation-duration: 0.7s;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes moveRight1 {
  0% {
    left: 0px;
  }

  40% {
    left: 10px;
  }

  100% {
    left: 0px;
  }
}


/* Standard syntax */

@keyframes moveRight1 {
  0% {
    left: 0px;
  }

  40% {
    left: 10px;
  }

  100% {
    left: 0px;
  }
}

.moveLeft {
  position: relative;
  -webkit-animation-name: moveLeft1;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0.7s;
  /* Safari 4.0 - 8.0 */
  animation-name: moveLeft1;
  animation-duration: 0.7s;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes moveLeft1 {
  0% {
    left: 0px;
  }

  40% {
    left: -10px;
  }

  100% {
    left: 0px;
  }
}


/* Standard syntax */

@keyframes moveLeft1 {
  0% {
    left: 0px;
  }

  40% {
    left: -10px;
  }

  100% {
    left: 0px;
  }
}

.shake {
  position: relative;
  -webkit-animation-name: shake1;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0.7s;
  /* Safari 4.0 - 8.0 */
  animation-name: shake1;
  animation-duration: 0.7s;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes shake1 {
  0% {
    top: 0px;
  }

  30% {
    top: 4px;
  }

  60% {
    top: -4px;
  }

  100% {
    top: 0px;
  }
}


/* Standard syntax */

@keyframes shake1 {
  0% {
    top: 0px;
  }

  30% {
    top: 4px;
  }

  60% {
    top: -4px;
  }

  100% {
    top: 0px;
  }
}

.footer-bottom {
  margin-top: 50px;
  background: #ADA996;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  min-height: 30px;
  width: 100%;
}

.copyright {
  color: #000;
  line-height: 30px;
  min-height: 30px;
  padding: 7px 0;
  text-align: left;
}

.design {
  color: #007;
  line-height: 30px;
  min-height: 30px;
  padding: 7px 0;
  text-align: right;
}

.design a {
  color: #007;
}

#myBtn {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 20px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background: #ADA996;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: black;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 15px;
  /* Some padding */
  border-radius: 10px;
  /* Rounded corners */
}

#myBtn:hover {
  background-color: #555;
  /* Add a dark-grey background on hover */
}


/*B&W*/

.bw {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.bw:hover {
  -webkit-filter: grayscale(80%);
  filter: grayscale(80%);
}


/*Bright*/

.bright {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.bright:hover {
  -webkit-filter: sepia(60%);
  filter: sepia(30%);
}

@media screen and (max-width: 800px) {
  .card {
    margin-top: 30px;
  }

  .right {
    border-radius: 0;
  }

  .left {
    border-radius: 0;
  }

  .right2 {
    border-radius: 0;
  }

  .left2 {
    border-radius: 0;
  }

  .righttop {
    border-radius: 0;
  }

  .lefttop {
    border-radius: 0;
  }

  .bottom {
    border-radius: 0;
  }

  .top {
    border-radius: 0;
  }
}

.hexagon-mesh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 490px;
  margin: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  margin: 20px;
  ;
}

.hexagon {
  width: 120px;
  /* Hexagon width */
  height: 135px;
  /* Height calculated to maintain the hexagon aspect ratio */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-size: cover;
  background-color: rgb(234, 234, 234);
  background-position: center;
  transition: transform 0.3s ease-in-out;
}

.hexagon:hover {
  transform: scale(1.1);
  /* Optional: Scale up on hover */
}

/* Ensure the mesh aligns properly */
.hexagon-mesh::after {
  content: "";
  width: calc(50% - 5px);
  /* Adjust based on your actual hexagon width and gap to align items */
  height: 0;
}

#hex1 {
  position: relative;
  top: 12px;
  left: 12px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-color: rgb(243, 221, 193);
  background-image: url('/assets/HTML5_logo_and_wordmark.svg.png');
}

#hex2 {
  position: relative;
  top: -6px;
  left: 6px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-color: rgb(207, 202, 246);
  background-image: url('/assets/css3-logo-png-transparent.png');
}

#hex3 {
  position: relative;
  top: 16px;
  left: -16px background-size: 114%;
  background-repeat: no-repeat;
  background-color: rgb(255, 255, 182);
  background-image: url('/assets/JavaScript-logo.png');
}

#hex4 {
  position: relative;
  top: 12px;
  left: -6px;
  background-size: 90%;
  background-repeat: no-repeat;
  background-color: rgb(249, 228, 228);
  background-image: url('/assets/angular-icon-logo-svg-vector.svg');
}

#hex5 {
  position: relative;
  top: 26px;
  left: -22px;
  background-repeat: no-repeat;
  background-color: rgb(249, 228, 228);
  background-image: url('/assets/Typescript_logo_2020.svg.png');
}

#hex6 {
  position: relative;
  top: -16px;
  left: -16px;
  background-size: 90%;
  background-repeat: no-repeat;
  background-color: rgb(224, 242, 255);
  background-image: url('/assets/React.webp');
}

#hex7 {
  position: relative;
  top: 1px;
  left: -2px;
  background-size: 110%;
  background-repeat: no-repeat;
  background-color: rgb(214, 208, 255);
  background-image: url('/assets/jquery.png');
}

#hex8 {
  position: relative;
  top: -12px;
  left: 21px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-color: rgb(227, 234, 247);
  background-image: url('/assets/photoshop.png');
}

#hex9 {
  position: relative;
  top: 11px;
  left: 23px;
  background-size: 90%;
  background-color: rgb(244, 247, 251);
  background-repeat: no-repeat;
  background-image: url('/assets/next-js-logo.png');
}

#hex10 {
  position: relative;
  top: -26px;
  left: 26px;
  background-image: url('/assets/uiux.png');
}

#hex12 {
  position: relative;
  top: -6px;
  left: 16px;
  background-size: 70%;
  background-repeat: no-repeat;
  background-color: rgb(249, 233, 255);
  background-image: url('/assets/ai.jpg');
}

#hex11 {
  position: relative;
  top: -16px;
  left: 26px;
  background-size: 70%;
  background-repeat: no-repeat;
  background-color: rgb(237, 253, 246);
  background-image: url('/assets/vue.png');
}



#hexback1 {
  position: relative;
  top: 12px;
  left: 12px;
  background-size: 94%;
  background-repeat: no-repeat;
  background-color: rgb(203, 208, 237);
  background-image: url('/assets/PHP-logo.svg.png');
}

#hexback2 {
  position: relative;
  top: -6px;
  left: -6px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-color: rgb(245, 248, 254);
  background-image: url('/assets/Mysql_logo.png');
}

#hexback3 {
  position: relative;
  top: 16px;
  left: -16px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-color: rgb(242, 241, 241);
  background-image: url('/assets/Symfony.png');
}

#hexback4 {
  position: relative;
  top: 12px;
  left: -6px;
  background-size: 120%;
  background-repeat: no-repeat;
  background-color: rgb(249, 228, 228);
  background-image: url('/assets/Laravel.png');
}

#hexback5 {
  position: relative;
  top: 26px;
  left: -22px;
  background-size: 90%;
  background-repeat: no-repeat;
  background-color: rgb(231, 251, 242);
  background-image: url('/assets/Mongodb-PNG-Image-HD.png');
}

#hexback6 {
  position: relative;
  top: -16px;
  left: -16px;
  background-size: 90%;
  background-repeat: no-repeat;
  background-color: rgb(224, 242, 255);
  background-image: url('/assets/REST APIs.png');
}

#hexback7 {
  position: relative;
  top: 1px;
  left: -2px;
  background-size: 90%;
  background-repeat: no-repeat;
  background-color: rgb(227, 248, 235);
  background-image: url('/assets/node.png');
}

#hexback8 {
  position: relative;
  top: -12px;
  left: 21px;
  background-size: 110%;
  background-repeat: no-repeat;
  background-color: rgb(255, 255, 255);
  background-image: url('/assets/Expressjs.png');
}

#hexback9 {
  position: relative;
  top: 11px;
  left: 23px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-color: rgb(255, 242, 225);
  background-image: url('/assets/aws.png');
}

#hexback10 {
  position: relative;
  top: -26px;
  left: 26px;
  background-size: 76%;
  background-repeat: no-repeat;
  background-color: rgb(255, 227, 212);
  background-image: url('/assets/ubuntu.png');
}

#hexback11 {
  position: relative;
  top: -16px;
  left: 26px;
  background-size: 70%;
  background-repeat: no-repeat;
  background-color: rgb(253, 252, 251);
  background-image: url('/assets/Git-logo.svg.png');
}

#hexback12 {
  position: relative;
  top: -6px;
  left: 16px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: rgb(241, 251, 247);
  background-image: url('/assets/docker.png');
}