/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 400 */

.playwrite-pe {
  font-family: "Playwrite PE", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.poiret-one-regular {
    font-family: "Poiret One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}
  

/* document css */
body{
    margin:0;
    padding:0;
    background-color: #99c8d7;
}

#title_upper{
    background: linear-gradient(to right, 
    #3EE193 0%, 
    #54C9BB 31%, 
    #8394D2 100%
    );
    text-align: center;
    height:13vh;
}

#title_upper h1{
    margin:0%;
    padding:1%;
    font-weight: 1000;
}

#title_lower{
    background: linear-gradient(to right, 
    #3EE193 0%, 
    #54C9BB 31%, 
    #8394D2 100%
    );
    height:5vh;
}

#title_lower h2{
    margin:0%;
    margin-block:0%;
    height:5vh;
    background-color: rgba(255, 255, 255, 0.3); 
    padding:0;
    font-size: 1.5rem;
    text-align: center;
    width:100%;
}

/* differ */
#body_first{
    margin-top: 1.5%;
    display: flex;
    justify-content: space-around;
}

#body_first a{
    text-decoration: none;
    font-weight: 800;
    font-size:1.25rem;
    padding-bottom: 0.5%;
    border-bottom: 2px solid black;
    color: black;
}

#body_first a:hover{
    box-shadow: 5px 5px 5px rgba(0.1, 0, 0, 0.5);
}

/* differet */
#body_second{
    display: flex;
    justify-content: space-around;
    margin-top: 2%;
    /* overflow: hidden; */
}

.card{
    margin: 5% 0%;
}

/* different */
#second_middle{
    width:45%;
    padding:1%;
    background-color: rgb(128, 186, 217);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);
    max-height: 100vh;
    overflow-y: scroll; 
    padding-right: 17px; 
    scrollbar-width: none;
}


/* home */
#home_sentence{
    height:5rem;
}
#sentence{
    text-align: center;
    font-size: 2rem;
}

/* about */
#about_upper{
    display: flex;
    margin-top:1.25rem;
}
#img{
    width:100%;
    margin-right: 1rem;
}
#img img{
    width:100%;
    height:100%;
    /* border-radius: 100%; */
    box-shadow: 5px 5px 5px rgba(0.1, 0, 0, 1);
}

/* skills */
.subheading{
    margin-top:1.5rem;
}

.progress{
    margin:1rem 0;
    height:1.5rem
}

/* project */
.project{
    display: flex;
}

.inside_project{
    width:50%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    margin-left:1rem;
    margin-top:1rem;
}

.inside_project{
    padding: 1rem;
}

/* leetcode */
#Leetcode img{
    width:100%
}

/* contact */
#Contact div {
    display: flex;
}

#Contact div img{
    margin-top: 1rem ;
    margin-right:1rem;
    width:4rem;
    height:4rem;
}

/* fotter */
#Fotter{
    background: linear-gradient(to right, 
    #3EE193 0%, 
    #54C9BB 31%, 
    #8394D2 100%
    );
    height:8vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Fotter p{
    text-align: center;
    font-weight: 400;
    font-size: 1rem;
}