*{
    margin: 0px;
    font-family: "Roboto", system-ui;
    font-style: normal;
    color: white;
    text-decoration: none;
}
body{
    background-color: #131313;
    height: 97vh;
}
.main-area{
    height: 94vh;
    width: 80vw;
    margin: 20px auto;
    display: grid;
    gap: 10px;
    grid-auto-columns: 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "github github about-me about-me about-me about-me experience experience"
    "github github about-me about-me about-me about-me experience experience"
    "projects projects anmol anmol anmol anmol experience experience"
    "projects projects anmol anmol anmol anmol skills skills"
    "projects projects anmol anmol anmol anmol skills skills"
    "projects projects anmol anmol anmol anmol skills skills"
    "resume resume resume contact contact contact social social"
    "resume resume resume contact contact contact social social";
}
.grid{
    border: 1px #171719 solid;
    border-radius: 20px;
    background-color: #171719;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
}
.grid-hover:hover{
    border: 1px #313131 solid;
    border-radius: 20px;
    /* box-shadow: 0px 0px 10px 5px #5529a64d */
}
hr{
    border-top: 2px solid;
    border-radius: 50%;
    border-image: linear-gradient(to right, #224c56 0%, #5529A6 100%) 1;
    width: 70px;
    margin: 10px 0px;
}
h3{
    font-size: 25px;
}
h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, p::selection, a::selection, img::selection{
    color: white;
    background: #5529A6;
}
img{
    -webkit-user-drag: none;
    -webkit-user-select: none;
}
#github{ 
    grid-area: github;
    position: relative;
    overflow: hidden !important;
}
.github-img{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    overflow: clip;
    -webkit-user-drag: none;
}
.github-logo{
    position: absolute;
    top: 0;
    right: 0;
    height: inherit;
    -webkit-user-drag: none;
}
.github-text{
    position: absolute;
    bottom: 10%;
    left: 7%;
}
#about-me { 
    grid-area: about-me;
    font-size: 1rem;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
}
#about-me p{
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#experience { 
    grid-area: experience;
}
#expr-data{
    height: 100%;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.data{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.data p{
    font-weight: 300;
    font-size: 0.8rem;
}
.data h5{
    font-size: 0.8rem;
    color: #9747FF;
}
#anmol { 
    grid-area: anmol;
    overflow: hidden;
    position: relative;
    gap: 20px;
    align-items: flex-start;
    justify-items: flex-end;
}
#man-in-hoodie{
    height: 100%;
    position: absolute;
    right: 0%;
    z-index: 0;
}
.anmol-gradient{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0%;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.face-logo{
    width: 30%;    
}
.anmol-content{
    z-index: 99;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0px 0px 20px 20px;
    justify-content: flex-end;
}
.anmol-text h1{
    font-size: 3rem;    
}
#skills { 
    grid-area: skills;
}
#skills-data{
    height: 100%;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.skills-details{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 7px;
}
.line-chart-bg{
    width: 100%;
    height: 10px;
    background-color: white;
    border-radius: 100px;
}
#illustrator{
    width: 90%;
    height: 100%;
    background-color: #5529A6;
    border-radius: 100px;
}
#after-effects{
    width: 50%;
    height: 100%;
    background-color: #5529A6;
    border-radius: 100px;
}
#javascript{
    width: 20%;
    height: 100%;
    background-color: #5529A6;
    border-radius: 100px;
}
#cpp{
    width: 10%;
    height: 100%;
    background-color: #5529A6;
    border-radius: 100px;
}
#photoshop{
    width: 60%;
    height: 100%;
    background-color: #5529A6;
    border-radius: 100px;
}
#premiere-pro{
    width: 30%;
    height: 100%;
    background-color: #5529A6;
    border-radius: 100px;
}
#projects { 
    grid-area: projects;
    padding-left: 0%;
    padding-right: 0%;
}
.container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}


/* Slideshow container */
.slideshow-container {
    max-width: 100%;
    height: 110%;
    position: relative;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  /* Hide the images by default */
  .mySlides {
    display: none;
    width: 100%;
    height: 100%;
  }
  
  /* Next & previous buttons */
  .prev{
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 0;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: #5529a66f;
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 0px;
    left: 33%;
    text-align: center;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;    
    height: 7px;
    width: 7px;
    margin: 0 2px;
    background-color: #5529A6;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .slide-img{
    width: 90%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .active, .dot:hover {
    background-color: #fff;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }





.inside-div{
    height: 100%;
    width: 100%;
}
#resume {
    grid-area: resume;
    background-color: #301661;
    overflow: hidden;
    position: relative;
    padding: 15px 15px 0px 15px;
}
#resume:hover {
    border: 1px solid #313131;
}
.resume-img{
    margin: 0 auto;
    width: 80%;
    height: 100%;
    overflow: clip;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.resume-text{
    z-index: 99;
    color: #ffffff;
    position: absolute;
    top: 0%;
    transition: transform 0.5s ease-in-out;
    /* transform: translateY(680%); */
    transform: translateY(385%);
    left: 5%;
}
.resume-gradient{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0%;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
/* #resume:hover .resume-text{
    top: 0%;
    transform: translateY(385%);
    animation-duration: 0.3s;
} */
.resume-img img{
    border-radius: 20px 20px 0px 0px;
    width: inherit;
    -webkit-user-drag: none;
}
#contact {
    grid-area: contact;
}
.contact-text{
    display: flex;
    flex-direction: column;
    gap: 7px;
}
#phone{
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
    height: 30px;
}
#phone-text{
    border-left: 2px solid #5529A6;
    height: 70%;
    /* border-image: linear-gradient(to bottom, #224c56 0%, #5529A6 100%) 1; */
}
#mail{
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
    height: 30px;
}
#social{
    grid-area: social;
    display: grid;
    gap: 5px;
    grid-auto-columns: 1fr; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "insta linkedin"
    "twitter fiverr";
}
.social-item{
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #171719;
}
.social-item:hover{
    border: 1px #313131 solid;
    border-radius: 1rem;
}
.fill-div {
    z-index: 99 !important;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
#insta { 
    grid-area: insta;
}
#linkedin { 
    grid-area: linkedin;

}
#twitter {
    grid-area: twitter;

}
#fiverr {
    grid-area: fiverr;
}



@media only screen and (max-width: 700px){
    body{
        background-color: #212121;
    }
    .main-area{
        height: 198vh;
        margin: 20px auto;
        display: grid;
        gap: 10px;
        grid-auto-columns: 1fr; 
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
        "anmol"
        "about-me"
        "projects"
        "skills"
        "experience"
        "github"
        "contact"
        "resume"
        "social";
    }

    #anmol {
        height: 20rem;   
    }
    #experience {
        padding-bottom: 2rem; 
    }
    #skills {
        padding-bottom: 2rem; 
    }
    #github { 
        height: 10rem;    
    }
    .github-img{
        width: 100%;
    } 
    .resume-img{
        width: 95%;
    } 
    #resume{
        height: 10rem;
    }
    #social{
        height: 10rem;
    }
}