* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    transition: all 500ms ease;

    font-family: "poppins", sans-serif;
}

.header {
    background-color: rgb(52, 140, 212);
    display: flex;
    padding: 10px 0 10px 0;
    justify-content: space-between;
    position: sticky;
    top: 0px;
    z-index: 100;
}

.header:hover {
    padding: 20px 0 20px 0;
}

.header h3 {
    margin-left: 15px;
    color: rgb(243, 243, 243);
}

.header .box {
    margin-right: 20px;
    display: flex;
    gap: 10px;
}

.header .box a {
    color: rgb(243, 243, 243);
    text-decoration: none;
}

.header .box a:hover {
    font-size: larger;
    margin: 0 5px 0 5px;
}

#home {
    height: 100vh;
    display:  flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(243, 243, 243);
}

#about {
    height: 100vh;
    display: flex;
    background-color: rgb(33, 133, 213);
}

#about * {
    color: rgb(243, 243, 243)
}

#about .left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#about img {
    clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
    width: auto;
    height: 50%;
    /* object-position: 50% 50%; */
}

#about .right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#project {
    height: 100vh;
    display: flex;
    background-color: rgb(243, 243, 243);
}

#project .box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 10px;
}

#project .box img {
    width: 50%;
    height: 50%;
    border-radius: 10px;
}

#project .box img:hover {
    width: 70%;
    height: 70%;
}

#project .box h3 {
    font-size: 1.5rem;
}

#project .box a {
    color: black;
    text-decoration: none;
}

#contact {
    height: 100vh;
    display: flex;
    background-color: rgb(33, 133, 213);
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#contact * {
    color: rgb(243, 243, 243);
    text-decoration: none;
}

#contact .left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#contact .left h3 {
    font-size: 2rem;
}

#contact .right  {
    margin-top: 10px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#contact .right a {
    font-size: 1.5rem;
    margin-top: 10px;
}

#contact .right a:hover {
    font-size: 1.7rem;
    margin: 15px 0 15px 0;
}