@media screen and (max-width: 1000px) and (orientation: landscape) {
  body {
      background-image: url(background.png);
      width: 120%;
      background-size: cover;
      height: 700vh;
      background-repeat: no-repeat;
      background-position: center;
      font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
      color: rgb(255, 255, 255);
  }


 /* NAV */

  nav {
  width: 100%;
  height: 40px;
  background-color: rgba(18, 99, 71, 0.4);
  overflow:visible;
  display: flex;
  justify-content: center;
}

nav a{
width: 150px;
display: inline block;
text-decoration: none;
font-size: 25px;
font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
color: white;
text-align: center;
justify-content:space-evenly;
padding-bottom: 0px;
}

nav a:hover {
  border-bottom: 2px solid rgb(54, 218, 185);
  transition: 0.5s;
}

ul {
  padding: 5px 12px;
  margin: 0px 2px;
  list-style: none;
  text-align: center;
  justify-content: center;
}

li {
  float:left;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-size: larger;
  text-align: center;
  justify-content: center;
  color: white;
}


  /*header title */
  h1 {
 font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(255, 255, 255);
  }
/*marcel name strong*/
  strong{
    font-style: italic;
    color:rgb(54, 218, 185);
  }
.containerintro{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */
  height: 100vh;          /* Example height for visibility, adjust as needed */
  width: 100%;
}
/*section class for header & first paragraph element */
  .introelement {
  display: flex;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  width: 50%;
  }

/*profile image*/

.introelement img{
  display: flex;
  padding-left: 40px;
  width: 40%;
  height: auto;
}

.introelement img:hover {
transform:scale(1.1);
transition: ease-in 0.3s;
transition: ease-out 0.3s;
cursor: pointer;
}


    /*social media icons*/

  .socialmedia img{
    width: 50px;
    height: auto;
    padding-right: 30px;
    display: inline-flex;
    margin-left: 8px;
    border-radius: 10px;
  }

  .socialmedia{
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    align-items: center;
  }

  .socialmedia img:hover{
    transform: scale(1.2);
    transition: transform 0.3s ease;
  }

/*Buttons for know more & contact info*/
.button1 {
  margin-left: 31%;
  padding-right: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 5px;
}

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

.button1 a{
  text-decoration: none;
  font-size: 18px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  color: white;
}

.button2 a{
  text-decoration: none;
  font-size: 18px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  color: white;
}

/*button1 styling */
.my_projects{
  font-size: 17px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  width: 180px;
  height: 70px;
  border: 1px solid rgb(54, 218, 185);
  border-radius: 40px;
  cursor: pointer;
    color: white;
  background-color: rgba(63, 60, 60, 0.314);
}

/*button2 styling */
.contact_me{
  font-size: 17px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  width: 180px;
  height: 70px;
  border: 1px solid rgb(54, 218, 185);
  border-radius: 40px;
  cursor: pointer;
  color: white;
  background-color: rgba(63, 60, 60, 0.314);
}

/*hover animation for buttons*/
.my_projects:hover{
  transform: scale(1.1);
  transition: ease-in 1.0s;
}

.contact_me:hover{
  transform:scale(1.1);
  transition: ease-in 1.0s;
}

/*after hover animation for buttons*/
.contact_me:active{
  transform: scale(0.9);
  transition: ease-out 0.3s;
}

.my_projects:active{
  transform: scale(0.9);
  transition: ease-out 0.3s;
}

/*after animation for buttons*/
.contact_me:after{
  transform: scale(1);
  transition: ease-out 0.3s;
}

.my_projects:after{
  transform: scale(1);
  transition: ease-out 0.3s;
}

/* focus animation for buttons */
.contact_me:focus{
  border: 2px solid rgb(214, 214, 184);
}

.my_projects:focus{
  border: 2px solid rgb(214, 214, 184);
}

/* about me section */
.about_me{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */
  height: auto;          /* Example height for visibility, adjust as needed */
  width: 100%;
}

.aboutme_element{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  padding: 5px 40px;
  margin: 20px;
  font-size: 20px;

}

/* icons section */
.codingicons{
  width: 100%;
  justify-content: center;
  display: inline-flex;
  overflow: visible;
  text-align: center;
   background-color: rgba(18, 99, 71);
   color: white;
   align-items: center;
   padding-top: 30px;
}

.codingicons img{
  display: inline-flex;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 50px;
  padding: 10px;
  height: 40px;
  border: 1px solid rgb(54, 218, 185);
  background-color: rgb(54, 218, 185);
  border-radius: 15px;
  box-shadow: 1px 2px 10px rgb(48, 177, 206);
}

.codingicons figcaption{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  padding-top: 5px;
}

.codingicons h5{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  font-weight: lighter;
  color: beige;
}

/*Icon transpose hover & keyframes (computer icon)*/
.computer img:hover {
animation-name: rotate-and-scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

/*keyframes for computer icon*/
@keyframes rotate-and-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(390deg) scale(1.3);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}



/*Icon transpose hover & keyframes (computer icon)*/
.bulb img:hover {
animation-name: shake-and-scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}


/*keyframes for bulb icon*/
@keyframes shake-and-scale {
  0% {
    transform: rotate(0deg) scale(1.3);
  }
  20%{
    transform: rotate(30deg) scale(1.3)
  }
  40% {
    transform: rotate(-30deg) scale(1.3);
  }
  60% {
    transform: rotate(30deg) scale(1.3);
  }
    80%{
    transform: rotate(30deg) scale(1.3)
  }
  100% {
    transform: rotate(-30deg) scale(1.3);
  }
}


/*Icon transpose hover & keyframes (team icon)*/
.team img:hover {
animation-name: skew-and-scale;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

/*keyframes for teams icon*/
@keyframes skew-and-scale {
  0% {
    transform: skewX(0deg) scale(1);
  }
  50% {
    transform: skewX(-20deg) scale(1);
  }
  100% {
    transform: skewX(0deg) scale(1);
  }
}

}




/* Mobile Responsive Design Portait Mode */
/* Styles for screens 450px wide or less */
@media screen and (max-width: 450px),(orientation: portrait) {
    body {
      background-image: url(background.png);
      width: 100%;
      background-size: cover;
      height: 170vh;
      background-repeat: no-repeat;
      background-position: center;
      font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
      color: rgb(255, 255, 255);

    }
  
 
 /* NAV */

  nav {
  width: 100%;
  height: 40px;
  background-color: rgba(18, 99, 71, 0.4);
  overflow:visible;
  display: flex;
  justify-content: center;
}

nav a{
width: 80px;
display: inline block;
text-decoration: none;
font-size: 17px;
font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
color: white;
text-align: center;
justify-content:space-evenly;
padding-bottom: 0px;
}

nav a:hover {
  border-bottom: 2px solid rgb(54, 218, 185);
  transition: 0.5s;
}

ul {
  padding: 5px 12px;
  margin: 0px 2px;
  list-style: none;
  text-align: center;
  justify-content: center;
}

li {
  float:left;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-size: larger;
  text-align: center;
  justify-content: center;
  color: white;
}


  /*header title */
  h1 {
 font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(255, 255, 255);
  }
/*marcel name strong*/
  strong{
    font-style: italic;
    color:rgb(54, 218, 185);
  }

  /*social media icons*/

  .socialmedia img{
    width: 26px;
    height: auto;
    padding: 5px;
    display: inline-flex;
    margin-left: 8px;
    border-radius: 10px;
  }

  .socialmedia{
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
    align-items: center;
  }

  .socialmedia img:hover{
    transform: scale(1.2);
    transition: transform 0.3s ease;
  }

  /*section class for header & first paragraph element */
  .containerintro {
    font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
    justify-content: center;
    padding-top: 40px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }

/*profile image*/
.introelement{
  display: flex;
  padding-left: 10px;
  width: 45%;
  height: auto;
  align-items: center;
  font-size: 14px;
}

.introelement img{
  display: flex;
  padding-left: 20px;
  width: 70%;
  height: auto;
  align-items: center;
}

.introelement img:hover {
transform:scale(1.1);
transition: ease-in 0.3s;
transition: ease-out 0.3s;
cursor: pointer;
}


/*Buttons for know more & contact info*/
.button1 {
  margin-left: 10%;
  padding-right: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.button1 a{
  text-decoration: none;
  font-size: 15px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  color: white;
}

.button2 a{
  text-decoration: none;
  font-size: 15px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  color: white;
}

/*button1 styling */
.my_projects{
  font-size: 15px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  width: 140px;
  height: 50px;
  border: 1px solid rgb(54, 218, 185);
  border-radius: 25px;
  cursor: pointer;
    color: white;
  background-color: rgba(63, 60, 60, 0.314);
}

/*button2 styling */
.contact_me{
  font-size: 15px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  width: 140px;
  height: 50px;
  border: 1px solid rgb(54, 218, 185);
  border-radius: 25px;
  cursor: pointer;
  color: white;
  background-color: rgba(63, 60, 60, 0.314);
}

/*hover animation for buttons*/
.my_projects:hover{
  transform: scale(1.1);
  transition: ease-in 1.0s;
}

.contact_me:hover{
  transform:scale(1.1);
  transition: ease-in 1.0s;
}

/*after hover animation for buttons*/
.contact_me:active{
  transform: scale(0.9);
  transition: ease-out 0.3s;
}

.my_projects:active{
  transform: scale(0.9);
  transition: ease-out 0.3s;
}

/*after animation for buttons*/
.contact_me:after{
  transform: scale(1);
  transition: ease-out 0.3s;
}

.my_projects:after{
  transform: scale(1);
  transition: ease-out 0.3s;
}

/* focus animation for buttons */
.contact_me:focus{
  border: 2px solid rgb(214, 214, 184);
}

.my_projects:focus{
  border: 2px solid rgb(214, 214, 184);
}

/* about me section */
.about_me{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */
  height: auto;          /* Example height for visibility, adjust as needed */
  width: 100%;
}

.aboutme_element{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  padding: 5px 40px;
  margin: 20px;
  font-size: 14px;

}

/* icons section */
.codingicons{
  width: 100%;
  display: inline-block;
  overflow: visible;
  text-align: center;
   background-color: rgba(18, 99, 71);
   color: white;
   align-items: center;
   padding-top: 30px;
}

.codingicons img{
  display: inline-block;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 50px;
  padding: 10px;
  height: 40px;
  border: 1px solid rgb(54, 218, 185);
  background-color: rgb(54, 218, 185);
  border-radius: 15px;
  box-shadow: 1px 2px 10px rgb(48, 177, 206);
}

.codingicons figcaption{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  padding-top: 5px;
}

.codingicons h5{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  font-weight: lighter;
  color: beige;
}

/*Icon transpose hover & keyframes (computer icon)*/
.computer img:hover {
animation-name: rotate-and-scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

/*keyframes for computer icon*/
@keyframes rotate-and-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(390deg) scale(1.3);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}



/*Icon transpose hover & keyframes (computer icon)*/
.bulb img:hover {
animation-name: shake-and-scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}


/*keyframes for bulb icon*/
@keyframes shake-and-scale {
  0% {
    transform: rotate(0deg) scale(1.3);
  }
  20%{
    transform: rotate(30deg) scale(1.3)
  }
  40% {
    transform: rotate(-30deg) scale(1.3);
  }
  60% {
    transform: rotate(30deg) scale(1.3);
  }
    80%{
    transform: rotate(30deg) scale(1.3)
  }
  100% {
    transform: rotate(-30deg) scale(1.3);
  }
}


/*Icon transpose hover & keyframes (team icon)*/
.team img:hover {
animation-name: skew-and-scale;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

/*keyframes for teams icon*/
@keyframes skew-and-scale {
  0% {
    transform: skewX(0deg) scale(1);
  }
  50% {
    transform: skewX(-20deg) scale(1);
  }
  100% {
    transform: skewX(0deg) scale(1);
  }
}
}




/*Media query for Desktop*/
@media screen and (min-width: 1024px) {
    body {
      background-image: url(background.png);
      width: 100%;
      background-size: cover;
      height: 140vh;
      background-repeat: no-repeat;
      background-position: center;
      font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
      color: rgb(255, 255, 255);
    }
  
/* NAV */

  nav {
  width: 100%;
  height: 40px;
  background-color: rgba(18, 99, 71, 0.4);
  overflow:visible;
  display: flex;
  justify-content: center;
  }

nav a{
width: 80px;
display: inline block;
text-decoration: none;
font-size: 20px;
font-family:"Roboto", Verdana, Geneva, Tahoma, sans-serif;
color: white;
text-align: center;
justify-content:space-evenly;
padding-bottom: 0px;
  }

nav a:hover {
  border-bottom: 2px solid rgb(54, 218, 185);
  transition: 0.5s;
  }

ul {
  padding: 5px 12px;
  margin: 0px 2px;
  list-style: none;
  text-align: center;
  justify-content: center;
  } 

li {
  float:left;
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-size: larger;
  text-align: center;
  justify-content: center;
  color: white;
  }

/*header title */
  h1 {
 font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    padding-right: 40px;
  }
/*marcel name strong*/
  strong{
    font-style: italic;
    color:rgb(54, 218, 185);
  }

  /*social media icons*/

  .socialmedia img{
    width: 40px;
    height: auto;
    display: inline-flex;
    border-radius: 10px;
    justify-content: center;
    padding: 20px;
    align-items: center;
  }

  .socialmedia{
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
    align-items: center;
  }

  .socialmedia img:hover{
    transform: scale(1.2);
    transition: transform 0.3s ease;
  }

  /*section class for header & first paragraph element */
  .containerintro {
    font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
    justify-content: center;
    padding-top: 40px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }

/*profile image*/
.introelement{
  display: inline-flex;
  width: 45%;
  height: auto;
  align-items: center;
  font-size: 16px;
}

.introelement img{
  display: flex;
  width: 50%;
  height: auto;
  justify-content: center;
  align-items: center;
}

.introelement img:hover {
transform:scale(1.1);
transition: ease-in 0.3s;
transition: ease-out 0.3s;
cursor: pointer;
}


/*Buttons for know more & contact info*/
.button1 {
  margin-left: 38%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 25px;
}

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

.button1 a{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  color: white;
}

.button2 a{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  color: white;
}

/*button1 styling */
.my_projects{
  font-size: 25px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  width: 160px;
  height: 50px;
  border: 1px solid rgb(54, 218, 185);
  border-radius: 25px;
  cursor: pointer;
    color: white;
  background-color: rgba(63, 60, 60, 0.314);
}

/*button2 styling */
.contact_me{
  font-size: 25px;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  font: bold;
  width: 160px;
  height: 50px;
  border: 1px solid rgb(54, 218, 185);
  border-radius: 25px;
  cursor: pointer;
  color: white;
  background-color: rgba(63, 60, 60, 0.314);
}

/*hover animation for buttons*/
.my_projects:hover{
  transform: scale(1.1);
  transition: ease-in 1.0s;
}

.contact_me:hover{
  transform:scale(1.1);
  transition: ease-in 1.0s;
}

/*after hover animation for buttons*/
.contact_me:active{
  transform: scale(0.9);
  transition: ease-out 0.3s;
}

.my_projects:active{
  transform: scale(0.9);
  transition: ease-out 0.3s;
}

/*after animation for buttons*/
.contact_me:after{
  transform: scale(1);
  transition: ease-out 0.3s;
}

.my_projects:after{
  transform: scale(1);
  transition: ease-out 0.3s;
}

/* focus animation for buttons */
.contact_me:focus{
  border: 2px solid rgb(214, 214, 184);
}

.my_projects:focus{
  border: 2px solid rgb(214, 214, 184);
}

/* about me section */
.about_me{
  display: flex;
  justify-content: center;
  align-items: center;    /* Centers vertically */
  height: auto;          /* Example height for visibility, adjust as needed */
  width: 100%;
}

.aboutme_element{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  padding: 5px 40px;
  margin: 20px;
  font-size: 20px;

}

/* icons section */
.codingicons{
  width: 100%;
  display: inline-flex;
  overflow: visible;
  text-align: center;
   background-color: rgba(18, 99, 71);
   color: white;
   align-items: center;
   padding-top: 30px;
   justify-content: center;
}

.codingicons img{
  display: inline-flex;
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 50px;
  padding: 10px;
  height: 40px;
  border: 1px solid rgb(54, 218, 185);
  background-color: rgb(54, 218, 185);
  border-radius: 15px;
  box-shadow: 1px 2px 10px rgb(48, 177, 206);
}

.codingicons figcaption{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 25px;
  padding-top: 5px;
}

.codingicons h5{
  font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  font-weight: lighter;
  color: beige;
}

/*Icon transpose hover & keyframes (computer icon)*/
.computer img:hover {
animation-name: rotate-and-scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

/*keyframes for computer icon*/
@keyframes rotate-and-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(390deg) scale(1.3);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}



/*Icon transpose hover & keyframes (computer icon)*/
.bulb img:hover {
animation-name: shake-and-scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}


/*keyframes for bulb icon*/
@keyframes shake-and-scale {
  0% {
    transform: rotate(0deg) scale(1.3);
  }
  20%{
    transform: rotate(30deg) scale(1.3)
  }
  40% {
    transform: rotate(-30deg) scale(1.3);
  }
  60% {
    transform: rotate(30deg) scale(1.3);
  }
    80%{
    transform: rotate(30deg) scale(1.3)
  }
  100% {
    transform: rotate(-30deg) scale(1.3);
  }
}


/*Icon transpose hover & keyframes (team icon)*/
.team img:hover {
animation-name: skew-and-scale;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

/*keyframes for teams icon*/
@keyframes skew-and-scale {
  0% {
    transform: skewX(0deg) scale(1);
  }
  50% {
    transform: skewX(-20deg) scale(1);
  }
  100% {
    transform: skewX(0deg) scale(1);
  }
}
}