@font-face { font-family: label; src: url(Gotham-Book.otf); }
@font-face { font-family: labelbld; src: url(Gotham-Medium.otf); }
@font-face { font-family: txt; src: url(Helvetica.ttf); }
@font-face { font-family: bld; src: url(Helvetica-Bold.ttf); }

:root
{
    --dark: rgb(0, 0, 0);
    --dark1: rgba(0, 0, 0, 0.1);
    --dark3: rgba(0, 0, 0, 0.3);
    --dark5: rgba(0, 0, 0, 0.5);
    --blue: rgb(0, 26, 179);
    --light: rgb(255, 255, 255);
    --light7: rgba(255, 255, 255, 0.7);
}

body { display: flex; flex-direction: column; align-items: center; margin: 0; min-height: 100vh; font-family: txt; font-size: 14px; line-height: 16px; color: var(--dark); background-color: var(--light); overflow-y: scroll; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background-color: var(--dark1); }
::-webkit-scrollbar-thumb { background-color: var(--dark1); }
::-webkit-scrollbar-thumb:hover { background-color: var(--dark3); }
::selection { color: var(--light); background-color: var(--blue); }

a { text-decoration: none; color: var(--dark); cursor: pointer; }
a:hover { color: var(--blue); }

body > .header { display: flex; gap: 16px 30px; width: calc(100% - 120px); max-width: 1370px; padding: 30px 60px 0 60px; font-family: label; line-height: 20px; z-index: 3; }
body > .header > .logo { width: 320px; font-size: 16px; }
body > .header > .logo > a > b { font-family: labelbld; font-weight: normal; }
body > .header > .nav { flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0 20px; font-size: 15px; }
body > .header > .nav > .grp { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 20px; }
body > .header > .nav > .grp > a { color: var(--dark5); } 
body > .header > .nav > .grp > a.on { font-family: labelbld; }
body > .header > .nav > .grp:nth-of-type(1) > a { color: var(--dark); } 
body > .header > .nav > .grp > a:hover { color: var(--blue); }
body > .header > .lang { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 6px; font-size: 14px; }
body > .header > .lang > a { color: var(--dark5); }
body > .header > .lang > a.on { font-family: labelbld; }
body > .header > .lang > a:hover { color: var(--blue); }

body > .start { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; background-color: var(--light); z-index: 999; }
body > .start > div { display: flex; gap: 16px 30px; width: calc(100% - 120px); max-width: 1370px; padding: 30px 60px 0 60px; font-family: label; line-height: 20px; }
body > .start > div > div { width: 320px; font-size: 16px; }
body > .start > div > div > b { font-family: labelbld; font-weight: normal; }

body > .slide { position: fixed; top: 0; left: 0; right: 0; bottom: 0; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
body > .slide > .elem { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
body > .slide > .elem > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }
body > .slide > .elem > .prev { position: absolute; top: 0; left: 0; right: 50%; bottom: 0; cursor: pointer; z-index: 2; }
body > .slide > .elem > .next { position: absolute; top: 0; left: 50%; right: 0; bottom: 0; cursor: pointer; z-index: 2; }
body > .slide > .elem.off { display: none; }

body > .slideSelector { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
body > .slideSelector > a { width: 8px; height: 8px; border-radius: 50%; background-color: var(--dark); }
body > .slideSelector > a.off { opacity: 0.4; }

body > .projects { display: flex; flex-wrap: wrap; gap: 30px; width: calc(100% - 120px); max-width: 1370px; padding: 60px; }
body > .projects > .elem { display: flex; flex-direction: column; width: 320px; height: 240px; position: relative; }
body > .projects > .elem > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
body > .projects > .elem > a { flex-grow: 1; display: flex; flex-direction: column; color: var(--dark); }
body > .projects > .elem > a > .txt { padding: 30px 30px 0 30px; font-family: labelbld; font-size: 15px; line-height: 18px; display: none; }
body > .projects > .elem > a > .sub { padding: 0 30px 30px 30px; font-family: label; font-size: 12px; line-height: 15px; display: none; }
body > .projects > .elem > a:hover { background-color: var(--light7); }
body > .projects > .elem > a:hover > .txt { display: block; }
body > .projects > .elem > a:hover > .sub { display: block; }

body > .project { display: flex; gap: 30px; width: calc(100% - 120px); max-width: 1370px; padding: 60px; }
body > .project > .data { flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; width: 320px; }
body > .project > .data > .title { display: flex; flex-direction: column; gap: 2px; }
body > .project > .data > .title > .txt { font-family: bld; }
body > .project > .data > .spec { display: flex; flex-direction: column; gap: 2px; }
body > .project > .data > .toggle { align-self: flex-start; }
body > .project > .data > .extra { text-align: justify; }
body > .project > .data > .extra.off { display: none; }
body > .project > .media { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
body > .project > .media > .nav { display: flex; height: 16px; }
body > .project > .media > .nav > a { display: block; }
body > .project > .media > .nav > a > img { display: block; width: 12px; height: 12px; padding: 2px 0; object-fit: contain; object-position: center; opacity: 0.5; }
body > .project > .media > .nav > a.off { display: none; }
body > .project > .media > .elem { position: relative; }
body > .project > .media > .elem > img { display: block; max-width: 1020px; max-height: 765px; }
body > .project > .media > .elem > .prev { position: absolute; top: 0; left: 0; right: 50%; bottom: 0; cursor: pointer; }
body > .project > .media > .elem > .next { position: absolute; top: 0; left: 50%; right: 0; bottom: 0; cursor: pointer; }
body > .project > .media > .elem.off { display: none; }

body > .article { display: flex; gap: 30px; width: calc(100% - 120px); max-width: 1370px; padding: 60px; }
body > .article > .data { flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; width: 320px; }
body > .article > .data > .txt { text-align: justify; }
body > .article > .data > .toggle { align-self: flex-start; }
body > .article > .data > .extra { text-align: justify; }
body > .article > .data > .extra.off { display: none; }
body > .article > .media { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
body > .article > .media > .nav { display: flex; height: 16px; }
body > .article > .media > .nav > a { display: block; }
body > .article > .media > .nav > a > img { display: block; width: 12px; height: 12px; padding: 2px 0; object-fit: contain; object-position: center; opacity: 0.5; }
body > .article > .media > .nav > a.off { display: none; }
body > .article > .media > .elem { position: relative; }
body > .article > .media > .elem > img { display: block; max-width: 1020px; max-height: 765px; }
body > .article > .media > .elem > .prev { position: absolute; top: 0; left: 0; right: 50%; bottom: 0; cursor: pointer; }
body > .article > .media > .elem > .next { position: absolute; top: 0; left: 50%; right: 0; bottom: 0; cursor: pointer; }
body > .article > .media > .elem.grayscale > img { filter: grayscale(1); }
body > .article > .media > .elem.grayscale::after { display: block; padding: 16px 0 0 0; content: attr(alt); opacity: 0; }
body > .article > .media > .elem.grayscale:hover > img { filter: none; }
body > .article > .media > .elem.grayscale:hover::after { opacity: 1; }
body > .article > .media > .elem.off { display: none; }

body > .list { display: flex; flex-direction: column; gap: 16px; width: calc(100% - 120px); max-width: 1370px; padding: 60px; }
body > .list > .side { display: flex; flex-direction: column; }
body > .list > .side > .elem { display: flex; flex-direction: column; gap: 16px; }
body > .list > .side > .elem > .title { display: flex; gap: 30px; }
body > .list > .side > .elem > .title > .txt { width: 320px; }
body > .list > .side > .elem > .title > .sub { flex-grow: 1; }
body > .list > .side > .elem > .data { display: flex; gap: 30px; padding: 0 0 16px 0; }
body > .list > .side > .elem > .data > .txt { width: 320px; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
body > .list > .side > .elem > .data > .txt > img { max-width: 320px; max-height: 320px; object-fit: cover; object-position: center; }
body > .list > .side > .elem > .data > .sub { flex-grow: 1; text-align: justify; }
body > .list > .side > .elem > .data.off { display: none; }
body > .list > .side:empty { display: none; }
body > .list > .side.s1 { gap: 16px; }
body > .list > .side.s2 { gap: 2px; }

body > .loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; font-family: label; font-size: 16px; line-height: 20px; text-align: center; color: var(--blue); }
body > .loading > b { font-family: labelbld; font-weight: normal; }

@media only screen and (max-width: 1500px) /* 1151 -> 1500 */
{
    body > .header { max-width: 1020px; }
    body > .start > div { max-width: 1020px; }
    body > .projects { max-width: 1020px; }
    body > .project { max-width: 1020px; }
    body > .project > .media > .elem > img { max-width: 670px; max-height: 502px; }
    body > .article { max-width: 1020px; }
    body > .article > .media > .elem > img { max-width: 670px; max-height: 502px; }
    body > .list { max-width: 1020px; }
}

@media only screen and (max-width: 1150px) /* 801 -> 1150 */
{
    body > .header { flex-wrap: wrap; max-width: 670px; }
    body > .header > .logo { order: 1; }
    body > .header > .nav { order: 3; width: 100%; }
    body > .header > .lang { order: 2; flex-grow: 1; }
    body > .start > div { max-width: 670px; }
    body > .projects { max-width: 670px; padding: 30px 60px 60px 60px; }
    body > .project { flex-wrap: wrap; max-width: 670px; padding: 30px 60px 60px 60px; }
    body > .project > .data { width: 100%; }
    body > .article { flex-wrap: wrap; max-width: 670px; padding: 30px 60px 60px 60px; }
    body > .article > .data { width: 100%; }
    body > .list { max-width: 670px; padding: 30px 60px 60px 60px; }
}

@media only screen and (max-width: 800px) /* 581 -> 800 */
{
    body > .projects > .elem { width: 100%; }
    body > .projects > .elem > a { justify-content: flex-end; }
    body > .projects > .elem > a > .txt { display: block; padding: 10px 30px 0 30px; background-color: var(--light7); }
    body > .projects > .elem > a > .sub { display: block; padding: 0 30px 10px 30px; background-color: var(--light7); }
    body > .projects > .elem > a:hover > .txt { background-color: transparent; }
    body > .projects > .elem > a:hover > .sub { background-color: transparent; }
    body > .project > .media > .elem > img { max-width: 100%; max-height: unset; }
    body > .article > .media > .elem > img { max-width: 100%; max-height: unset; }
}

@media only screen and (max-width: 580px) /* 280 -> 580 */
{
    body > .header { width: calc(100% - 60px); padding: 30px 30px 0 30px; }
    body > .header > .logo { width: unset; font-size: 15px; }
    body > .header > .nav > .grp { gap: 8px 12px; }
    body > .start > div { width: calc(100% - 60px); padding: 30px 30px 0 30px; }
    body > .start > div > div { width: unset; font-size: 15px; }
    body > .projects { width: calc(100% - 60px); padding: 30px 30px 60px 30px; }
    body > .project { width: calc(100% - 60px); padding: 30px 30px 60px 30px; }
    body > .article { width: calc(100% - 60px); padding: 30px 30px 60px 30px; }
    body > .list { width: calc(100% - 60px); padding: 30px 30px 60px 30px; gap: 32px; }
    body > .list > .side > .elem > .title { flex-direction: column; gap: 0; }
    body > .list > .side > .elem > .title > .txt { width: 100%; }
    body > .list > .side > .elem > .title > .sub { font-size: 12px; line-height: 15px; }
    body > .list > .side > .elem > .data { flex-direction: column; gap: 16px; }
    body > .list > .side > .elem > .data > .txt { width: 100%; }
    body > .list > .side > .elem > .data > .txt > img { max-width: 100%; max-height: 240px; }
    body > .list > .side.s1 { gap: 32px; }
    body > .list > .side.s2 { gap: 16px; }
}