<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?&family=Poppins:ital,wght@0,400;0,700;1,500&display=swap" rel="stylesheet">* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


a {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #4a4e69;
}

a:hover {
    text-shadow: 1px 1px 2px #f1c0e8;
    transform: scale(1.1);
    transition: 0.1s ease-in-out;
}

ul li a img {
    width: 30px;
    padding-bottom: 20px;
}

a img:hover {
    text-shadow: 1px 1px 3px #b8c0ff;
    transform: scale(1.1);
    transform: 0.1s ease-in-out;
    ;
}

nav {
    display: flex;
    justify-content: space-around;
    height: 40px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #64b5f6;
    box-shadow: 1px 1px 3px black;
    background: #bbdefb;
    position: sticky;
    z-index: 1000;
    top: 0;
    width: 95vw;
    border-radius: 20px;

}

nav:hover {
    
    box-shadow: 1px 1px 4px #90caf9;
    transform: scale(1.01);
    transition: 0.1s ease-in-out;
}


nav ul {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
}

nav ul li {
    padding-right: 20px;
    padding-bottom: 10px;
    list-style: none;
    /* font-size: 20px; */
}

/* header section */
header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    height: 600px;
    margin-top: 100px;
}

.intro {
    height: 328px;
    flex-basis: 50%;
    margin: 0 40px;
    padding: 20px;
    background-color: #ffcdb2;
    border: 1px solid #ffb4a2;
}

.intro:hover {
    cursor: text;
    border-radius: 10px;
    box-shadow: 1px 1px 3px #e5989b;
    transition: 0.3s ease-in-out;
}

.intro>p:hover {
    text-shadow: 1px 1px 4px #b5838d;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-style: oblique;
    letter-spacing: 2px;
    word-spacing: 5px;
    line-height: 1.8;
    color: #001d3d;
}

.pic {
    height: 389px;
    flex-basis: 50%;
    margin: 0 20px;
    padding: 10px;
    background-image: url('shalini-pic.jpg');
    background-size: cover;
    /* Adjust as needed */
    background-position: center center;
    /* Adjust as needed */
    background-repeat: no-repeat;
    background-blend-mode: normal;
    transform: all 1s ease-in-out;
}

.pic:hover {
    cursor: pointer;
    background-color: #222;
    background-blend-mode: soft-light;
    border-radius: 10px;
    box-shadow: 2px 2px 4px #bc4749;
}

.text {
    color: white;
    text-align: center;
    padding: 50px;
}

/* education-section*/

.education {
    text-align: center;
    margin: 0 200px;
    padding: 50px 100px;
    background: linear-gradient(to left, #dab6fc, #8e94f2);
    border-radius: 6px;
}

h1 {
    font-size: 56px;
    text-decoration: underline;
}

.flex-box {
    display: flex;
    justify-content: space-between;
    gap: 70px;
    width: 650px;
    margin-left: 100px;
    margin-top: 10px;
    padding: 40px;
    text-align: center;
    border: 1px solid #7b2cbf;
    border-radius: 10px;
}

.flex-box:hover {
    cursor: text;
    box-shadow: 1px 1px 4px #5a189a;
    transform: 0.1s ease-in-out;
    background-color: #9d4edd;
}

.details {
    font-size: 20px;
    color: black;
    line-height: 1.5;
    flex-basis: 80%;
}

.logo {
    width: 100px;
    margin: auto;
}

.logo img {
    width: 150px;
    border-radius: 150px;
    box-shadow: 1px 1px 4px #2b2d42;
}

button a img {
    width: 22px;
}

button a {
    padding-left: 30px;
}

button {
    width: 110px;
    text-align: left;
    line-height: 1;
    background-color: #9d4edd;
    color: white;
    font-size: 15px;
    border: 1px solid white;
}

button:hover {
    cursor: pointer;
    background-color: #c77dff;
    box-shadow: 1px 1px 3px #ffffff;
}

/* project-section */

#projects h1 {
    text-align: center;
    margin-top: 100px;
    padding-top: 60px;
}

.projects{
    width: 95vw;
    margin:50px 30px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: 500px;
    gap: 20px;
}

.box {
    display: flex;
    flex-direction: column;
    border: 1px solid #03045e;
    background: linear-gradient(to top left,#fbc2eb, #a18cd1);
    border-radius: 6px;
    box-shadow: 1px 3px 4px #000000;
}

.preview {
    flex-basis: 50%;
    background-size: cover;
    background-position: top;
    align-items: center;
    background-color: #222;
    background-blend-mode: soft-light ;
    transition: all 1s ease-in-out;
    cursor: pointer;
   
}

.preview:hover{
    background-blend-mode: normal;
    background-position: center;
}

.about{
    padding: 10px;
    text-align: center;
    flex-basis: 50%;
    border-radius: 8px;
    box-shadow: 2px 2px 5px  #9262c9 ;
    backdrop-filter: blur(8px);
}

.about h2{
    text-align: center;
    letter-spacing: 2px;
    font-size: 30px;
    text-decoration: underline ;
}


.button{
    display: flex;
    justify-content: space-around;
    margin: 10px;
}

.about button{
    width: 115px;
    height: 30px;
    text-align: center;
    background: linear-gradient(to top left,#ffffffff,#ffffff55);
    backdrop-filter: blur(8px);
    color: #03045e;
}

span{
    text-decoration: underline;
}

/* contact */
.contact{
    margin: 60px;
    display: flex;
    justify-content: space-between;
}

.contact button{
    width: 300px;
    background-color: #023e8a;
    text-align: center;
    color: white;
}

.contact button:hover{
    background-color: #03045e;
}

.contact button a{
    all: unset;
}



/* skill */
.skills {
    margin: 100px 40px;
    text-align: center;
}

.topic{
    display: flex;
    justify-content: space-evenly;
    text-decoration: underline;
}

.col ul li{
    padding-top: 10px;
    text-align: justify;
    font-size: 18px;
}

/* mode change */
.dark{
    /* background-color: black; */
    background: linear-gradient(to bottom right,#343a40,#212529);
    color: whitesmoke;
}

.light{
    background-color: whitesmoke;
    color: black;
}