style.css

body {
  background-color: #1f2333 ;
  overflow-x: hidden;
  max-width: 100%;
}


.navbar ul {
  list-style-type: none;
  background-image: linear-gradient(
    100deg,
    #1f2333,
    #2b3148
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
  overflow: hidden;
  width: 100%;
  height: 6%;
  left: 0%;
  right: 0%;
  top: 0%;
  position: fixed;
  z-index: 100;
  border: 1px inset #13505B
}

.nav-items {
  padding-right: 3%;
}

.right-nav-items {
  padding-right: 3%;
}

.nav-logo {
  padding: 0%;
  margin: 0%;
}



.logo {
  margin: 3% 0% 0% 5%;
  width: 8%
}

.nav-logo-cont {
  display: flex;
  padding: 0%;
  margin: 0%;
}

.nav-items-links {
  color: rgb(21, 243, 220);
  text-decoration: none;
  padding: 	0.9375em;
  display: block;
  text-align: center;
  font-weight: 600;
}

.navbar a:hover {
  color: black;
}

.navbar li {
  float: right;
}

.about-me-header-cont {
  margin: 4% 0% -4% 0%;
  display: flex;
  justify-content: center;
}

.about-me-header {
  color: #ECDFCC;
}

.name-cont {
  margin: 0% 0% -5% 0%
}



.skills-header {
  color: rgb(21, 243, 220)
}

.sh-cont {
  display: flex;
  justify-content: center;
}

.main-page-header {
  color: #D7D9CE;
  margin: 4% 0% -4% 0%;
}

.mph-cont {
  display: flex;
  justify-content: center;
}

/* Skill Page */

.skill-box {
  margin: 10%;
}

.skill-box-cont {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background-color: #2b3148;
  border: 3px inset rgb(21, 243, 220);
  width: 80%;
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
  text-align: center;
}

.skill-box-cont-cont {
  display: flex;
  justify-content: center;
}

.all-logo {
  width: 20%
}

.git-logo {
  width: 15%
}

.skill-logo {
  margin:0% 0% 0% 0%;
  width: 100%;
  padding: 0% 0% 0% 0%;
}

.python-word {
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
  color: rgb(21, 243, 220)
}

.logo-names {
  color:#D7D9CE
}

.pic-of-me-sum {
  display: flex;
  justify-content: space-evenly;
}

.pic-of-me{
  border-radius: 50%;
  width: 70%;
  border: 3px inset rgb(21, 243, 220);
  margin: 0% 0% 0% 40%
}

.curly-line-main-cont {
  display: flex;
  justify-content: center;
  margin: 0% 0% -5% 0%
}

.curly-line {
  width: 25%;
  margin: 0% 0% 0% 0%;
}

.sub-header-name {
  color:#D7D9CE
}

.sub-header-name-cont {
  margin: 0% 0% 0% 0%;
  display: flex;
  justify-content: center;
}

.about-me-pics-cont {
  display: flex;
  justify-content: center;
}

.abt-me-pics {
  width: 25%;
  
  border: 3px inset rgb(21, 243, 220);
  border-radius: 10%
}

.about-me-summary-header-cont {
  display: flex;
  justify-content: center;
}

.about-me-summary-header {
  color:#D7D9CE

}

.about-me-summary {
  color:#D7D9CE

}

.parents-header-cont {
  display: flex;
  justify-content: center;
}

.parents-header {
  color:#D7D9CE
}

.about-me-summary-cont2 {
  display: flex;
  justify-content: center;
}

.about-me-summary-cont {
  border: 3px inset rgb(21, 243, 220);
  width: 100%;
  padding: 1%;
  margin: 0% 10% 0% 0%
}

.about-me-summary {
  text-align: center;
  color:#D7D9CE;
  font-size: 20pt;
}


.my-interests-header-cont {
  display: flex;
  justify-content: center;
}

.my-interest-header {
  color:#D7D9CE
}

.valorant-game-head {
  color:#D7D9CE
}


.valorant-pic {
  border: 3px inset rgb(21, 243, 220);
  width: 30.1%
}

.video-game-head-cont {
  display: flex;
  justify-content: center;
  color: rgb(21, 243, 220)
}

.deadlock-pic {
  border: 3px inset rgb(21, 243, 220);
  width: 30.1%
}

.rust-pic {
  border: 3px inset rgb(21, 243, 220);
  width: 31.5%;
}

.valorant-pic-row {
  text-align: center;
}

.valorant-pic-row2 {
  display: flex;
  justify-content: space-evenly;
  margin: 0% 0% 0% 0%
}

.game-pic-words {
  color:#D7D9CE;
  font-size: 20pt;
}

.music-head-cont {
  display: flex;
  justify-content: center;
  color: rgb(21, 243, 220)
}

.all-music-img {
  width: 25%
}

.all-music-cont {
  text-align: center;
  background-image: linear-gradient(
    100deg,
    rgb(21, 243, 220),
    #D7D9CE
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.welcome-to-page {
  color: rgb(21, 243, 220)
}

.what-i-like {
  text-align: center;
  color: rgb(21, 243, 220)
}

.wrk-in-prg {
  text-align: center;
  margin-top: 10%;
  font-size: 40;
  color: red;
}

.pic-of-m1 {
  margin: 0% 10% 0% 0%
}

.curly-line-about-cont {
  display: flex;
  justify-content: center;
  margin: -7.5% 0% -5% 0%
}

.curly-line-about {
  width: 30%
}

.projects-header{
  color:#D7D9CE
}

.projects-header-cont {
  display: flex;
  justify-content: center;
  margin: 3% 0% -7.5% 0%;
}


.curly-line-project {
  width: 30%;
  margin: 0% 0% -5% 0%;
}

.curly-line-project-cont {
  display: flex;
  justify-content: center;
}


.project-sub-header {
  color: rgb(21, 243, 220)
}

.projects-python-header-cont {
  display: flex;
  justify-content: center;
}

.python-video-cont {
  display:flex;
  justify-content: center;
}

.python-summary-cont {
  display: flex;
  justify-content: center;
  width: 45%;
  border: 3px inset rgb(21, 243, 220);
  padding: 2.5%
}

.python-summary {
  color:#D7D9CE;
  font-size: 15pt;

}

.python-summary-main-cont {
  justify-content: center;
  display: flex;
}

.python-vid-header-cont {
  display: flex;
  justify-content: center;
}

.python-vid-header {
  color:rgb(21, 243, 220)
}

.read-me-cont {
  display: flex;
  justify-content: center;
}

.read-me-a {
  font-size: 15pt;
}

.read-me-a:link {
  color: rgb(21, 243, 220)
}

.read-me-a:visited  {
  color: rgb(21, 243, 220)
}

.read-me-a:hover {
  color:#D7D9CE;
}
@media only screen and (max-width: 768px) {
  .pic-of-me-sum {
    display:block;
  }

  .about-me-summary {
    font-size: 10pt;
  }

  .nav-items-links {
    padding: 	0%;
  }

  .nav-logo-cont .nav-logo .logo-link .logo {
    width: 70%
  }

  .about-me-header-cont {
    margin: 8% 0% -18% 0%;
  }

  .nav-logo, .logo-link, .logo {
    width: 28%
  }

  .all-logo {
    width: 60%
  }

  .logo-names {
    font-size: 10pt;
  }

  .main-page-header {
    margin-top: 15%;
    font-size: 20pt;
  }

  .sub-header-name{
    font-size: 20pt;

  }

  .skill-box-cont .skill-box-cont{
    margin: 0% -5% 0% -5%
  }
  
  .skill-box {
    width: 90%;
  }

  .about-me {
    color:#D7D9CE
  
  }

  .curly-line {
    width: 70%
  }

  .me-mom-fam-img {
    width: 70%
  }

  .curly-line-main-cont {
    margin: -5% 0% -12% 0%
  }

  .abt-me-pics {
    width: 45%;
    
    border: 3px inset rgb(21, 243, 220);
    border-radius: 10%
  }

  .about-me-summary-cont {
    border: 3px inset rgb(21, 243, 220);
    width: 100%;
    padding: 0% -10% 0% 0%;
    margin: 0% 0% 0% -1.9%
  }

  .welcome-to-page {
    font-size: 15pt;
  }

  .skill-box-cont {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    background-color: #2b3148;
    border: 3px inset rgb(21, 243, 220);
    width: 100%;
    padding: 0% 0% 0% 0%;
    margin: 0% 0% 0% 0%;
    text-align: center;
  }
  .pic-of-m1 {
    margin: 0% 35% 0% 0%
  }
  
  .projects-header-cont {
    margin: 9% 0% -18% 0%
  }

  .python-summary-cont {
    text-align: center;
    width: 100%;
    border: 3px inset rgb(21, 243, 220)
  }

  .curly-line-project {
    width: 70%;
    margin: 0% 0% 0% 0%
  }

  .curly-line-about {
    width: 70%;

  }


}