@font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2');}

    body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; }
    header { display: flex; justify-content: center; align-items: center; position: relative; background-color: #f7bf02; color: white; font-size: 15px; line-height: 34px; }
    header a, header a:visited, header a:active { color: #fff; text-decoration: none; }
    h2 { margin: 0px 0px 17px -5px; padding-top: 17px; font-family: Arial, sans-serif; font-size: 28px; font-weight: 400; letter-spacing: .05em; color: #1f2936; }
    h2:before { content: ""; display: inline-block; position: relative; top: 9px; width: 9px; height: 9px; margin-right: 23px; border-radius: 50%; background-color: #f7bf02; vertical-align: top; }
    p { margin: 0; line-height: 20px; letter-spacing: .02em; }
    hr { margin: 0px 128px 0px 28px; border: 0; border-top: 1px solid #efeff9; }
    a { cursor: pointer; text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: 3px; }
    a, a:visited, a:active { color: #3333f9; }
    footer { margin-top: 50px; height: 12px; background-color: #f7bf02; }
    a:focus-visible, button:focus-visible,.menu-item:focus-visible, #menu-toggle:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }

    #header-items { display: flex; justify-content: space-between; align-items: center; width: 986px; }
    h1#title { margin: 0; padding: 0; font-size: 19px; font-weight: 400; letter-spacing: .14em; }
    .title-item { display: inline-block; }
    .title-item::first-letter { font-size: 20px; }
    #menu { display: flex; gap: 19px; padding-right: 5.5px; letter-spacing: .1em; overflow: hidden; }
    #menu a:hover { color: #f9fb83; }
    .menu-item { display: inline-block; }
    .menu-item::first-letter { font-size: 15px; }
    .menu-item-selected { color: #f9fb83 !important; }
    #menu-toggle { all: unset; display: none; flex-direction: column; cursor: pointer; margin: 4px 13px 4px 0px; }
    .menu-toggle-bar { width: 25px; height: 2px; margin: 3px 0; background-color: white; }

    #content { position: relative; margin: 0px auto; max-width: 925px; transition: margin-top .05s ease; }
    #content-rail { position: absolute; top: 27px; bottom: 0px; left: -1px; border-left: solid 1px #efeff9; }
    .content-item { margin: 0px 129px 20px 52px; }
    .content-image { padding-top: 30px; }
    .additional-p { margin-top: 19.5px; }
    .external-link-icon { display: inline-block; width: 12px; height: 12px; margin-left: 4px; padding: 0px; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7 17L17 7"/%3E%3Cpath d="M7 7h10v10"/%3E%3C/svg%3E'); background-size: contain; background-repeat: no-repeat; border-radius: 0px; }

    .project { display: flex; align-items: start; gap: 45px; }
    .project img { width: 210px; height: auto; }
    .project p { max-width: 450px; }
    .project-name { display: block; margin-bottom: 11px; letter-spacing: .02em; }
    .project-ap { padding-top: 10px; padding-bottom: 10px; }

    .connections { display: flex; align-items: start; gap: 2px; margin-bottom: 6px; }
    .connection-name { width: 58px; padding: 5px 0px 5px 6px; background-color: #fafafa; letter-spacing: .04em; }
    .connection-link { padding: 4px 0px 4px 12px; letter-spacing: .04em; }

    @media screen and (max-width: 1044px) {
        #header-items { width: 100%; margin-left: 22px; }
        #menu { margin-right: 22px; }
        #content { margin-left: 46px; }
        .content-item { margin-right: 55px; }
    }

    @media screen and (max-width: 770px) {
        #header-items { margin-left: 13px; }
        #menu { flex-direction: column; position: absolute; top: 100%; left: 0; gap: 0px; background-color: #f7bf02; width: 100%; padding: 0; transition: height .05s ease; }
        #menu.active { height: 116px; }
        #menu:not(.active) { height: 0px; }
        .menu-item { margin-left: 30px; }
        #menu-toggle { display: flex; }
        #content { margin-left: 18px; }
        .content-item { margin: 0px 28px 13px 20px; }
        .content-image{ display: none; }
        h2:before { margin-right: 12px; }
        h2 { margin-bottom: 8px; padding-top: 13px; }
        hr { margin-left: 18px; margin-right: 46px; }
        .additional-p { margin-top: 13px; }
        .project { display: block; }
        .project-ap { padding-top: 0px; padding-bottom: 0px; }
        .connections { display: block;}
        .connections.content-item { margin-top: 15px; margin-bottom: 22px; }
        .connection-name { padding: 2px 0px 2px 6px; }
        .connection-link { display: block; padding: 5px 0px 0px 4px; }
    }