@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap");

* {
  padding: 0px;
  border: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  scroll-behavior: smooth 1s;
}

body {
  margin: 0 5em;
}

label,
input,
textarea {
  padding: -1em;
  margin: 1em;
}

button {
  border: 1px solid;
  border-radius: 5px;
  width: 10em;
  padding: 5px;
}

/* content */
.color,
.content-section,
#menuToggle a,
.skills-wrapper,
p {
  color: #8f7d5e;
}

/* SKILL BAR */
/* Container for skill bars */
.container {
  width: 100%; /* Full width */
  background-color: #ffffff; /* Grey background */
}

.skills {
  text-align: right; /* Right-align text */
  padding-top: 1px; /* Add top padding */
  padding-bottom: 1px; /* Add bottom padding */
  color: white; /* White text color */
}

.technical {
  width: 90%;
  background-color: #04aa6d;
} /* Green */
.html {
  width: 80%;
  background-color: #04aa6d;
} /* Green */
.css {
  width: 50%;
  background-color: #2196f3;
} /* Blue */
.js {
  width: 10%;
  background-color: #f44336;
} /* Red */
.php {
  width: 40%;
  background-color: #f44336;
} /* Dark Grey */
.c-plus-plus {
  width: 20%;
  background-color: #f44336;
} /* Dark Grey */
.skills-wrapper {
  font-weight: bolder;
}
/* PROJECTS */
.projects img {
  width: 100%;
  border: 1px solid;
  border-radius: 10px;
}

button {
  cursor: pointer;
}
.projectInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-section {
  margin: 5em 1em 1em 1em;
  display: flex;
  justify-content: center;
  animation: slide-in 2s;
}

@keyframes slide-in {
  from {
    opacity: 0;
    margin: -3em 1em 1em 1em;
  }
  to {
    opacity: 1;
  }
}

.header_section_container {
  align-items: center;
  background-color: #ff9900;
  border-radius: 15px;
  display: flex;
  max-width: 100%;
  flex-direction: row;
  gap: 10px;
  height: 80vh;
  padding: 20px;
  position: relative;
}

.logo-container {
  width: 35%;
  /* min-width: 20rem;
  max-width: 80rem; */
}
.logo {
  width: 100%;
}

#marlonG {
  position: relative;
  animation: fill 0.5s ease forwards 5.5s;
  width: 80%;
}

#marlonG path:nth-child(9) {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: line-anim 2s ease forwards;
}

#marlonG path:nth-child(10) {
  stroke-dasharray: 301;
  stroke-dashoffset: 301;
  animation: line-anim 2s ease forwards 1s;
}
#marlonG path:nth-child(11) {
  stroke-dasharray: 301;
  stroke-dashoffset: 301;
  animation: line-anim 2s ease forwards 1.5s;
}
#marlonG path:nth-child(12) {
  stroke-dasharray: 344;
  stroke-dashoffset: 344;
  animation: line-anim 2s ease forwards 2s;
}
#marlonG path:nth-child(13) {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: line-anim 2s ease forwards 2.5s;
}
#marlonG path:nth-child(14) {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: line-anim 2s ease forwards 3s;
}
#marlonG path:nth-child(15) {
  stroke-dasharray: 741;
  stroke-dashoffset: 741;
  animation: line-anim 2s ease forwards 3.5s;
}

@keyframes line-anim {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 0;
  }
}

@keyframes fill {
  from {
    fill: #ff9900;
  }
  to {
    fill: white;
  }
}

.brand_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 50%;
}

.brand_name {
  display: flex;
  justify-content: center;
}

.brand_about {
  color: white;
  font-size: 1em;
}

.brand_contact {
  border: none;
  font-size: 14px;
}

.brand_contact:hover {
  border: black solid 1px;
  font-weight: bold;
}

/********************this is for the mobile app 1st with a width of 375p******************************************/

@media screen and (max-width: 375px) {
  /* Branding */
  h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .content-flex,
  .content-section,
  .img-wrapper,
  .about-wrapper,
  .icons,
  .projects {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
  }
  .content-section {
    padding: 5px 15px 5px;
    border: 1px solid black;
    border-radius: 5px;
    margin: 5px;
    justify-content: center;
    align-items: center;
  }

  /* About section */
  .icons {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icons img {
    width: 5em;
    margin-top: 10px;
    padding: 10px;
    transition: 0.5s;
  }

  .about {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .technologies {
    margin: 0 auto;
  }

  .about-img {
    border: 1px solid;
    border-radius: 50%;
    width: 100%;
    background-image: linear-gradient(#695c45, #f5d6a2);
  }

  .about-wrapper p {
    background-color: #615540;
    color: #efe9e6;
    padding: 15px;
    border-radius: 5px;
  }

  /* burger navbar */
  #menuToggle {
    display: block;
    position: relative;
    top: 20px;
    left: 20px;
    right: 0;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    transition: color 0.2s ease;
  }

  #menuToggle a:hover {
    color: tomato;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /*
 * Just a quick hamburger
 */
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #9e8a68;
    border-radius: 5px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #9e8a68;
  }

  /*
 * But let's hide the middle one.
 */
  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
 * Ohyeah and the last one should go the other direction
 */
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
 * Make this absolute positioned
 * at the top left of the screen
 */
  #menu {
    position: flex;
    margin: -70px 0 0 -50px;
    padding: 40px 0px 0px 75px;
    border-radius: 20px;

    /* background: #ededed; */
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #menu li {
    padding: 5px;
    font-size: 14px;
    display: inline;
    font-weight: bold;
  }

  /*
 * And let's slide it in from the left
 */
  #menuToggle input:checked ~ ul {
    transform: none;
  }

  /* MARKTECH SLIDESHOW */

  /* Slideshow container */
  .slideshow-container {
    max-width: 30em;
    position: relative;
    margin: auto;
    padding-bottom: 10px;
  }

  /* The dots/bullets/indicators */
  .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active {
    background-color: #717171;
  }

  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @-webkit-keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }

  /* PROJECTS */

  .projectContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 10%;
  }

  .projectContainer .projectInfo img {
    width: 20em;
    max-height: 40em;
    aspect-ratio: 1/1;
    margin-top: 20px;
    border-radius: 30px;
  }

  /* CONTACT ME */
  input,
  select,
  textarea,
  form {
    border-radius: 5px;
    width: 20em;
    border: 1px solid;
    padding: 0.5em;
  }
  .contact-me {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
    text-align: center;
  }
}

/**************************************************TABLET RESOLUTION ****************************************/
@media screen and (min-width: 376px) and (max-width: 425px) {
  /* burger navbar */
  #menuToggle {
    display: block;
    position: relative;
    top: 20px;
    left: 20px;
    right: 0;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    transition: color 0.2s ease;
  }

  #menuToggle a:hover {
    color: tomato;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /*
 * Just a quick hamburger
 */
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #9e8a68;
    border-radius: 5px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #9e8a68;
  }

  /*
 * But let's hide the middle one.
 */
  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
 * Ohyeah and the last one should go the other direction
 */
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
 * Make this absolute positioned
 * at the top left of the screen
 */
  #menu {
    position: flex;
    margin: -70px 0 0 -50px;
    padding: 40px 0px 0px 75px;
    border-radius: 20px;

    /* background: #ededed; */
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #menu li {
    padding: 5px;
    font-size: 14px;
    display: inline;
    font-weight: bold;
  }

  /*
 * And let's slide it in from the left
 */
  #menuToggle input:checked ~ ul {
    transform: none;
  }

  /* Branding */
  h1 {
    display: flex;
    justify-content: center;
  }

  .about-img,
  .img-wrapper {
    float: right;
    border: 1px solid;
    border-radius: 50%;
    width: 20em;
    background-image: linear-gradient(#695c45, #f5d6a2);
  }

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

  .icons img {
    width: 4em;
    margin-top: 10px;
    padding: 10px;
    transition: 0.5s;
  }

  .about {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .technologies {
    margin: 0 auto;
  }

  /* PROJECTS */

  .projectContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 10%;
  }

  .projectContainer .projectInfo img {
    width: 20em;
    max-height: 40em;
    aspect-ratio: 1/1;
    margin-top: 20px;
  }
  /* CONTACT ME */
  input,
  select,
  textarea,
  form {
    border-radius: 5px;
    width: 20em;
    border: 1px solid;
    padding: 0.5em;
  }
  .contact-me {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
    text-align: center;
  }
}
/**************************************************MOBILE L ****************************************/
@media screen and (min-width: 426px) and (max-width: 768px) {
  /* burger navbar */
  #menuToggle {
    display: block;
    position: relative;
    top: 20px;
    left: 10px;
    right: 0;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    transition: color 0.2s ease;
  }

  #menuToggle a:hover {
    color: tomato;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /*
   * Just a quick hamburger
   */
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #9e8a68;
    border-radius: 5px;
    z-index: 1;
    transform-origin: 4px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #9e8a68;
  }

  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu {
    position: flex;
    margin: -70px -50px;
    padding: 30px 60px;
    border-radius: 20px;

    /* background: #ededed; */
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #menu li {
    padding: 20px;
    font-size: 14px;
    display: inline;
    font-weight: bold;
  }

  /*
   * And let's slide it in from the left
   */
  #menuToggle input:checked ~ ul {
    transform: none;
  }

  h1 {
    display: flex;
    justify-content: center;
  }

  .content-flex,
  .content-section,
  .img-wrapper,
  .about-wrapper,
  .icons,
  .projects {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
  }
  .content-section {
    padding: 5px 15px 5px;
    border: 1px solid black;
    border-radius: 5px;
    margin: 5px;
    justify-content: center;
    align-items: center;
  }
  /* About section */

  .about {
    margin: 5px;
    padding: 10px;
    padding-left: 0;
    padding-bottom: 10px;
  }
  .about-img,
  .img-wrapper {
    float: right;
    border: 1px solid;
    border-radius: 50%;
    width: 20em;
    background-image: linear-gradient(#695c45, #f5d6a2);
  }
  .icons img {
    width: 5em;
    margin-top: 10px;
    padding: 10px;
  }

  .about-wrapper p {
    background-color: #615540;
    color: #efe9e6;
    padding: 1em;
    border-radius: 5px;
  }

  /* burger navbar */
  #menuToggle {
    display: block;
    position: relative;
    top: 20px;
    left: 20px;
    right: 0;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    transition: color 0.2s ease;
  }

  #menuToggle a:hover {
    color: tomato;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /* PROJECTS */

  .projectContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 10%;
  }

  .projectContainer .projectInfo img {
    width: 40em;
    max-height: 40em;
    aspect-ratio: 1/1;
    margin-top: 20px;
  }

  /* CONTACT ME */
  input,
  select,
  textarea,
  form {
    text-align: center;
    background-color: #efe9e6;
    border-radius: 5px;
    width: 40em;
    border: 1px solid;
    padding: 0.5em;
  }
  .contact-me {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
    text-align: center;
  }
}

/********************this is for the Desktop 1024 above Pixels******************************************/

@media screen and (min-width: 769px) {
  /* burger navbar */
  #menuToggle {
    display: block;
    position: relative;
    top: 20px;
    left: 20px;
    right: 0;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    transition: color 0.2s ease;
  }

  #menuToggle a:hover {
    color: tomato;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /*
   * Just a quick hamburger
   */
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #9e8a68;
    border-radius: 5px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #9e8a68;
  }

  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu {
    position: flex;
    margin: -70px 0 0 -50px;
    padding: 40px 0px 0px 75px;
    border-radius: 20px;

    /* background: #ededed; */
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #menu li {
    padding: 5px;
    font-size: 14px;
    display: inline;
    font-weight: bold;
  }

  /*
   * And let's slide it in from the left
   */
  #menuToggle input:checked ~ ul {
    transform: none;
  }

  /* Branding */
  h1 {
    display: flex;
    justify-content: center;
  }

  /* CONTENT SECTION */
  .content-flex,
  .about-wrapper,
  .icons,
  .projects,
  p,
  .contact-me {
    display: flex;
    flex-flow: nowrap row;
    justify-content: center;
    text-align: center;
  }
  .content-section {
    width: 45em;
    padding: 1em;
    border: 1px solid black;
    border-radius: 5px;
    margin: 5px;
    align-items: center;
  }
  /* About section */

  .about {
    position: relative;
    width: 100%;
  }

  .img-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .about-img {
    margin: 0 auto;
    border: 1px solid;
    border-radius: 50%;
    width: 25em;
    background-image: linear-gradient(#695c45, #f5d6a2);
  }

  .icons img {
    width: 7em;
    margin-top: 10px;
    padding: 10px;
    transition: 0.5s;
  }
  .icons img:hover {
    opacity: 0.5;
    border: solid black 1px;
    border-radius: 50%;
  }

  .about-wrapper p {
    background-color: #615540;
    color: #efe9e6;
    border-radius: 5px;
    width: 40em;
  }
  /* PROJECTS MADE */

  .project-section .projectContainer {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr 0.5fr;
    width: 100%;
  }

  .project-section .projectContainer img {
    width: 70%;
    aspect-ratio: 1/1;
    padding: 10px;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 10px;
    transition-duration: 0.5s;
  }
  .project-section .projectContainer img:hover {
    image-rendering: auto;
    opacity: 0.5;
    padding: 0px;
  }

  /* CONTACT ME */
  input,
  select,
  textarea,
  form {
    text-align: center;
    background-color: #efe9e6;
    border-radius: 5px;
    width: 40em;
    border: 1px solid;
    padding: 10px;
  }
  .contact-me {
    margin-top: 50px;
  }

  .information {
    position: relative;
    left: -5em;
  }
  .form {
    position: relative;
    left: 15em;
  }
}