body {
  background: #9dc2f6;
  font-family: poppins;
  cursor: url("imgs/pic.jpg"), default;
  overflow: hidden;
}

.bg {
  z-index: -1;
}

.bg3 {
  width: 100%;
  position: absolute;
  bottom: 100px;
  z-index: -1;
}

.bg4 {
  width: 100%;
  position: absolute;
  bottom: 0px;
  z-index: -1;
}

.bg5 {
  width: 100%;
  position: absolute;
  bottom: 0px;
  z-index: -1;
}

.nav {
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0px 40px;
  width: max-content;
  border-radius: 30px;
  border: 4px solid white;
  margin: auto;
  margin-top: 30px;
}

nav>ul {
  list-style-type: none;
  display: flex;
  gap: 40px;
  padding: 0;
}

.a {
  color: white;
  text-decoration-line: none;
  font-weight: 600;
  font-size: 20px;
  transition: 0.2s;
}

.a:hover {
  color: #83b0ee;
}

.pfp {
  width: 200px;
  border-radius: 100%;
  border: 5px solid white;
}

.active {
  color: #83b0ee;
}
.yessa {
  color: white;
}

h1 {
  color: #5385ca;
  font-size: 5em;
  margin: 0;
}

.main-div {
  display: flex;
  width: max-content;
  margin: auto;
  margin-top: 100px;
  gap: 5rem;
}

.cloud {
  height: 3rem;
  stroke-width: 3px;
  color: #72a5ec;
}

.subtitle {
  font-weight: 700;
  font-size: 2.2em;
}

.div-subtitle {
  display: flex;
  justify-items: center;
  align-items: center;
  gap: 1rem;
  color: #72a5ec;
}

.socials {
  background-color: white;
  display: flex;

  font-weight: 500;
  gap: 1.2rem;
  width: max-content;
  padding: 0 30px;
  border-radius: 15px;
  margin: auto;
  margin-top: 50px;
}

.social-a {
  display: flex;
  gap: 0.5rem;
  color: #5385ca;
  text-decoration-line: none;
}

footer {
  background-color: #72a5ec;
  width: 100%;
  bottom: 0;
  position: absolute;
  padding: 10px;
}

footer > p {
  text-align: center;
  color: white;
  margin: 1px;
}

footer > p > a {
  color: #b2d1fc;
}

.uicons {
  color: #b2d1fc;
}

.about-me {
  background-color: white;
  margin: auto;
  width: 50rem;
  height: 250px;
  border-radius: 20px;
  padding: 5px 30px;
}

.pic {
  width: 250px;
  border-radius: 20px;
}

.about-div {
  display: flex;
  gap: 20px;
  width: max-content;
  margin: auto;
  margin-top: 50px;
}

.hi2 {
  font-size: 1.8em;
  font-weight: 700;
  color: #83b0ee;
}

.yessa2 {
  color: #5385ca;
  
}

.description {
  color: #83b0ee;
  font-weight: 500;
}

.also {
  font-style: italic;
  font-weight: 400;
  font-size: .8em;
  color: #83b0ee;
}

.tech {
  background-color: #72a5ec;
  color: white;
  width: max-content;
  padding: 20px 30px;
  border-radius: 20px;
  margin: auto;
}

.tech-text {
  font-weight: 600;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
}

.pepper {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}

.body2 {
  display: flex;
  width: max-content;
  margin: auto;
  gap: 20px;
  margin-top: 20px;
}

.vid {
  border-radius: 3px;
}

.bunny {
  font-size: small;
  font-weight: 600;
  text-align: center;
  color: #5385ca;
  margin: 0;
  margin-top: 5px;
}

.carrots {
  color: #72a5ec;
  font-size: smaller;
  font-weight: 500;

}

.project-img {
  width: 20rem;
  border-radius: 10px;
}

.project-title{
  margin:5px 10px;
  font-weight: 600;
  color: #5385ca;

}
.project-desc {
  font-size: small;
  font-weight: 500;
  color: #72a5ec;
}

.project {
  background-color: white;
  padding: 10px;
  border-radius: 15px;
  width: 20rem;
  transition: 0.3s;

}

.project:hover{
  scale: 101%;
  
}

button {
  background-color: #5385ca;
  text-decoration: none;
  border:none;
  padding: 5px 15px;
  font-family: poppins;
  border-radius: 50px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
}

button:hover{
  background-color: white;
  color: #5385ca;
  scale: 105%;
}

.buttons {
  width: max-content;
  margin: auto;
  margin-top: 10px;
  display: flex;
  gap: 10px;
  
}

.projects{
  margin: auto;
  width: max-content;
  margin-top: 50px;
  display: flex;
  gap: 20px;
}

.project-text {
  color: #5385ca;
  font-weight: 800;
  font-size: 2.5em;
  text-align: center;
}