.main {
    padding-top: 8rem;
}

/* top-main */

.top-main {
    min-height: 100vh;
}

.top-main-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.top-main__title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.top-main__img-wrapper {
    flex-basis: 50%;
}

.top-main__img-wrapper img {
    width: 100%;
}

.call-action-wrapper {
    text-align: center;
}

.call-action-wrapper p {
    justify-self: center;
    margin: 8rem auto 3rem auto;
}

/* middle-main */

.middle-main {
    margin-top: 8rem;
}

.about-site {
    position: relative;
}

.arrow-img-wrapper {
    width: 10%;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: -1;
    opacity: .5;
}

.arrow-img-wrapper img {
    width: 100%;
}

.about-site__tech {
    width: 100%;
    direction: ltr;
    box-shadow: var(--box-shadow);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    justify-content: center;
    padding: 3rem 4rem;
    place-self: center;
    margin: 6rem 0;
    gap: 1rem;
}

.about-site__tech span {
    border-radius: 12px;
    padding: .6rem 1.5rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: all .35s;
    backdrop-filter: blur(25px);
    background-color: rgba(255, 255, 255, 0.5);
}

html.dark .about-site__tech span {
    background-color: rgba(255, 255, 255, 0.1);
}

@keyframes techBounceOnce {
    0% {
        transform: translateY(0);
        background-color: inherit;
    }
    50% {
        transform: translateY(-4px);
        background-color: var(--new-box-hover);
    }
    100% {
        transform: translateY(0);
        background-color: inherit;
    }
}

.animate-tech span {
    animation: techBounceOnce .65s ease;
}

.animate-tech span:nth-child(1) {
    animation-delay: 0s;
}

.animate-tech span:nth-child(2) {
    animation-delay: 0.4s;
}

.animate-tech span:nth-child(3) {
    animation-delay: 0.8s;
}

.animate-tech span:nth-child(4) {
    animation-delay: 1.2s;
}

.animate-tech span:nth-child(5) {
    animation-delay: 1.6s;
}

.animate-tech span:nth-child(6) {
    animation-delay: 2s;
}

.about-site__tech span:hover {
    background-color: var(--new-box-hover) !important;
    transform: translateY(-4px) !important;
}

.about-site__tech i {
    font-size: 1.8rem;
    color: var(--icon-color);
}

.about-site-wrapper {
    text-align: center;
    padding: 2rem 1rem 6rem 1rem;
}

.about-site-wrapper .req-to-portfolio {
    margin-bottom: 0;
}

.about-site__title-text {
    margin: 1rem 0;
}

.about-site__bottom-img {
    margin-top: 1rem;
    width: 60%;
    place-self: center;
    margin-left: auto;
    margin-right: auto;
}

.about-site__bottom-img img {
    width: 100%;
}

.abouts-site__title {
    margin: 6rem 0 2rem 0;
}

.code-graphy-p-wrapper p {
    max-width: 500px;
    margin: auto;
}

.code-graphy-p-wrapper p {
    margin-top: 2rem;
}

.about-site-content {
    margin-top: 6rem;
}

.about-site-content a {
    text-decoration: underline !important;
    font-weight: 600;
}

.about-site-content p {
    margin-top: 2rem;
}

.about-site__wrapper-img {
    width: 100%;
    margin-top: 3rem;
}

.about-site__wrapper-img div {
    justify-self: center;
    width: 70%;
}

.about-site__wrapper-img div:not(:first-child) {
    margin-top: 1rem;
}

.about-site__wrapper-img img {
    width: 100%;
    border-radius: 12px;
}

/* bottom main */

.bottom-main {
    margin-top: 14rem;
}

/* know-me */

.know-me {
    margin-top: 8rem;
    text-align: center;
}

.know-me-wrapper {
    padding: 2rem 1rem;
    border-radius: 12px;
    position: relative;
    background-color: var(--background-green);
}

.know-me__img {
    position: absolute;
    top: 0;
    left: 0;
    margin: 1rem;
}

.know-me__img img {
    width: 100%;
}

.know-me__title-wrapper {
    margin: 2rem 0;
}

.know-me__text-wrapper p {
    line-height: 34px;
    margin-bottom: 3rem;
}

.know-me-btn {
    margin-top: 3rem;
    place-self: center;
}

/* responsive */

@media only screen and (max-width: 1200px) {
    .top-main-wrapper {
        flex-direction: column;
        gap: 2.4rem;
    }

    .top-main__img-wrapper {
        width: 50%;
    }
}

@media only screen and (max-width: 800px) {
    .top-main__img-wrapper {
        width: 70%;
    }

    .about-site__tech span {
        font-size: 1rem;
    }

    .about-site__tech i {
        font-size: 1.2rem;
    }

    .about-site__bottom-img {
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    .about-site__tech span {
        padding: .5rem;
    }

    .about-site__tech {
        padding: 2rem 1rem;
    }

    .arrow-img-wrapper {
        width: 18%;
    }
}

@media only screen and (max-width: 500px) {
    .top-main__img-wrapper {
        width: 80%;
    }
}

@media only screen and (max-width: 450px) {
    .about-site__tech {
        grid-template-columns: repeat(2, auto);
    }

    .about-site__tech span {
        justify-content: flex-start;
    }

    .know-me__title-wrapper h2 {
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 350px) {
    .top-main__img-wrapper {
        width: 90%;
    }

    .about-site__tech {
        grid-template-columns: repeat(1, max-content);
        gap: 1.2rem;
    }

    .about-site__tech span {
        padding: .8rem;
    }
}