@font-face {
    font-family: iconfont;
    src: url(fonts/ComicShannsMonoNerdFont-Regular.otf);
}
:root {
    --bg-dark: #03162e;  /* sep line */
    --bg-mid: #1c2143;   /* right panel */
    --bg-proj: #1f2448;  /* project bg (non-hov) */
    --bg-light: #072d5b; /* left panel */

    --button-dark: #1383af;  /* normal */
    --button-light: #23b8d6; /* selected */

    --text-dark: #999999; /* project type */
    --text-norm: #d4d4d4;  /* body */
    --text-light: #ffffff; /* headers */

    --size1: 48px; /* name */
    --size2: 36px; /* categories */
    --size3: 24px; /* project titles */
    --size4: 20px; /* buttons */
    --size5: 16px  /* body, buttons */
}

.textnorm  { color: var(--text-norm); }
.textlight { color: var(--text-light); }
.textdark  { color: var(--bg-dark); }
.col { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row;}
.cntr { justify-content: center; align-items: center; }
.para {font-size: var(--size5); font-family: "Nunito"; font-weight: 300; color: var(--text-norm);}
.para a { color: inherit; }
i { color: inherit; margin: 8px; font-size: 18px;}
h3 { font-family: "Nunito"; }

/* entire document */
html {
    background: var(--bg-light);
}
body {
    display: flex;
    flex-direction: row;
    margin: 0;
}
.left-panel {
    height: 100vh;
    width: 35vw;
    top: 0;
    position: sticky;
    z-index: 1;

    justify-content: center;
    align-items: center;
    gap: 24px;

    background: var(--bg-light);
    box-shadow: 8px 0px 10px 2px var(--bg-dark);
}
.right-panel {
    width: 65vw;
    z-index: 0;

    align-items: center;

    background: var(--bg-mid);
}
::-webkit-scrollbar {
    display: none;
}


/* POPUP */
.hidden { display: none; }
.shown { display: flex; }
.popup-bg {
    width: 100vw;
    height: 100vh;
    z-index: 998;
    position: fixed;

    background-color: var(--bg-dark);
    opacity: 85%;
}
.popup-container {
    justify-content: center;
    align-items: end;
    gap: 16px;
    z-index: 999;
    left: 50%;
    top: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
}
.esc-button {
    align-items: center;
    justify-content: center;
    margin-right: -16px;
    gap: 8px;
    height: 36px;
    width: 80px;

    cursor: pointer;
    color: var(--text-dark);
    font-size: var(--size4);
    background: none;
    border: solid 4px var(--text-dark);
    border-radius: 20px;
    transition: all 0.3s ease;
}
.esc-button i { margin: 0; }
.esc-button span { color: inherit; }
.esc-button:hover {
    border-radius: 10px;
}
.popup-container-inner {
    padding: 36px;
    gap: 16px;
    align-items: center;
    justify-content: center;

    background-color: var(--bg-light);
    border-radius: 50px;
}
.popup-icon {
    font-size: 200px;
    color: var(--button-dark);
}
.popup-buttons {
    gap: 12px;
}
.popup-button {
    padding: 8px;
    gap: 8px;
    width: 220px;
    height: 56px;
    align-items: center;
    justify-content: center;

    background-color: var(--button-dark);
    border: none;
    border-radius: 40px;
    color: var(--text-norm);
    font-size: var(--size4);
    transition: all 0.2s ease;
}
.popup-button span { color: inherit; }
.popup-button i    { font-size: var(--size3); }
.popup-button:hover {
    border-radius: 20px;
    background-color: var(--button-light);
    color: var(--bg-dark);
}


/* LEFT PANEL */
.me {
    align-items: center;
}
.pfp {
    width: 15vw;
    aspect-ratio: 1/1;
    border-radius: 100%;
    margin-bottom: 32px;
    box-shadow: 0 0 10px 8px var(--bg-dark);
}
h1 {
    font-family: "Rubik Doodle Shadow";
    font-size: var(--size1);
    margin: 0;
}
.bio {
    padding-left: 40px; padding-right: 40px;
}
.links {
    gap: 16px;
    padding-bottom: 16px;
}
 .link-container {
    position: relative;
    display: grid;
    place-content: center;
    width: 72px;
    aspect-ratio: 1/1;
 }
 .link-icon, .link-shape {
    position: absolute;
    width: inherit;
    transform: rotate(0);
    transition: transform 0.2s ease;
 }
 .link-shape.normal { transform: rotate(0); }
 .link-shape.rotated { transform: rotate(20deg); }


/* RIGHT PANEL */
.project {
    background: linear-gradient(150deg,rgba(71, 74, 103, 1) 0%, var(--bg-proj) 70%);
    border-radius: 40px;

    transform: rotate3d(0) scale(1);
    transition: all 0.3s ease;

    gap: 24px;
    margin: 36px;
    padding: 24px;
    align-items: center;
}
.project:hover { transform: rotate3d(1, -1, 0, 15deg) scale(1.05); }
.thumbnail {
    width: 25vw;
    height: auto;
    aspect-ratio: auto;
    border-radius: 20px;
    transform: scale(1);
    transition: all 0.3s ease;
}
.thumbnail:hover {
    transform: scale(1.05);
}
.project-info {
    gap: 20px;
}
.project-title-div {
    align-items: center;
    margin-bottom: 0;
    gap: 24px;
}
.project-title {
    color: var(--text-norm);
    font-size: var(--size3);
    margin-top: 8px; margin-bottom: 8px;
}
.project-languages {
    background-color: var(--bg-dark);
    padding-left: 12px; padding-right: 12px;
    border-radius: 40px;
    align-items: center;
}
.project-languages i { margin-left: 4px; margin-right: 4px; }
.fa-html5     { color: #E33C2E; }
.fa-css3      { color: #254BE0; }
.fa-square-js { color: #F0D91C; }
.fa-python    { color: #F8CC40; }
.languages-label {
    padding-left: 4px;
}
.project-desc {
    width: 30vw;
    margin-top: 0; margin-bottom: 8px;
}
.project-buttons {
    gap: 4px;
    align-items: center;
    height:60px
}
.project-button {
    width: 110px;
    height: 48px;
    padding: 8px;
    justify-content: center;
    align-items: center;

    color: var(--text-norm);
    background-color: var(--button-dark);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.project-button:hover {
    height: 56px;
    background-color: var(--button-light);
    color: var(--bg-dark);
}
.project-button span {
    font-size: var(--size4);
    color: inherit;
    font-weight: 400;
}
/* border radius order: tl, tr, br, bl */
.project-button-left{ border-radius: 40px 5px 5px 40px; }
.project-button-left:hover{ border-radius: 40px 9px 9px 40px; }
.project-button-right{ border-radius: 5px 40px 40px 5px; }
.project-button-right:hover{ border-radius: 9px 40px 40px 9px; }
.download-button, .download-button-source { width: 150px; }

/* FOOTER */
footer {
    width: inherit;
    background: var(--bg-light);
    align-items: center;
    justify-content: center;
    padding-top: 16px; padding-bottom: 16px;
}
.footer-link { color: inherit; }


@media (max-width: 1200px) and (min-width: 900px) {
    h1 { font-size: var(--size2); }
}
@media(max-width: 900px) {
    body { flex-direction: column; }
    .left-panel { position: relative; }
    .left-panel, .right-panel { height: auto; width: 100vw; }
    .popup-container-inner { flex-direction: column; }
    .h1 { font-size: var(--size1); }
    .pfp { width: 30vw; }
    .project { flex-direction: column; }
    .thumbnail { width: 80vw; height: auto;}
    .project-info { align-items: center; }
    .project-desc { width: 80vw; }
}
@media (max-height: 840px) {
    .pfp { width: 15vh; }
}