@layer reset, styles, responsive, extensions;
@import "/static/css/reset.css"  layer(reset);

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: url("/static/font/SlGVmQWMvZQIdix7AFxXkHNSbQ.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 700;
  src: url("/static/font/SlGWmQWMvZQIdix7AFxXmMh3eDs1Zw.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer styles {
    html {
        --padding: 20px;
        --bottom: 15px;
        --orange: #E36D0B;
        --gray: #4C4040;
        --left-margin: 150px;
    }

    a:link, a:visited {
        text-decoration: none;
        color: #2B2979;
    }


    body {
        background: #C4C9CF;
        font-family: 'Droid Sans', sans-serif;
        font-size: 13px;
        line-height: 18px;

        strong {
            font-weight: bold;
        }
    }

    #wrap {
        display: flex;
        justify-content: center;
        padding: 25px 0;
    }

    .page {
        width: 21cm;
        background: #fff;
        border-top: 20px solid #E26C0A;
        padding-bottom: 20px;
        box-shadow: 0 0 10px 5px #888;
    }


    .namecard {
        display: grid;
        grid-template-areas: "title picture"
                       "details picture";
        grid-template-columns: auto max-content;

        gap: 20px;
        background: #F1F1F1;
        padding: var(--padding);
        margin-bottom: var(--bottom);

        .reputation {
            img {
                height: 15px;
            }
            padding-left: 25px;
            margin-right: 5px;
        }

        .stackoverflow {
            display: flex;
        }

        .badge {
            margin-right: 5px;
            display: inline-flex;
            justify-content: center;
            align-items: center;

            &:before {
                display: inline-block;
                content: "•";
                font-size: 26px;
                padding-right: 5px;
            }

            &.gold:before {
                color: #FFCC01;
            }
            &.silver:before {
                color: #B4B8BC;
            }
            &.bronze:before {
                color: #D1A684;
            }
        }

        .details {
            grid-area: details;
        }

        h1 {
            font-size: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        h2 {
            line-height: 22px;
            margin-top: 5px;
            font-size: 16px;
            color: var(--gray);
        }

        .details {
            li {
                display: flex;
                justify-content: space-between;
            }

            strong:after {
                display: inline;
                content: ':';
            }
        }
        .picture {
            grid-area: picture;
            justify-self: end;

            img {
                width: 100%;
                height: 100%;
            }
        }
        .pdf {
            width: 32px;
            height: 32px;
            justify-self: end;
            background: url('/static/img/pdf.png');
        }
    }

    .about-me {
        padding: 0 var(--padding);
        margin-bottom: var(--bottom);
        text-align: justify;
    }

    .body {
        padding: 0 var(--padding);

        .expertise, .work, .hobbies {
            display: flex;
            gap: 15px;
        }

        h3 {
            font-size: 20px;
            line-height: 22px;
            min-width: 100px;
        }

        .area, .workplace {
            border-bottom: 1px solid #C3C3C3;
            margin-bottom: var(--bottom);

            h4 {
                font-size: 20px;
                color: var(--orange);
                display: flex;
                justify-content: space-between;

                span {
                    flex-shrink: 0;
                    background: var(--orange);
                    color: #FFF;
                    padding: 0px 10px;
                    font-size: 14px;
                }
            }

            p {
                margin: 10px 0;
                text-align: justify;
            }

            .tech {
                font-size: 10px;
            }

            .role {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: var(--gray);
            }
        }

        .hobby {
            border-bottom: 0;
            text-align: justify;
        }

    }
}

@layer responsive {
    @media screen and (max-width: 580px) {
        .namecard {
            grid-template-areas: "title picture"
                                "details details";
        }
    }
    @media screen and (max-width: 790px), print {
        .expertise, .work, .hobbies {
            display: block;

            h3 {
                margin: 15px 0;
                font-size: 25px;
            }
        }
    }
}