@font-face {
    font-family: 'Google Sans';
    src: url('assets/fonts/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('assets/fonts/GoogleSans-Bold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans';
    src: url('assets/fonts/GoogleSans-BoldItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font: normal 18px 'Google Sans';
}
h1 {
    font-size: 48px;
}

h2 {
    font-size: 32px;
}

p, li {
    font-size: 16px;
}
header{
    max-width: 1280px;
    margin: auto;

    & .photo-link {
        text-decoration: none;

        & .round-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            box-sizing: border-box;
            border: 2px solid #000;
        }
    }
}
main {
    max-width: 1280px;
    margin: auto;

    & .main-text {
        text-align: center;
        background-color: rgb(246, 246, 6);
        font-size: 48px;
    }

    & .personal-information {
        border-left: 5px solid rgb(247, 6, 6);
        margin-top: 20px;

        & h2{
            text-indent: 10px;

            &::first-letter{
                color: rgb(10, 10, 237);
                font-style: italic;
            }
        }

        & p {
            margin-top: 30px;
            text-indent: 40px;
            text-align: center;
            width: 800px;
        }
    }

    & .education {
        margin: 20px 0;
        & p {
            letter-spacing: 0.4em;
        }
    }

    & .work-experience {
        max-width: 1280px;
        margin: auto;

        & h2 {
            margin-bottom: 10px;
        }
        & .main-list {
            list-style-type: none;
            & > li{
                font-weight: 500;
                text-transform: uppercase;
                margin-bottom: 15px;
                font-size: 20px;
                &::before {
                    content: '★';
                    margin-right: 5px;
                }
            }

            & .nested-list{
                padding-left: 20px;
                list-style-type: none;

                & > li{
                    font-weight: normal;
                    padding: 5px 0;
                    text-transform: lowercase;

                    &::before {
                        content: '☆';
                        margin-right: 5px;
                    }
                }
            }
        }
    }

    & .skills {
        margin-bottom: 20px;
        & h2 {
            text-transform: lowercase;
        }
        & p {
            word-spacing: 0.9em;
        }
    }

    & .contacts {
        & .links{
            display: flex;
            gap: 20px;
            margin-top: 10px;
            & a {
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: 10px;
                color: #000;
                & svg {
                    width: 20px;
                    height: 20px;
                }
                &:hover {
                    color: blue;
                    transition: .1s;
                    text-decoration: underline blue;

                    & svg {
                        fill: blue;
                    }
                }
            }
        }
        
    }
}