





.container1 {
  position: absolute;
  z-index: -1;
  inset:-1px;
  --c: 7px;
  background-color: var(--background-color);
  background-image: radial-gradient(
      circle at 50% 50%,
      #0000 1.5px,
      #000 0 var(--c),
      #0000 var(--c)
    ),
    radial-gradient(
      circle at 50% 50%,
      #0000 1.5px,
      #000 0 var(--c),
      #0000 var(--c)
    ),
    radial-gradient(circle at 50% 50%, #f00, #f000 60%),
    radial-gradient(circle at 50% 50%, #ff0, #ff00 60%),
    radial-gradient(circle at 50% 50%, #0f0, #0f00 60%),
    radial-gradient(ellipse at 50% 50%, #00f, #00f0 60%);
  background-size:
    12px 20.7846097px,
    12px 20.7846097px,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 20.7846097px;
  --p: 0px 0px, 6px 10.39230485px;
  background-position:
    var(--p),
    0% 0%,
    0% 0%,
    0% 0px;
  animation:
    wee 40s linear infinite,
    filt 6s linear infinite;
}

@keyframes filt {
  0% {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes wee {
  0% {
    background-position:
      var(--p),
      800% 400%,
      1000% -400%,
      -1200% -600%,
      400% 41.5692194px;
  }
  to {
    background-position:
      var(--p),
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
}




.Hero {
  z-index: 0;
  width: 100%;
  background-size: cover;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
    1px 1px 0 white; /* Creates the border effect */
}
.hi {
  font-size: 80px;
  display: inline-block;
  animation: shake-animation 2.5s ease infinite;
}
@keyframes shake-animation {
  0% {
    transform: rotate(0deg); /* Start position */
  }
  5% {
    transform: rotate(25deg); /* 5% of the way through the animation */
  }
  10% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(25deg);
  }
  20% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(0deg); /* Rotate and move right */
  }
  55% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(0deg); /* Rotate and move left again */
  }
  100% {
    transform: rotate(0deg); /* Reset to original position */
  }
}
.Hero_text {
  margin-left: 15%;
  font-family: "Kameron", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 4rem;
  color: var(--primary);
}
.button {
  font-family: "Oxanium", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 25px;
  color: var(--primary);
  z-index: -1;
}
.offcanvas{
  max-width:80%;
  margin: 70px 130px 10px 50px;
}
.offcanvas-body{
  background-image: url('/src/images/myresume.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.Hero_Social_Medias {
  font-family: "Oxanium", serif;
  width: 30%;
  display: flex;
  margin-top: 30px;
  gap: 20px;
}
.name {
  color: #ffa500;
  font-family: "Mrs Sheppards", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 5rem;
}
.roles {
  color: #ff6500;
  font-family: "jersey 10", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 6rem;
  margin-left: 20px;
  text-shadow: 2px 2px 4px orange;
}
.aws-btn {
  --button-default-height: 46px;
  --button-default-font-size: 15px;
  --button-default-border-radius: 8px;
  --button-horizontal-padding: 5px;
  --button-raise-level: 10px;
  --button-hover-pressure: 2;
  --transform-speed: 0.185s;
  --button-secondary-color: #fefc81;
  --button-secondary-color-dark: #cbc802;
  --button-secondary-color-light: none;
  --button-secondary-color-hover: #fefb53;
  --button-secondary-color-active: #fdfa1c;
  --button-secondary-border: 2px solid #cbc802;
  --button-danger-color: #263ad2;
  --button-danger-color-dark: #020075;
  --button-danger-color-light: ;
  --button-danger-color-hover: #1612e0;
  --button-danger-color-active: #0a0151;
  --button-danger-border: 1px solid #0c1155;
}
.aboutme {
  width: 100%;
  min-height: fit-content;
  padding-top: 10px;
  color: var(--primary);
  font-family: "Kameron", serif;
  font-weight: 400;
  font-style: normal;
}
.aboutme_title {
  text-align: center;
  font-family: "Zen Dots", serif;
  font-weight: 400;
  font-style: normal;
  color: #c65c16;
  text-shadow: 3px 3px 2px orange;
}
.aboutme_text {
  margin: 50px 150px;
}
.aboutme_description {
  text-align: justify;
}
.aboutme_description > .name {
  font-size: 40px;
}
.aboutme_image > img {
  width: 200px;
  border-radius: 59% 41% 27% 73% / 50% 69% 31% 50% ;
}
.profileimg {
  padding: 0px;
  box-shadow: -6px 6px 12px -1px var(--primary);
  -webkit-box-shadow: -6px 6px 12px -1px var(--primary);
  -moz-box-shadow: -6px 6px 12px -1px var(--primary);
}
.aboutme_image {
  float: left;
  padding-right: 15px;
}
.aboutme_description {
  font-size: 30px;
  letter-spacing: 2px;
}
.skills_tools {
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  background-color: var(--background-color);
  background-blend-mode: multiply;
}
.skillboxes {
  display: flex;
  justify-content: space-evenly;

  width: fit-content;
  margin-top: 80px;
}
.scrollskillboxes {
  overflow: scroll;
  
}
@keyframes gradientAnimation {
  0% {
    border-image-source: linear-gradient(to bottom right, #ff512f, #dd2476);
  }
  20% {
  }
  40% {
    border-image-source: linear-gradient(to bottom right, #ffd3a5, #fd6585);
  }
  60% {
    border-image-source: linear-gradient(to bottom right, #12c2e9, #f64f59);
  }
  80% {
    border-image-source: linear-gradient(to bottom right, #7f7fd5, #91eae4);
  }
  100% {
    border-image-source: linear-gradient(to bottom right, #ff512f, #dd2476);
  }
}
.box {
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 1px solid;
  border-image-slice: 1;
  animation: gradientAnimation 1s linear infinite;
}

.box_title {
  text-align: center;
  font-family: "Silkscreen", serif;
  font-weight: 400;
  font-size: 25px;
  color: var(--primary);
  font-style: normal;
  text-shadow: 2px 2px 4px var(--background-color);
}
.skillimg {
  width: 50px;
  background-color: white;
}
.skillbox_content {
  padding: 10px;
}

.projects {
  height: fit-content;
  font-family: "Kameron", serif;
  font-optical-sizing: auto;
  padding: 10px;
}
.project_card {
  -webkit-box-shadow: var(--webkit-box-shadow);
  -moz-box-shadow: var(--moz-box-shadow);
  box-shadow: var(--box-shadow);
  max-width: 30%;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid var(--box-shadow);
  backdrop-filter: blur(1px);
  background-color: rgba(0, 0, 255, 0.2);
  height: fit-content;
}
.project_img_corousel {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}
.keen-slider__slide {
  overflow: hidden;
}
.keen-slider__slide > img {
  height: 250px;
  width: 100%;
  border-radius: 10px;
  background-size: cover;
  object-fit: cover;
}
.project_heading {
  padding: 0px 10px;
}
.project_heading_title {
  font-family: "Trade Winds", serif;
  font-weight: 400;
  font-style: normal;
  color: #ff6500;
  font-size: 20px;
}
.project_heading_link {
  background-color: #c65c16;
  border-radius: 5px;
  border: none;
  font-family: "Oxanium", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: medium;
  color: white;
}
.project_content {
  text-align: justify;
  padding: 0px 10px;
}
.project_tools {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  min-height: 80px;
  border: 1px solid rgb(128, 128, 128);
}
.project_tools > span {
  /* From https://css.glass */
  background: rgba(0, 0, 0, 0.34);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 1px solid rgba(0, 0, 0, 1);
  color: white;
  border-radius: 5px;
  border: 1px solid rgb(130, 129, 129);
  padding: 0px 10px;
  margin: 5px;
  height: fit-content;
}




/* responsive design for mobile */
@media screen and (max-width: 600px) {
  .Hero {
    width: 100%;
    min-height: 100dvh;
    background-size: cover;
  }
  .hi {
    font-size: 40px;
    display: inline-block;
    animation: shake-animation 2.5s ease infinite;
  }
  @keyframes shake-animation {
    0% {
      transform: rotate(0deg); /* Start position */
    }
    5% {
      transform: rotate(25deg); /* 5% of the way through the animation */
    }
    10% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(25deg);
    }
    20% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(0deg); /* Rotate and move right */
    }
    55% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(0deg); /* Rotate and move left again */
    }
    100% {
      transform: rotate(0deg); /* Reset to original position */
    }
  }
  .Hero_text {
    margin-left: 5%;
    margin-bottom: 40%;
    font-family: "Kameron", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 2rem;
    color: var(--primary);
  }
  .button {
    font-family: "Oxanium", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 25px;
    color: var(--primary);
    z-index: -1;
  }
  .offcanvas{
    max-width:90%;
    margin: 100px 20px 50px 0px;
  }
  .offcanvas-body{
    background-image: url('/src/images/myresume.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }


  .Hero_Social_Medias {
    font-family: "Oxanium", serif;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    gap: 20px;
  }

  .name {
    color: #ffa500;
    font-family: "Mrs Sheppards", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 3rem;
  }
  .roles {
    color: #ff6500;
    font-family: "jersey 10", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 3rem;
    margin-left: 20px;
    text-shadow: 2px 2px 4px orange;
  }
  .aws-btn {
    --button-default-height: 42px;
    --button-default-font-size: 13px;
    --button-default-border-radius: 8px;
    --button-horizontal-padding: 5px;
    --button-raise-level: 10px;
    --button-hover-pressure: 2;
    --transform-speed: 0.185s;
    --button-secondary-color: #fefc81;
    --button-secondary-color-dark: #cbc802;
    --button-secondary-color-light: none;
    --button-secondary-color-hover: #fefb53;
    --button-secondary-color-active: #fdfa1c;
    --button-secondary-border: 2px solid #cbc802;
    --button-danger-color: #263ad2;
    --button-danger-color-dark: #020075;
    --button-danger-color-light: ;
    --button-danger-color-hover: #1612e0;
    --button-danger-color-active: #0a0151;
    --button-danger-border: 1px solid #0c1155;
  }
  .aboutme {
    width: 100%;
    height: fit-content;
    padding: 10px;
    color: var(--primary);
    font-family: "Kameron", serif;
    font-weight: 400;
    font-style: normal;
  }
  .aboutme_title {
    text-align: center;
    font-family: "Zen Dots", serif;
    font-weight: 400;
    font-style: normal;
    color: #c65c16;
    text-shadow: 3px 3px 2px orange;
  }
  .aboutme_text {
    margin: 50px 20px;
  }

  .aboutme_description > .name {
    font-size: 25px;
  }
  .word-rotate {
    font-size: 18px;
  }
  .aboutme_image > img {
    width: 100px;
    transition: width 0.5s ease-in-out;
  }
  .aboutme_image > img:hover {
    width: 150px;
    transition: width 0.5s ease-in-out;
  }
  .profileimg {
    border-radius: 67% 33% 60% 40% / 49% 26% 74% 51%;
    padding: 0px;
    box-shadow: -6px 6px 12px -1px var(--primary);
    -webkit-box-shadow: -6px 6px 12px -1px var(--primary);
    -moz-box-shadow: -6px 6px 12px -1px var(--primary);
  }
  .aboutme_image {
    float: left;
    padding-right: 15px;
    border-radius: 10px;
  }
  .aboutme_description {
    font-size: 18px;
    letter-spacing: 1px;
  }
  .skills_tools {
    min-height: fit-content;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
    background-blend-mode: multiply;
  }
  .skillboxes {
    display: flex;
    justify-content: space-evenly;
    width: fit-content;
    margin-top: 80px;
  }
  .scrollskillboxes {
    overflow: scroll;
  }
  .box {
    height: fit-content;
    min-width: 300px;
    margin: 10px;
  }
  .box_title {
    text-align: center;
    font-family: "Silkscreen", serif;
    font-weight: 400;
    font-size: 25px;
    font-style: normal;
    text-shadow: 2px 2px 4px var(--background-color);
  }
  .skillimg {
    width: 50px;
  }
  .skillbox_content {
    padding: 10px;
  }

  .projects {
    height: 100vh;
    font-family: "Kameron", serif;
    padding: 10px;
  }
  .project_card {
    -webkit-box-shadow: var(--webkit-box-shadow);
    -moz-box-shadow: var(--moz-box-shadow);
    box-shadow: var(--box-shadow);
    max-width: 100%;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid var(--box-shadow);
    backdrop-filter: blur(1px);
    background-color: rgba(0, 0, 255, 0.2);
    height: fit-content;
    margin-top: 10px;
  }
  .project_img_corousel {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .carousel-item {
    overflow: hidden;
  }
  .carousel-item > img {
    height: 250px;
    width: 100%;
    border-radius: 10px;
    background-size: cover;
    object-fit: cover;
  }
  .project_heading {
    padding: 0px 10px;
  }
  .project_heading_title {
    font-family: "Trade Winds", serif;
    font-weight: 400;
    font-style: normal;
    color: #ff6500;
    font-size: 20px;
  }
  .project_heading_link {
    background-color: #c65c16;
    border-radius: 5px;
    border: none;
    font-family: "Oxanium", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: medium;
    color: white;
  }
  .project_content {
    padding: 0px 10px;
    font-size: 17px;
  }
  .project_tools {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    min-height: 80px;
  }

  .specificproject {
    height: fit-content;
  }
}

/* Styles for landscape orientation */
@media screen and (orientation: landscape) {
  .Hero {
    width: 100%;
    height: fit-content;
    background-size: cover;
  }
  .hi {
    font-size: 40px;
    display: inline-block;
    animation: shake-animation 2.5s ease infinite;
  }
  @keyframes shake-animation {
    0% {
      transform: rotate(0deg); /* Start position */
    }
    5% {
      transform: rotate(25deg); /* 5% of the way through the animation */
    }
    10% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(25deg);
    }
    20% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(0deg); /* Rotate and move right */
    }
    55% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(0deg); /* Rotate and move left again */
    }
    100% {
      transform: rotate(0deg); /* Reset to original position */
    }
  }
  .Hero_text {
    margin-left: 5%;
    font-family: "Kameron", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 2rem;
    color: var(--primary);
  }
  .button {
    font-family: "Oxanium", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 25px;
    color: var(--primary);
    z-index: -1;
  }
  .offcanvas{
    max-width:90%;
    margin: 70px 40px 10px 50px;
  }
  .offcanvas-body{
    background-image: url('/src/images/myresume.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .Hero_Social_Medias {
    font-family: "Oxanium", serif;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 20px;
  }

  .name {
    color: #ffa500;
    font-family: "Mrs Sheppards", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 3rem;
  }
  .roles {
    color: #ff6500;
    font-family: "jersey 10", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 3rem;
    margin-left: 20px;
    text-shadow: 2px 2px 4px orange;
  }
  .aws-btn {
    --button-default-height: 42px;
    --button-default-font-size: 13px;
    --button-default-border-radius: 8px;
    --button-horizontal-padding: 5px;
    --button-raise-level: 10px;
    --button-hover-pressure: 2;
    --transform-speed: 0.185s;
    --button-secondary-color: #fefc81;
    --button-secondary-color-dark: #cbc802;
    --button-secondary-color-light: none;
    --button-secondary-color-hover: #fefb53;
    --button-secondary-color-active: #fdfa1c;
    --button-secondary-border: 2px solid #cbc802;
    --button-danger-color: #263ad2;
    --button-danger-color-dark: #020075;
    --button-danger-color-light: ;
    --button-danger-color-hover: #1612e0;
    --button-danger-color-active: #0a0151;
    --button-danger-border: 1px solid #0c1155;
  }
  .aboutme {
    width: 100%;
    min-height: 100vh;
    padding-top: 10px;
    color: var(--primary);
    font-family: "Kameron", serif;
    font-weight: 400;
    font-style: normal;
  }
  .aboutme_title {
    text-align: center;
    font-family: "Zen Dots", serif;
    font-weight: 400;
    font-style: normal;
    color: #c65c16;
    text-shadow: 3px 3px 2px orange;
  }
  .aboutme_text {
    margin: 50px 20px;
  }
  .aboutme_description > .name {
    font-size: 14px;
  }
  .word-rotate {
    font-size: 25px;
  }
  .aboutme_image > img {
    width: 100px;
  }
  .profileimg {
    border-radius: 67% 33% 60% 40% / 49% 26% 74% 51%;
    padding: 0px;
    box-shadow: -6px 6px 12px -1px var(--primary);
    -webkit-box-shadow: -6px 6px 12px -1px var(--primary);
    -moz-box-shadow: -6px 6px 12px -1px var(--primary);
  }
  .aboutme_image {
    float: left;
    padding-right: 15px;
  }
  .aboutme_description {
    font-size: 15px;
    letter-spacing: 1px;
  }
  .skills_tools {
    min-height: fit-content;
  }
  .skillboxes {
    display: flex;
    justify-content: space-evenly;
    width: fit-content;
    margin-top: 0px;
  }
  .scrollskillboxes {
    overflow: scroll;
  }
  .box {
    height: fit-content;
    max-width: 300px;
    margin: 10px;
  }
  .box_title {
    text-align: center;
    font-family: "Silkscreen", serif;
    font-weight: 400;
    font-size: 25px;
    font-style: normal;
    text-shadow: 2px 2px 4px var(--background-color);
  }
  .skillimg {
    width: 50px;
    background-image: url("src/images/SkillBack1.avif");
    background-repeat: no-repeat;
    background-color: rgb(36, 36, 36);
    background-size: cover;
    object-fit: cover;
    background-blend-mode: multiply;
  }
  .skillbox_content {
    padding: 10px;
  }

  .projects {
    min-height: fit-content;
    font-family: "Kameron", serif;
    font-optical-sizing: auto;
    padding: 10px;
  }
  .project_card {
    -webkit-box-shadow: var(--webkit-box-shadow);
    -moz-box-shadow: var(--moz-box-shadow);
    box-shadow: var(--box-shadow);
    max-width: 45%;
    margin-top: 10px;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid var(--box-shadow);
    backdrop-filter: blur(1px);
    background-color: rgba(0, 0, 255, 0.2);
    height: fit-content;
  }
  .project_img_corousel {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .carousel-item {
    overflow: hidden;
  }
  .carousel-item > img {
    height: 250px;
    width: 100%;
    border-radius: 10px;
    background-size: cover;
    object-fit: cover;
  }
  .project_heading {
    padding: 0px 10px;
  }
  .project_heading_title {
    font-family: "Trade Winds", serif;
    font-weight: 400;
    font-style: normal;
    color: #ff6500;
    font-size: 20px;
  }
  .project_heading_link {
    background-color: #c65c16;
    border-radius: 5px;
    border: none;
    font-family: "Oxanium", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: medium;
    color: white;
  }
  .project_content {
    padding: 0px 10px;
  }
  .project_tools {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    min-height: 80px;
  }
}

/* Styles for desktop devices */
@media screen and (min-width: 901px) {
  .Hero {
    width: 100%;
    min-height: 100dvh;
    background-size: cover;
  }
  .hi {
    font-size: 80px;
    display: inline-block;
    animation: shake-animation 2.5s ease infinite;
  }
  @keyframes shake-animation {
    0% {
      transform: rotate(0deg); /* Start position */
    }
    5% {
      transform: rotate(25deg); /* 5% of the way through the animation */
    }
    10% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(25deg);
    }
    20% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(0deg); /* Rotate and move right */
    }
    55% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(0deg); /* Rotate and move left again */
    }
    100% {
      transform: rotate(0deg); /* Reset to original position */
    }
  }
  .Hero_text {
    margin-left: 15%;
    margin-bottom: 10%;
    font-family: "Kameron", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 4rem;
    color: var(--primary);
  }
  .button {
    font-family: "Oxanium", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 25px;
    color: var(--primary);
    z-index: -1;
  }
  .Hero_Social_Medias {
    font-family: "Oxanium", serif;
    width: 30%;
    display: flex;
    margin-top: 30px;
    gap: 10px;
  }
  .name {
    color: #ffa500;
    font-family: "Mrs Sheppards", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 5rem;
  }
  .roles {
    color: #ff6500;
    font-family: "jersey 10", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 6rem;
    margin-left: 20px;
    text-shadow: 2px 2px 4px orange;
  }
  .aws-btn {
    --button-default-height: 46px;
    --button-default-font-size: 15px;
    --button-default-border-radius: 8px;
    --button-horizontal-padding: 5px;
    --button-raise-level: 10px;
    --button-hover-pressure: 2;
    --transform-speed: 0.185s;
    --button-secondary-color: #fefc81;
    --button-secondary-color-dark: #cbc802;
    --button-secondary-color-light: none;
    --button-secondary-color-hover: #fefb53;
    --button-secondary-color-active: #fdfa1c;
    --button-secondary-border: 2px solid #cbc802;
    --button-danger-color: #263ad2;
    --button-danger-color-dark: #020075;
    --button-danger-color-light: ;
    --button-danger-color-hover: #1612e0;
    --button-danger-color-active: #0a0151;
    --button-danger-border: 1px solid #0c1155;
  }
  .aboutme {
    width: 100%;
    min-height: 100vh;
    padding-top: 10px;
    color: var(--primary);
    font-family: "Kameron", serif;
    font-weight: 400;
    font-style: normal;
  }
  .aboutme_title {
    text-align: center;
    font-family: "Zen Dots", serif;
    font-weight: 400;
    font-style: normal;
    color: #c65c16;
    text-shadow: 3px 3px 2px orange;
  }
  .aboutme_text {
    margin: 50px 150px;
  }
  .aboutme_description > span {
    font-size: 38px;
  }
  .aboutme_description > .name {
    font-size: 40px;
  }
  .aboutme_image > img {
    width: 200px;
  }
  .profileimg {
    padding: 0px;
    box-shadow: -6px 6px 12px -1px var(--primary);
    -webkit-box-shadow: -6px 6px 12px -1px var(--primary);
    -moz-box-shadow: -6px 6px 12px -1px var(--primary);
  }
  .aboutme_image {
    float: left;
    padding-right: 15px;
  }
  .aboutme_description {
    font-size: 30px;
    letter-spacing: 2px;
  }
  .skills_tools {
    min-height: 100vh;
    background-repeat: no-repeat;
    background-color: var(--background-color);
    background-size: cover;
    object-fit: cover;
    background-blend-mode: multiply;
  }
  .skillboxes {
    display: flex;
    justify-content: space-evenly;
    width: fit-content;
    margin-top: 80px;
  }
  .scrollskillboxes {
    overflow: scroll;
  }
  .box {
    height: fit-content;
    width: 600px;
    margin: 20px;
  }
  .box_title {
    text-align: center;
    font-family: "Silkscreen", serif;
    font-weight: 400;
    font-size: 25px;
    font-style: normal;
    text-shadow: 2px 2px 4px var(--background-color);
  }
  .skillimg {
    width: 50px;
  }
  .skillbox_content {
    padding: 10px;
  }

  .projects {
    min-height: fit-content;
    font-family: "Kameron", serif;
    font-optical-sizing: auto;
    padding: 10px;
  }
  .project_card {
    -webkit-box-shadow: var(--webkit-box-shadow);
    -moz-box-shadow: var(--moz-box-shadow);
    box-shadow: var(--box-shadow);
    max-width: 30%;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid var(--box-shadow);
    backdrop-filter: blur(1px);
    background-color: rgba(0, 0, 255, 0.2);
    height: fit-content;
  }
  .project_img_corousel {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .carousel-item {
    overflow: hidden;
  }
  .carousel-item > img {
    height: 250px;
    width: 100%;
    border-radius: 10px;
    background-size: cover;
    object-fit: cover;
  }
  .project_heading {
    padding: 0px 10px;
  }
  .project_heading_title {
    font-family: "Trade Winds", serif;
    font-weight: 400;
    font-style: normal;
    color: #ff6500;
    font-size: 20px;
  }
  .project_heading_link {
    background-color: #c65c16;
    border-radius: 5px;
    border: none;
    font-family: "Oxanium", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: medium;
    color: white;
  }
  .project_content {
    padding: 0px 10px;
  }
  .project_tools {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    min-height: 80px;
  }
}

/* Styles for tablets */
@media screen and (min-width: 601px) and (max-width: 900px) {
  .Hero {
    width: 100%;
    min-height: 100dvh;
    background-size: cover;
    background-position: center;
  }
  .hi {
    font-size: 40px;
    display: inline-block;
    animation: shake-animation 2.5s ease infinite;
  }
  @keyframes shake-animation {
    0% {
      transform: rotate(0deg); /* Start position */
    }
    5% {
      transform: rotate(25deg); /* 5% of the way through the animation */
    }
    10% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(25deg);
    }
    20% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(0deg); /* Rotate and move right */
    }
    55% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(0deg); /* Rotate and move left again */
    }
    100% {
      transform: rotate(0deg); /* Reset to original position */
    }
  }
  .Hero_text {
    margin-left: 15%;
    font-family: "Kameron", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 2rem;
    color: var(--primary);
  }
  .button {
    font-family: "Oxanium", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 25px;
    color: var(--primary);
    z-index: -1;
  }
  .offcanvas{
    max-width:95%;
    margin: 70px 15px 10px 50px;
  }
  .offcanvas-body{
    background-image: url('/src/images/myresume.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .Hero_Social_Medias {
    font-family: "Oxanium", serif;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    gap: 20px;
  }

  .name {
    color: #ffa500;
    font-family: "Mrs Sheppards", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 3rem;
  }
  .roles {
    color: #ff6500;
    font-family: "jersey 10", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 3rem;
    margin-left: 20px;
    text-shadow: 2px 2px 4px orange;
  }
  .aws-btn {
    --button-default-height: 42px;
    --button-default-font-size: 13px;
    --button-default-border-radius: 8px;
    --button-horizontal-padding: 5px;
    --button-raise-level: 10px;
    --button-hover-pressure: 2;
    --transform-speed: 0.185s;
    --button-secondary-color: #fefc81;
    --button-secondary-color-dark: #cbc802;
    --button-secondary-color-light: none;
    --button-secondary-color-hover: #fefb53;
    --button-secondary-color-active: #fdfa1c;
    --button-secondary-border: 2px solid #cbc802;
    --button-danger-color: #263ad2;
    --button-danger-color-dark: #020075;
    --button-danger-color-light: ;
    --button-danger-color-hover: #1612e0;
    --button-danger-color-active: #0a0151;
    --button-danger-border: 1px solid #0c1155;
  }
  .aboutme {
    width: 100%;
    min-height: fit-content;
    padding-top: 10px;
    color: var(--primary);
    font-family: "Kameron", serif;
    font-weight: 400;
    font-style: normal;
  }
  .aboutme_title {
    text-align: center;
    font-family: "Zen Dots", serif;
    font-weight: 400;
    font-style: normal;
    color: #c65c16;
    text-shadow: 3px 3px 2px orange;
  }
  .aboutme_text {
    margin: 50px 60px;
  }
  .aboutme_description > .name {
    font-size: 37px;
  }
  .word-rotate {
    font-size: 25px;
  }
  .aboutme_image > img {
    width: 150px;
  }
  .profileimg {
    border-radius: 67% 33% 60% 40% / 49% 26% 74% 51%;
    padding: 0px;
    box-shadow: -6px 6px 12px -1px var(--primary);
    -webkit-box-shadow: -6px 6px 12px -1px var(--primary);
    -moz-box-shadow: -6px 6px 12px -1px var(--primary);
  }
  .aboutme_image {
    float: left;
    padding-right: 15px;
  }
  .aboutme_description {
    font-size: 25px;
    letter-spacing: 1px;
  }
  .skills_tools {
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-blend-mode: multiply;
  }
  .skillboxes {
    display: flex;
    justify-content: space-evenly;
    width: fit-content;
    margin-top: 80px;
  }
  .scrollskillboxes {
    overflow: scroll;
  }
  .box {
    height: fit-content;

    max-width: 300px;
    margin: 10px;
  }
  .box_title {
    text-align: center;
    font-family: "Silkscreen", serif;
    font-weight: 400;
    font-size: 25px;
    font-style: normal;
    text-shadow: 2px 2px 4px var(--background-color);
  }
  .skillimg {
    width: 50px;
  }
  .skillbox_content {
    padding: 10px;
  }

  .projects {
    min-height: fit-content;
    font-family: "Kameron", serif;
    font-optical-sizing: auto;
    padding: 10px;
  }
  .project_card {
    -webkit-box-shadow: var(--webkit-box-shadow);
    -moz-box-shadow: var(--moz-box-shadow);
    box-shadow: var(--box-shadow);
    max-width: 45%;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid var(--box-shadow);
    backdrop-filter: blur(1px);
    background-color: rgba(0, 0, 255, 0.2);
    height: fit-content;
    margin-top: 10px;
  }
  .project_img_corousel {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .carousel-item {
    overflow: hidden;
  }
  .carousel-item > img {
    height: 250px;
    width: 100%;
    border-radius: 10px;
    background-size: cover;
    object-fit: cover;
  }
  .project_heading {
    padding: 0px 10px;
  }
  .project_heading_title {
    font-family: "Trade Winds", serif;
    font-weight: 400;
    font-style: normal;
    color: #ff6500;
    font-size: 20px;
  }
  .project_heading_link {
    background-color: #c65c16;
    border-radius: 5px;
    border: none;
    font-family: "Oxanium", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: medium;
    color: white;
  }
  .project_content {
    padding: 0px 10px;
  }
  .project_tools {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    min-height: 80px;
  }
}
