@font-face {
    font-family: 'material symbols outlined';
    src: url(font/icon.ttf) format('truetype');
}

@font-face {
    font-family: 'Inter';
    src: url(font/Inter.ttf) format('truetype');
}

* {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    margin: auto
}

html {
    background-color: #dddddd;
}

li {
    list-style-type: none;
}

.icon {
    font-family: material symbols outlined;
    font-size: 1.5rem;
    color: #F98152;
}

body {
    font-family: "Inter", sans-serif;
    max-width: 1000px;
    margin: auto;
    background-color: #fff;
    box-shadow: 2px 0px 10px #00000080;
}

header,
header .Name,
header div,
main,
.scroll,
.scroll article,
.ex1,
.ex2,
.education,
.education div,
.education div article,
.skills,
.skills div,
.skills div article,
.achiev,
.achiev article,
.achiev ul li,
footer,
footer ul,
footer li {
    display: flex;
    column-gap: 1rem;
}

header .Name,
main,
.scroll,
.scroll article,
.education,
.education div,
.education div article,
.skills div article,
.skills,
.achiev,
.achiev article,
.achiev ul li,
footer,
footer ul {
    flex-direction: column;
    gap: 1rem
}

H1,
H2 {
    color: #F98152;
}

header p,
.ex2,
footer {
    color: #00000080;
}


.experience,
.about {
    padding: 1rem 2rem;
}

.education,
.skills,
.achiev {
    padding: 1rem 0;
}

.hrO {
    height: 0.2rem;
    width: 80%;
    margin: auto;
    background-color: #f7d3c4;
    border: none;
    border-radius: 1rem;
}


/* HEADER */
h1 {
    font-size: 2rem;
}

header {
    position: fixed;
    justify-content: space-between;
    padding: 1rem 2rem;
    height: 7rem;
    background-color: #fff;
}

header .Name {
    flex: 3;
    gap: 1rem;
}

header img {
    width: 100%;
}

header div,
.education {
    flex: 1;
    justify-content: center;
}

.noneM {
    display: none
}

/* MAIN */
/* M - experience */

main {
    padding-top: 9rem;
}

.experience {
    overflow-x: hidden;
}

.scroll {
    gap: 2rem;
    padding: 1rem 2rem 0 0;
    height: 20rem;
    overflow-x: scroll;
    border-top: 0.5rem solid #fff;
}

.scroll article {
    gap: 0.5rem
}

.ex1 {
    justify-content: space-between;
}

.ex2 {
    gap: 0.5rem;
}

/* M - Education */

.education div,
.skills div,
.achiev ul {
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.achiev {
    padding-bottom: 10rem;
}

/* footer */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 1000Px;
    background-color: #f7d3c4;
    padding: 1rem 0;
    border-top: 0.5rem solid #fff;
}

footer ul {
    padding: 0 1rem;
}

footer li {
    align-items: center;
}



/* ORDI */

@media (min-width :768px) {

    body {
        padding: 1rem 2rem;
    }

    h1 {
        font-size: 3rem;
    }

    header {
        position: static;
    }

    main,
    header,
    .achiev article ul {
        flex-direction: row;
    }

    main {
        padding: 2rem 0;
    }

    .about {
        display: flex;
        flex-direction: column;
        gap: 2rem
    }

    .education {
        padding-top: 0;
    }

    .education div,
    .skills div,
    .achiev article {
        flex-direction: column;
        gap: 1rem
    }

    header {
        align-items: center;
    }

    header .Name {
        align-items: flex-start;
        padding-right: 20vw;
        flex: 3;
    }

    header div {
        justify-content: flex-end;
        flex: 1.5;
    }

    .experience {
        flex: 3;
    }

    .about {
        flex: 1.5
    }

    .icon {
        font-size: 1.3rem;
        padding: 0.5rem;
    }

    .scroll {
        height: fit-content;
    }

    footer,
    .hrO {
        display: none;
    }


    .noneM {
        display: flex;
        flex-direction: column;
    }

    .noneM li {
        display: flex;
        align-items: center;
        height: 2rem
    }
}