:root{
      --title-color: #fff;
      --background: url(IMAGES/background3.jpg); 
      --button-background: #4b4bffce;
      --titlesize: 2rem;
}

* {
      margin: 0;
      padding: 0;
}

html{
      font-size: 62.5%;
      font-family: sans-serif;
      background-image: var(--background);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
}

/* BUTTON */
button{
      background-color: var(--button-background);
      color: #fff;
      border-radius: 8px;
      border: transparent;
      height: 5rem;
      width: 12rem;
      font-size: 1.5rem;
}

button:hover{
      cursor: pointer;
      background-color: #0808b6;
}

/* LOGO */
.logo{
      margin-left: 10rem;
}

.logo>img{
      width: 5rem;
      height: 5rem;
}

/* HEAD */
.head{
      height: 80rem;
      display: flex;
      justify-content: center;
}

/* HEADER */
.header {
      position: fixed;
      display: flex;
      width: 120rem;
      font-size: 2rem;
      justify-content: space-between;
      padding: 1rem 5rem;
      background: #2e2d2d42;
      backdrop-filter: blur(8px);
      z-index: 1;
}

.navbar-ul{
      display: flex;
      list-style-type: none;
}

.navbar-ul>li{
      margin-top: .5rem;
      padding: 1rem 3rem;
}

.navbar-ul a{
      color: #fff;
      text-decoration: none;
}

.navbar-ul a:hover{
      color: #fae8b8;
      text-decoration: underline;
}

/* HOME */
.home{
      font-size: 2rem;
      text-align: center;
      padding-bottom: 3rem;
      padding-top: 3rem;
      border: 1px solid black;
      width: 70rem;
      height: 40rem;
      margin-top: 12rem;
      background-color: #8177776b;
      backdrop-filter: blur(2px);
}

.title{
      color: var(--title-color);
      font-weight: bold;
}

.developer{
      padding-top: 3rem;
      color: #72afff;
}

.home-skills{
      margin-top: 4rem;
}

/* ABOUT ME */

.about{
      display: flex;
      flex-direction: column;
      font-size: var(--titlesize);
      align-items: center;
      color: white;
}

.about-me{
      display: flex;
      flex-direction: column;
      text-align: center;
      padding: 2rem;
      margin-top: 2rem;
      width: 70rem;
      border: 1px solid black;
      background-color: #8177776b;
      backdrop-filter: blur(5px);
}

.about-me p{
      padding: 0px 10rem;
      text-align: start;
}

#first-paragraph{
      margin-top: 5rem;
}

#charusat{
      color: white;
}

.skills{
      display: flex;
      justify-content: space-between;
}

.technical-skills, .soft-skills{
      padding: 3rem 10rem;
      border: 1px solid black;
      background-color: #8177776b;
      backdrop-filter: blur(5px);  
      width: 20rem;
      height: 30rem;
      margin: 2rem 2rem;
}

.technical-skills > p, .soft-skills > p{
      text-align: center;
      padding-bottom: 3rem;
      text-decoration: underline;
}

.skills-ul{
      list-style-type: none;
}

.skills-ul li{
      padding-top: 1rem;
}


/* CONTACT ME */
.title{
      text-align: center;
      font-size: var(--titlesize);
}

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

.contact-me{
      border: 1px solid black;
      background-color: #8177776b;
      backdrop-filter: blur(5px);
      width: 70rem;
      font-size: 1.5rem;
      color: white;
      text-align: center;
      margin: 100px 0px;
}

.contact-me-title{
      margin-top: 20px;
}

.contact-me-body{
      font-size: 2rem;
      margin-top: 20px;
}

.contact-me-email>a{
      text-decoration: none;
      color: white;
}

.contact-me-email{
      margin: 20px 0px;
      background-color: var(--button-background);
      border-radius: 8px;
      border: transparent;
      height: 5rem;
      width: 12rem;
      font-size: 1.5rem;
}

.contact-me-email:hover{
      cursor: pointer;
      background-color: #0808b6;
}

/* FOOTER */

.footer{
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: rgb(19, 17, 17);
      font-size: 2rem;
}

.social-media{
      margin: 5rem 2rem;
}

.social-media img{
      width: 3.2rem;
      height: 3.2rem;
}

.social-media>a{
      color: white;
      text-decoration: none;
      margin: 0px 5rem;
}

.copyright{
      margin: 3rem 2rem;
}

.copyright>p{
      color: white;
}

/* PROJECT */
.projects{
      margin: 10rem 0px;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
}

.p:hover{
      backdrop-filter: blur(10px);
      box-shadow: 0px 0px 91px -21px rgb(4, 0, 255);
}

.projects-title{
      width: 50rem;
      padding: 2rem;
      border: 1px solid black;
      background-color: #8177776b;
      backdrop-filter: blur(5px);
}

.projects img{
      height: 20rem;
      width: 28rem;
      padding: 1rem;
}

.project-desc p{
      font-size: 2rem;
      padding: 1rem;
      color: white;
}

.project-desc>.ptitle{
      margin-top: 3rem;
      text-align: center;
      font-weight: bold;
      font-size: 2rem;
}

.p4 img{
      height: 30rem;
      width: 20rem;
}

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

.vertical{
      margin-top: 5rem;
      height: 250rem;
      width: 3rem;
      background-color: #0000ff75;
}

.all-projects{
      display: flex;
}

.p{
      width: 30rem;
      margin: 10rem 0;
      border: 1px solid black;
      background-color: #8177776b;
      backdrop-filter: blur(5px);
}

.button{
      margin: 2rem 0px;
      text-align: center;
      
}

.pro{
      display: flex;
      align-items: center;
}

.hr{
      width: 20rem;
      height: 3rem;
      background-color: #0000ff75;
}

.left,.right{
      display: flex;
      flex-direction: column;
      margin-top: 10rem;
}

.right{
      margin-top: 40rem;
}

/* MEDIA QUERY FOR RESPONSIVENESS */

@media(max-width: 1245px){
      html{
            font-size: 55%;
      }
}

@media(max-width: 998px){
      html{
            font-size: 45%;
      }
}

@media(max-width: 840px){
      html{
            font-size: 40%;
      }
}

@media(max-width: 768px){
      html{
            font-size: 35%;
      }
}

@media(max-width: 655px){
      html{
            font-size: 30%;
      }
}

@media(max-width: 565px){
      html{
            font-size: 25%;
      }
}

@media(max-width: 463px){
      html{
            font-size: 15%;
      }
}

@media(max-width: 285px){
      html{
            font-size: 5%;
      }
}