*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-color:  #e8ecf1;
    font-family: Kalam;
}

header{ 
    background-color:  #87BFFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: fixed;
    width: 100%;
    padding: 2rem;
}

header a:hover{
    cursor: pointer;
    color: white;
}

header nav a{
    all: unset;
}

header nav a img{
    height: 40px;
}

.nav-left{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 30%;
    gap: 36px;
}
.nav-right{
    font-weight: bold;
    font-size: 24px;
    display: flex;
    justify-content: space-evenly;
    flex-basis: 70%;
    padding: 0 10%;
}

/*main styling start*/
.main {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    flex-grow: 1;
    padding: 24px;
    gap: 24px;
}

.main-left img {
    height: 250px;
  
}

.main-left{
    text-align: center;
    font-size: 20px;
    position: fixed;
    padding: 10% 0 0 5%;
    max-width: 450px;
}
.main-left span{
    font-weight: bold;
    font-size: 36px;
}

.main-right{
    margin-top: 100px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-basis: 70%;
    gap: 32px;

}

body ul{
    list-style: none;
}

#about{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 5%;
    gap: 40px;
}
#toolkit img{
    width: 80px;
    height: auto;
}

#toolkit{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    gap: 24px;
}

#toolkit ul{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
}

#toolkit li{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#toolkit li:hover{
    cursor: pointer;
}

.timeline{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.timeline p{
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

h1{
    font-size: 40px;
}
h2{
    font-size: 32px;
    color: #00000070;
}

.timeline ul li{
    text-align: center;
    font-size: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #00000020;
    padding-bottom: 24px;
}

.project{
    text-align: center;
}

.blog{
    text-align: center;
}








footer{
    border-top: 1px solid #4480c530;
    padding: 24px;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    font-size: 16px;
}