* {
  box-sizing: border-box;
  overflow-x: none;
}

body {  
  
    margin: 0; 
    overflow-x: none;
    background-color: black;
}



.navigator {
  background-color: #000000;
  font-size: 1.5vw;
  
  
}

.navigator a {
  color: white;
  text-decoration: none;
  padding: 0.5vw;;
}

.navigator a:hover {
  color: gold;
  text-decoration: underline;
  text-underline-offset: 4px;
  
}

.nav-links { 
display: flex;
justify-content: flex-end;
align-content: flex-end;
padding: 1rem;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

 }


.nav-links:hover {
  color: black;
  }

.mobilenav {
  display:none;
}

.home {
  position: relative;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 95vh;
  background: #000000;
  overflow: hidden;
  padding: 1ew;
}

.imagetext {
  display: flex; 
  flex-direction: row; 
  justify-content: center;
  align-items:center;
  position: absolute;
  color: white;
  margin-bottom: 10em;
  
}



.obiPic img{
  margin: 1em;
  max-width: 18em;
  position: relative;
  filter: grayscale(100%);
}

.obiPic img:hover{
  filter: grayscale(0%);
  cursor:pointer
}

  .text-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 30em;  
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }

.text-content h1 { 
  font-size: 4rem; 
  
  
}

.scroll-down-arrow {
  position: absolute;
  cursor: pointer;
  bottom:1%
  
  
}

.second {
  text-align: center;
  
  }

.scroll-down-arrow2 {
   position: absolute;
   cursor: pointer;
   bottom:1%
  }

.about {
  position: relative;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  height: 125vh;
  background: #000000;
  overflow: hidden;
  align-items: center;
  padding: 1vw;
  
}


.about p {
  margin-top: 2vh;
  padding-left: 10vw;
  padding-right: 10vw;
  color: white;
  font-size: 1vw;
  text-align: justify;
  font-family:sans-serif ;
  letter-spacing: 1.5px;
  
}

.button-container {
  margin-top: 0;
  padding-left: 10vw;
  padding-right: 10vw;
  color: white;
  font-size: 1vw;
  font-family:sans-serif;
  letter-spacing: 1.5px;
  
}

.download-btn {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 20px;
  font-size: 16px;
  color: #0e0d0d;
  background-color:orange;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.download-btn:hover {
  background-color: #0056b3;
  transform: translateY(-3px);
  color: white
}

.skillsandservices {
  display: flex;
  flex-direction: row;
 justify-content: flex-start;
 margin-top: 5vh;
 padding-right: 10vw;
 margin-bottom: 15vh;
}

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

.skills h1{
 
  color: #ffffff;
  position: relative;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: gold;
  text-underline-offset: 0.5vw;
  font-size: 2.5rem;
  letter-spacing: 1.5px;
  font-family: "Sen", sans-serif;
  text-transform: uppercase;
}

.wrapper {   
  display: grid;
  grid-template-columns: repeat(4, 10vw);
  gap: 0.3em;
  justify-items: center;
  padding: 1vh;
  align-content: center;
  }


  .card {
  margin: 1vh;
  height: 100%;
  }

  .card img {
  width: 2.5vw;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  
  .card p {
  font-family:sans-serif ;
  text-align: center;
  color: white;
  font-size: 0.8vw;
  }


.services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services h1{
  color: #ffffff;
  position: relative;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: gold;
  text-underline-offset: 0.5vw;
  font-size: 2.5rem;
  letter-spacing: 1.5px;
  font-family: "Sen", sans-serif;
  text-transform: uppercase;
  align-items: flex-start;
}

.services ul {
list-style-type: none; 
  padding: 0;
  font-size: 1.5vw;
  text-align: center;
  margin-top: 1vh;
  font-family: "Sen", sans-serif;
}

.services ul li {
  margin-bottom: 20px; 
  color: white;
  ;
}


.services ul li::before {
  content: '•'; 
  margin-right: 10px;
  color: #ffffff; 
}





.second h1 {
  margin-top: 1vh;
  color: #ffffff;
  position: relative;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: gold;
  text-underline-offset: 0.5vw;
  font-size: 3rem;
  letter-spacing: 1.5px;
  font-family: "Sen", sans-serif;
  text-transform: uppercase;
}


.psdescription img[alt="www Page"]:hover,
.psdescription img[alt="Apple Store Logo"]:hover,
.psdescription img[alt="Google Play Get It On Logo"]:hover,
.psdescription img[alt="GitHub Logo"]:hover {
    box-shadow: 0 0 10px 5px orange;
}




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

 .biz h2 { 
  margin-top: 1vh;
  margin-bottom: 1vh;
  color: #ffffff;
  position: relative;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: gold;
  text-underline-offset: 0.5vw;
  font-size: 3rem;
  letter-spacing: 1.5px;
  font-family: "Sen", sans-serif;
  text-transform: uppercase;
} 

  .biz p{
  margin-top: 0;
  color: #ffffff;
  position: relative;
  display: inline-block;
  font-size: 0.8vw;}
  
  .works {
    position: relative;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    height:220vh;
    background: #000000;
    overflow: hidden;
    align-items: center;
    padding: 2vw;
    
  }
  
  .works h3 {
    text-decoration: underline;
    text-decoration-color: gold;
    text-underline-offset: 0.3vw;
  }
  
  .apple-store-link  {
    width: 30%
  }
  
  .works img[src="./images/apple-store-seeklogo.png"] {
    width: 36%
  }
  .works img[src="./images/get-it-on-google-play-seeklogo.png"] {
    width: 30%;
    margin-left:1%;
    margin-right: 1%  }
  
    .works img[src="./images/github-seeklogo.png"] {
    width: 10% 
  }
  .works img[src="./images/github-seeklogo2.png"] {
    width: 9% 
  }

  .works img[src="./images/60_42.png"] {
    width: 10%; 
    margin-right: 2vw
  }
  .works img[src="./images/60_43.png"] {
    width: 9%; 
    margin-right: 2vw
  }

  .projects{
    margin:5vh;
    
  }
  .pwrapper {
    display: grid;
  grid-template-columns: repeat(2, 30vw);
  grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
  gap: 0.3em;
  flex-direction: row;
  align-items:center;
  justify-items: center;
  padding-left: 10vh;
  padding-right: 10vh;
 margin-bottom: 5vh;
  }

  .psdescription{
    font-size: 2vh;
    position: sticky;
    font-family:sans-serif ;
    text-shadow: 0 0 1vh black;
    
  }

  .psdescription a:hover {
    color: orange; 
    text-decoration: underline;
    text-underline-offset: 4px;
    
  }

  .psdescription a{ 
    text-decoration: none;
  }

  .darapper {
  display: grid;
  grid-template-columns: 35vw 30vw;
  grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
  gap: 0.3em;
  flex-direction: row;
  align-items:center;
  justify-items: center;
  padding-left: 10vh;
  padding-right: 10vh;
  margin-bottom: 5vh;
  }

  

  .psimage img{
    width: 40vw;
  }

  .scroll-down-arrow3 {
    position: absolute;
    cursor: pointer;
    bottom:1%
  }

  .contact {
    position: relative;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    height: 85vh;
    background: #000000;
    overflow: hidden;
    align-items: center;
    padding: 2vw;

  }

 

  .contact-container {
    
    display: grid;
      grid-template-columns: repeat(2, 50vh);
      grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
      align-items: flex-start;
      justify-items: center;
      align-content: left;
      margin-top:8em;
      padding-left: 10em;
}


#contact-form {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}

  .contact-table {
      width: 90%;
      height: 100%;
      display:flex;
      flex-direction: column;
      align-items: left;
}
.input-row {
  height: 5vh;
  width: 45vh;  
  margin:0.2vh;
  
}

.input-row input {
  width: 100%;
  padding: 0.5vw;
  font-family: monospace ;
  
}

.input-row input::placeholder {
  font-family: monospace ;
}

.input-row2 {
  width: 45vh;
  padding: 0.5vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  
 
}

.input-row2 textarea {
  width: 100%;
  height: 100%;
  
}



button {
  padding: 0.3em;
  background-color: orange;
  color: black;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 2vh;
  font-family: inherit;
  font-size: 1.2em;
  border-radius: 0.2vw;

}


.contact-text p{
 
  color: white;
  font-size: 2vh;
  top:0;
  left:0;
  margin:0;
  padding:0;
  letter-spacing: 0.2em;
  font-family: sans-serif;
  
  
}


.socials {
  width: 60em;
  display: flex;
  flex-direction: row;
  justify-content:space-evenly;
  margin-left: 35vh;
  margin-top: 3em;
  
}

.card2 {
  margin: 1vh;
  height: 100%;
  }
  
  .card2 img {
  width: 2.5vw;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:grayscale(100%)
  }
  
  .card2 img:hover {
    filter:grayscale(0%)
  }

           






footer {
  width:100%;
  background-color: #000000;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1em;
  text-align: center;
  padding: 1vh;
  
}

.glowing {
  position: relative;
  min-width: 700px;
  height: 550px;
  margin: -150px;
  transform-origin: right;
  animation: colorChange 5s linear infinite;
}

.glowing:nth-child(even) {
  transform-origin: left;
}

@keyframes colorChange {
  0% {
    filter: hue-rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
    transform: rotate(360deg);
  }
}

.glowing span {
  position: absolute;
  top: calc(80px * var(--i));
  left: calc(80px * var(--i));
  bottom: calc(80px * var(--i));
  right: calc(80px * var(--i));
}

.glowing span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 15px;
  height: 15px;
  background: #f00;
  border-radius: 50%;
}

.glowing span:nth-child(3n + 1)::before {
  background: rgba(134,255,0,1);
  box-shadow: 0 0 20px rgba(134,255,0,1),
    0 0 40px rgba(134,255,0,1),
    0 0 60px rgba(134,255,0,1),
    0 0 80px rgba(134,255,0,1),
    0 0 0 8px rgba(134,255,0,.1);
}

.glowing span:nth-child(3n + 2)::before {
  background: rgba(255,214,0,1);
  box-shadow: 0 0 20px rgba(255,214,0,1),
    0 0 40px rgba(255,214,0,1),
    0 0 60px rgba(255,214,0,1),
    0 0 80px rgba(255,214,0,1),
    0 0 0 8px rgba(255,214,0,.1);
}

.glowing span:nth-child(3n + 3)::before {
  background: rgba(0,226,255,1);
  box-shadow: 0 0 20px rgba(0,226,255,1),
    0 0 40px rgba(0,226,255,1),
    0 0 60px rgba(0,226,255,1),
    0 0 80px rgba(0,226,255,1),
    0 0 0 8px rgba(0,226,255,.1);
}

.glowing span:nth-child(3n + 1) {
  animation: animate 10s alternate infinite;
}

.glowing span:nth-child(3n + 2) {
  animation: animate-reverse 3s alternate infinite;
}

.glowing span:nth-child(3n + 3) {
  animation: animate 8s alternate infinite; 
}

@keyframes animate {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-reverse {
  0% {
    transform: rotate(360deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  100% {
    transform: rotate(0deg);
  }
}



@media  (orientation:portrait) {

  .home{
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 95vh;
  background: #000000;
  overflow: hidden;
  padding: 2vw;
  
  }



    .wrapper {
      display: grid;
      grid-template-columns: repeat(4, 23vw);
      grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
      align-items: center;
      justify-items: center;
      align-content: center;
    }

    
    
    .navigator {
      display: flex;
      justify-content: flex-end;
      font-size: 2vw; 
    
    }

  .mobilenav {
    display: inline-block;
    position: relative;
   
}

  .navigator .nav-links { 
    display:none; 
  }


.hamburger-content {
  display:none ;
  position: absolute;
  right: 0.5vw;
  z-index:1;
  background-color: orange;
  margin-top: 1vw;
  padding-right: 2vw;
 font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
  
}

.hamburger-content a{
  color: black;
  font-size: 1rem;
  
  
}

.mobilenav:hover .hamburger-content {
  display: block;
animation: popup .5s ease-in-out both; 

}

.mobilenav span {
  transition: transform .5s;
-webkit-transition: -webkit-transform .4s;
  display: block;
  transform: rotate(90deg);
  color: white;
  margin: 1rem;
  font-size: 3rem;

}

.mobilenav:hover span {
  transition: transform .5s;
-webkit-transition: -webkit-transform .8s;
  display: inline-block;
  transform: rotate(180deg);
}

  @keyframes popup {
  from {opacity: 0;}
  to {opacity: 1;}
}  

.imagetext {
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  text-align: center; 
  top: initial; 
  left: initial; 
  transform: initial; 
  margin-bottom: 4.5em;
  
}

.text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
align-content: center;
  text-align: center;
  padding-left: 5em;
  padding-right: 5em;
  
  
  

}

.text-content h1 { 
  font-size:8.5vw; 
  text-align: center;  
}

.text-content h2 { 
  font-size:1.5vh;  
  text-align: center;

}

.obiPic { 
 
  align-items: center;
  justify-content: center;
  right: 0.3em;
  position: relative;
  
}

.obiPic img {
  max-width: 40vw; 
  filter: grayscale(100%);
}

.obiPic img:hover{
  filter: grayscale(0%);
}

.scroll-down-arrow {
  margin:0;
  cursor: pointer;
  bottom: 2%;
  
}



.scroll-down-arrow2 {
 
  margin:0;
  cursor: pointer;
  bottom: 0.5%
  
  }

  .scroll-down-arrow2 img{
    width: 10vw;
    }

  .scroll-down-arrow3 {
  margin:0;
  cursor: pointer;
  bottom: 0.5%
  }

  .scroll-down-arrow3 img{
    width: 10vw;
    }

  .about {
    position: relative;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    height: 160vh;
    overflow: hidden;
    align-items: center;
    padding: 3vw
    
  }




 .about p {
  
  padding-left: 5vw;
  padding-right: 5vw;
  color: white;
  font-size: 1.5vh;
  text-align:justify; 
  letter-spacing: 0.4px;
  
}

.download-btn {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 20px;
  font-size: small;
  color: #0e0d0d;
  background-color:goldenrod;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.skillsandservices {
  display: flex;
  flex-direction: column;
 justify-content: flex-start;
 align-items: center;
 margin-top: 5vh;
 padding-right: 10vw;
 padding-left: 10vw;
}

.entireskills {
  margin-top: 2vh;
}

.skills h1{
  margin-top: 0;
  margin-bottom: 4vh;
  font-size: 5vw;
  color: #ffffff
  
}

.entireservices{
  margin-top: 2vh;
}


.services h1{
  margin-top: 0;
  font-size: 5vw;
  color: #ffffff
}

.services ul {
  list-style-type: none; 
    padding: 0;
    font-size: 2vh;
    text-align: center;
    
  }

.card p {
  font-size: 2vw;
  margin: 1%;
font-family: "Sen", sans-serif;
text-align: center;

  }

  .card img {
    width: 5vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
   
    }
    
    .card img:hover {
      transform: scale(1.8);
    }
    
    .works img[src="./images/apple-store-seeklogo.png"] {
      width: 60%
    }
    .works img[src="./images/get-it-on-google-play-seeklogo.png"] {
      width: 60%; 
      margin-top: 1%; 
      margin-right: 10%}
    .works img[src="./images/github-seeklogo.png"] {
      width: 16% 
    }
    .works img[src="./images/60_42.png"] {
    width: 16%; 
    margin-right: 2vw
  }
  .works img[src="./images/60_43.png"] {
    width: 22%; 
    margin-right: 2vw
  }
  .works img[src="./images/github-seeklogo2.png"] {
    width: 22% 
  }

  .second h1 {
    font-size: 6vw;
    color: #ffffff;

  }

  

  .works {
    position: relative;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    height: 165vh;
    background: #000000;
    overflow: hidden;
    align-items: center;
    padding: 1vw;
    padding-left: 10vw;
    padding-right: 10vw;
    
  }

  .works a {
    font-size: 2vw;
  }

  .biz h2{
    font-size: 6vw;
    color: #ffffff

  }

  
  .biz p{
    margin-top: 0;
    color: #ffffff;
    position: relative;
    display: inline-block;
    font-size: 1vw;}

  .projects {
    margin-top: 10vh;
  }

    .pwrapper {
      display: grid;
    grid-template-columns: repeat(2, 33vw);
    grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
    gap: 0.3em;
    flex-direction: row;
    align-items:center;
    justify-items:center;
    padding-left: 10vh;
    padding-right: 10vh;
   margin-bottom: 5vh;
   margin-left: 5vh;
    }
  
    .psdescription{
      font-size: 1.3vh;
      position: sticky;
      
    }

    
  
    .darapper {
      display: grid;
    grid-template-columns: repeat(2, 30vw);
    grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
    gap: 0.3em;
    flex-direction: row;
    align-items:center;
    justify-items:center;
    padding-left: 10vh;
    padding-right: 10vh;
    
    }

    .psimage img{
      width: 55vw;
      padding-left: 0;
    }

    .contact {
      position: relative;
      display: flex; 
      flex-direction: column;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      align-items: center;
      padding: 1vw;
      padding-left: 10vw;
      padding-right: 10vw;
      
    }

    
      .contact-container {
        padding-left: 10vh;
      padding-right: 10vh;
      display: grid;
      grid-template-columns: repeat(1, 80vw);
      align-items: center;
      justify-items: center;
      margin-top:5em;
  
      }

      .contact-text{
       text-align: center;
       

      }

      .contact-text p{
        font-size: 1.5vh;

      }

      .contact-table {
        width: 100%;
        height: 100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1em;
  }

  #contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
  }

  .input-row {
    width: 100%;
    
    
  }
  
  .input-row input {
    width: 100%;
    padding: 0.2em;
    font-family: monospace ;
    font-size: 1.6vh;
    

  }
  
  .input-row input::placeholder {
    font-family: monospace ;
    font-size: 1.6vh;
    padding: 0.1em;
    
  }
  
  textarea.input-row2 {
    width: 100%;
  
  }

  textarea.input-row2::placeholder {
    font-size: 1.6vh;
  }
  
  textarea {
    width: 100%;
    font-family: monospace;
    font-size: 1.6vh;
    
 
  }
  
  
  button {
    padding: 0.3em;
    background-color: orange;
    color: black;
    border: none;
    cursor: pointer;
    width: 7em;
    margin-top:2vh;
    font-family: inherit;
    font-size: 2vh;
    border-radius: 0.2vw;

  }



  .socials {
    
    display: flex;
    flex-direction: row;
    justify-content:center;
    margin-top: 2em;
    margin-left: 0;
    
  }

  .card2 img {
    width: 5vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
   
    }
    
    .card2 img:hover {
      filter: grayscale(0%);
    }
  
  
  footer{
    font-size: 0.1em;;

  }
  
}

@media (orientation:landscape) and (max-width: 1023px) {
    
.body {
  overflow-x: hidden;
  margin: 0;
  background-color: black;
}

  .home{
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
  background: #000000;
  overflow: hidden;
  padding: 1em;
  
  }



    .wrapper {
      display: grid;
      grid-template-columns: repeat(4, 23vw);
      grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
      align-items: center;
      justify-items: center;
      align-content: center;
    }

    
    
    .navigator {
      display: flex;
      justify-content: flex-end;
      font-size: 1rem; 
      
    
    }

  .mobilenav {
    display: inline-block;
    position: relative;
   
}

  .navigator .nav-links { 
    display:none; 
  }


.hamburger-content {
  display:none ;
  position: absolute;
  right: 0.5vw;
  z-index:1;
  background-color: orange;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.hamburger-content a{
  color: black;
  font-size: 1rem;
  
}



.mobilenav:hover .hamburger-content {
  display: block;
animation: popup .5s ease-in-out both; 

}

.mobilenav span {
  transition: transform .5s;
-webkit-transition: -webkit-transform .4s;
  display: block;
  transform: rotate(90deg);
  color: white;
  margin: 1rem;
  font-size: 2rem;

}

.mobilenav:hover span {
  transition: transform .5s;
-webkit-transition: -webkit-transform .8s;
  display: inline-block;
  transform: rotate(180deg);
}

  @keyframes popup {
  from {opacity: 0;}
  to {opacity: 1;}
}  

.imagetext {
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  text-align: center; 
  padding: 10%;
  margin-bottom: 13%;
  
  
  
}

.text-content {
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items: cefnter;
  text-align: center;
  margin-top: 0;
  align-content: flex-start;
  
}

.text-content h1 { 
  font-size:150%; 
  text-align: center;  
}

.text-content h2 { 
  font-size:80%;  
  text-align: center;

}

.obiPic { 
  margin-top: 7%;
  
  
}

.obiPic img {
  max-width: 24%; 
  filter: grayscale(100%);
}
.obiPic img:hover{
  filter: grayscale(0%);
}


.scroll-down-arrow img{
  position: absolute;
  bottom: 1vh;
  transform: translateX(-50%);
  cursor: pointer;
  width: 10vw;
  
  
  }


.scroll-down-arrow2 img{
  position: absolute;
  bottom: 1vh;
  transform: translateX(-50%);
  cursor: pointer;
  width: 10vw;
  
  
  }

  .scroll-down-arrow3 img{
    position: absolute;
    bottom: 0.01vh;
    transform: translateX(-50%);
    cursor: pointer;
    width: 10vw;
    
    
    }

  .about {
    position: relative;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    height: 280vh;
    overflow: hidden;
    align-items: center;
    padding: 3vw;
    
  }




 .about p {
  
  padding-left: 5vw;
  padding-right: 5vw;
  color: white;
  font-size: 3vh;
  text-align:justify; 
  
}

.skillsandservices {
  display: flex;
  flex-direction: column;
 justify-content: flex-start;
 align-items: center;
 margin-top: 5vh;
 padding-right: 10vw;
 padding-left: 10vw;
}

.entireskills {
  margin-top: 6vh;
}


.skills h1{
  margin-top: 0;
  margin-bottom: 4vw;
  font-size: 3.5vw;
  color: #ffffff
  
}

.entireservices{
  margin-top: 6vh;
}


.services h1{
  margin-top: 0;
  font-size: 3.5vw;
  color: #ffffff
}

.services ul {
  list-style-type: none; 
    padding: 0;
    font-size: 2vw;
    text-align: center;
    
  }

.card p {
  font-size: 1vw;
  margin: 1%;
font-family: "Sen", sans-serif;
text-align: center;

  }

  .card img {
    width: 4vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    
    .card img:hover {
      transform: scale(1.8);
    }

  .second h1 {
    font-size: 4vw;
    color: #ffffff
  }

  

  .works {
    position: relative;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250vh;
    background: #000000;
    overflow: hidden;
    padding: 1vw;
    
  }

  .works a {
    font-size: 1.5vw;
  }



  .biz h2{
    font-size: 4vw;

  }

  .psdescription{
    font-size: 3vh;
  }

  .biz p{
    margin-top: 0;
    color: #ffffff;
    position: relative;
    display: inline-block;
    font-size: 1vw;}

    

    .contact {
      position: relative;
      display: flex; 
      flex-direction: column;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      align-items: center;
      padding: 1vw;
      padding-left: 10vw;
      padding-right: 10vw;
      
    }
    .contact-container {
      display: grid;
      grid-template-columns: repeat(2, 20em);
      grid-template-rows: repeat(auto-fit, minmax(1fr, 1fr));
      align-items: flex-start;
      justify-items: center;
      align-content: left;
      margin-top:2vh;
     

    }

    .contact-text{
     text-align: left;
    margin-right: 10em;
     

    }

    .contact-text p{
      font-size: 2.5vh;

    }

    .contact-table {
      width: 100%;
      height: 100%;
      display:flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 1em;
}

#contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:90%;
  margin-right: 1vw;
}

.input-row {
  width: 100%;
  
  
}

.input-row input {
  width: 100%;
  padding: 0.2em;
  font-family: monospace ;
  font-size: 2vh;
  

}

.input-row input::placeholder {
  font-family: monospace ;
  font-size: 2vh;
  padding: 0.1em;
  
}

textarea.input-row2 {
  width: 100%;

}

textarea.input-row2::placeholder {
  font-size: 2vh;
}

textarea {
  width: 100%;
  font-family: monospace;
  font-size: 2vh;
  

}


button {
  padding: 0.3em;
  background-color: orange;
  color: black;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top:2vh;
  font-family: inherit;
  font-size: 3vh;
  border-radius: 0.2vw;

}



.socials {
  
  display: flex;
  flex-direction: row;
  justify-content:center;
  margin-top: 1vh;
  margin-left:10em;
  
}

.card2 img {
  width: 3vw;
 margin-top:0;
  display: flex;
  align-items: center;
  justify-content: center;
 
  }
  
  .card2 img:hover {
    filter: grayscale(0%);
  }


footer{
  font-size: 0.1em;;

}

}