@font-face {
    font-family: OpenSans;
    src: url(fonts/OpenSans.ttf);
}

@font-face {
    font-family: Nerd;
    src: url(fonts/CommitMonoNerdFont-Regular.otf);
}

:root {
    --bg-25: rgb(25, 25, 25);
    --bg-30: rgb(30, 30, 30);
    --bg-35: rgb(35, 35, 35);
    --bg-40: rgb(40, 40, 40);
    --bg-45: rgb(45, 45, 45);
    --bg-50: rgb(50, 50, 50);
    --bg-55: rgb(55, 55, 55);
    --bg-60: rgb(60, 60, 60);
    --bg-100: rgb(100, 100, 100);
    --text: rgb(222, 222, 222);
    --leaf: rgb(144, 96, 150);
    --header: rgb(33, 33, 33);
    --shadow: rgba(0, 0, 0, .2);
    --ionicon: rgb(150, 150, 150);
    --transition: .4s cubic-bezier(.19,1,.22,1);
    --header-padding: 4rem;
    --side-padding: 12vw;
    --full-radius: 100rem;
}

* {
    margin: 0;
    font-family: OpenSans;
    font-size: 1.3rem;
    box-sizing: border-box;
    scroll-behavior: smooth;
    color: var(--text);
    user-select: none;
    transition: all var(--transition);
}

html, body {
    font-size: 16px !important;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--bg-30);
    position: relative;
}

header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    padding: 4rem var(--side-padding);
    width: 100%;
    position: sticky;
    top: 0;
    background-color: transparent;
    z-index: 4;
    transform: translateY(-100%);
    box-shadow: 0 0 10rem 0 var(--shadow);
}

.disable-scroll {
    overflow: hidden !important;
}

.show-header {
    background-color: var(--header);
    box-shadow: 0 0 10rem 0 var(--shadow);
    transform: translateY(0);
}

.translucent {
    box-shadow: none !important;
    background-color: transparent !important;
}

nav {
    display: inherit;
    height: fit-content;
    gap: 1rem;
}

nav {
    opacity: .65;
}

.desktop-link, .start-button {
    padding: .3rem 1rem;
}

.desktop-link, .start-button {
    height: fit-content;
    border-radius: var(--full-radius);
}

.desktop-link, .start-button {
    text-decoration: none;
    height: fit-content;
    font-size: 1.4rem;
    font-weight: 700;
    white-space: nowrap;
}

.desktop-link:hover, .show-background {
    cursor: pointer;
    background-color: var(--bg-50);

    /*
    box-shadow: 0 0 1rem 0 var(--shadow);
    font-weight: 800;
    */
}

.nav-wrapper:hover {
    cursor: pointer;
    background-color: var(--bg-60);
    opacity: .75;
}

.start-button:hover, .submit:hover {
    cursor: pointer;
    filter: brightness(.8);
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.enable-pointer-events {
    pointer-events: unset !important;
}

.gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: inherit;
    height: max-content;
    padding: 5rem;
}

.image-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
}

.image-wrapper .image-title {
    font-size: 2rem;
    font-weight: 900;
}

.image {
    min-height: 14rem;
    max-height: 14rem;
    width: 21rem;
    margin: 1rem;
    margin-bottom: 0rem;
    border-radius: .4rem;
    z-index: 2;
    border: 0;
    box-shadow: .5rem .5rem 1rem 0 var(--shadow);
}

.image-wrapper:hover > a, .image-wrapper:hover > .image {
    cursor: pointer;
    scale: 1.1;
}

.image-title {
    align-self: flex-start;
    margin-left: 1.1rem;
}

.image-description {
    display: inline-block;
    width: 22rem;
    height: fit-content;
    opacity: 0 !important;
    z-index: 1;
}

.image-description {
    font-size: 1.2rem;
    word-break: keep-all;
    padding-bottom: 1rem;
}

.image-description a {
    text-decoration: none;
}

.image-description a:hover {
    cursor: pointer;
    color: #869db8;
}

.image-wrapper:hover > .image-description, .image-wrapper:hover > .image-title {
    opacity: 1 !important;
    transform: translateY(1rem);
}

.image-wrapper:hover > .image-title {
    font-size: 2.5rem;
    margin-left: .2rem;
}

.start-button {
    grid-row: 2;
    grid-column: 1;
    width: fit-content;
    background-color: var(--leaf);
    justify-self: start;
    padding: .7rem 1.5rem;
    color: rgb(222, 222, 222);
}

.title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--side-padding);
    width: 100%;
    height: 80vh;
    gap: 5rem;
}

.button-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.graphic {
    grid-row: 1 / 4;
    grid-column: 2;
    width: 40vw;
    z-index: 1;
}

.title {
    grid-row: 1;
    grid-column: 1;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    /*
    animation: fadeIn 3s var(--transition) forwards;
    color: transparent;
    background-clip: text;
    background-image: url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZHM2MzJnajE3Y2Z1bDZrZm0xZ2FzbmNyajQwMDF2NnV4cG51ejBpeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dAiE03mEjw12b5p0iL/giphy.webp);
    background-position: center;
    background-size: cover;
    color: rgba(66, 32, 94, .5);
    */
}

.toggle-switch {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--bg-60);
    border-radius: var(--full-radius);
}

.toggle-switch:hover, .link-icon:hover {
    cursor: pointer;
    filter: brightness(.9);
}

.toggle-icon {
    display: flex;
    font-size: 1.5rem;
    background-color: var(--leaf);
    padding: .25rem;
    border-radius: var(--full-radius);
    color: var(--text);
    transition: transform var(--transition) !important;
}

.retracted-y {
    transform: translateY(-100%);
}

footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--header);
}

.footer-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 4rem;
    gap: 2rem;
    background-color: var(--bg-40);
}

.list-wrapper {
    display: flex;
    width: inherit;
    height: fit-content;
    justify-content: space-around;
    gap: 4rem;
}

.list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    opacity: .6;
}

.list-heading {
    font-size: 20px;
    font-weight: 800;
}

.list-content {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding-left: 1rem;
}

.list-item {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .6rem;
}

.list-icon, .link-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: var(--full-radius);
    background-color: var(--bg-50);
    /*box-shadow: 0 0 .5rem 0 var(--shadow);*/
}

.list-icon {
    margin-top: .1rem;
    padding: 0 !important;
    background-color: transparent !important;
}

.list-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    gap: 3rem;
}

.links {
    display: flex;
    gap: .8rem;
}

.link-icon {
    font-size: 1.4rem;
    padding: .6rem;
}

.copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1.8rem;
    background-color: var(--bg-40);
    font-size: .8rem;
    opacity: .5;
}

ion-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ionicon);
}

.test {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    background-color: var(--bg-50);
    z-index: 6;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
}

.test-child {
    height: 3rem;
    width: 2rem;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    transform: translate(100%, 2000%);
    background-color: inherit;
    border-radius: 0 8px 8px 0;
}

.test:hover {
    transform: none;
}

.content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--bg-35);
    padding: 6vw var(--side-padding);
    gap: 4rem;
}

.subtitle {
    font-size: 3.4rem;
    font-weight: 800;
}

.web-tech {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content 1fr;
    width: 100%;
    padding: 2rem;
    background-color: var(--bg-40);
    border-radius: .4rem;
    column-gap: 1rem;
}

.web-tech-heading {
    line-height: 1.6;
    grid-row: 1;
    grid-column: 2;
    font-size: 6rem;
    font-weight: 800;
}

.web-tech-text {
    grid-row: 2;
    grid-column: 2;
}

.icon-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content;
    gap: 2rem;
}

.icon-box * {
    transition-duration: .4s;
}

.icon-wrapper {
    grid-row: 1 / 3;
    grid-column: 1;
    position: relative;
}

.icon-wrapper:hover > .patch {
    background-color: #232323;
}

.icon-big {
    font-size: 20rem;
    color: var(--text);
    position: relative;
}

#html:hover {
    color: #e44d26;
}

#css:hover {
    color: #379ad6;
}

#js:hover {
    color: #f0db4f;
}

.patch {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 70%;
    margin: auto;
    background-color: var(--bg-35);
}

.patch:hover {
    background-color: #232323;
}

#jsWrapper .patch {
    width: 75%;
    height: 75%;
}

.git {
    text-decoration: none;
    color: gold !important;
}

.window {
    align-self: center;
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 30rem;
    border-radius: .4rem;
}

.window-main {
    width: 100%;
    height: 100%;
    padding: 1.7rem 2.2rem;
    font-family: Nerd;
    background-color: rgb(25, 25, 25);
    border-radius: 0 0 .4rem .4rem;
    display: inline-block;
}

.window-main * {
    width: fit-content;
    display: inline-block;
    color: rgb(222, 222, 222);
}

.window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: fit-content;
    background-color: var(--bg-50);
    border-radius: .4rem .4rem 0 0;
}

.window-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
}

.window-menu-item {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ionicon);
    padding: .5rem .7rem;
}

.window-menu-item:first-child {
    border-radius: .4rem 0 0 0;
}

.window-menu-item:hover,
.window-transform-item:hover {
    cursor: pointer;
    background-color: var(--bg-50);
}

.window-transform {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
}

.window-transform-item {
    font-size: 1.4rem;
    padding: .25rem;
}

.window-transform-item:last-child {
    border-radius: 0 .4rem 0 0;
}

.window-transform-item:first-child:hover {
    color: #4fc324;
}

.window-transform-item:nth-child(2):hover {
    color: #e8bd24;
}

.window-transform-item:last-child:hover {
   color: #fe5a4f;
}

.user-device {
    color: rgb(0, 182, 0);
}

.tilde {
    color: goldenrod;
}

.section-light {
    background-color: var(--bg-35);
}

.section-dark {
    background-color: var(--bg-30);
}

.show-topper {
    transform: translateX(0) !important;
}

.scroll-to-top {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-50);
    border-radius: 0 var(--full-radius) var(--full-radius) 0;
    padding: .4rem;
    position: fixed;
    bottom: 5rem;
    left: 0;
    z-index: 10;
    transform: translateX(-100%);
}

.scroll-to-top:hover {
    cursor: pointer;
}

.caret {
    font-size: 2rem;
}

#openMobileNav {
    font-size: 2.6rem;
    color: var(--bg-100);
    pointer-events: none;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.footer-shadow {
    display: flex;
    width: 100%;
    height: 1%;
    box-shadow: 0 0 10rem 0 var(--shadow);
    position: fixed;
    bottom: -1%;
}

.nav-icon {
    grid-row: 1;
    grid-column: 1;
    font-size: 1.8rem;
    color: var(--text);
}

#mobileNav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.4rem;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 3rem 3rem 10rem 5rem;
    background-color: var(--bg-30);
    transition-duration: .5s;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
}

.mobile-nav-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-link {
    text-decoration: none;
    font-size: 3.4rem;
    font-weight: 800;
    opacity: 0;
}   

.show-mobile-nav {
    opacity: 1 !important;
    pointer-events: unset !important;
}

.separator {
    grid-row: 2;
    grid-column: 1 / 3;
    border: 0;
    width: 100%;
    height: 3px;
    border-radius: var(--full-radius);
    background-color: var(--bg-60);
}

#closeMobileNav {
    font-size: 2.6rem;
    border-radius: var(--full-radius);
    color: var(--bg-100);
    align-self: flex-end;
}

#closeMobileNav:hover {
    cursor: pointer;
    background-color: var(--bg-60)
}

.fadeInDown {
    animation: fadeInDown var(--transition) forwards;
    animation-duration: .75s;
}

.test-image {
    align-self: center;
    width: 60rem;
}

.lost-circle {
    background-color: rgba(122, 122, 122, .1);
    width: 135vw;
    height: 182vh;
    position: fixed;
    bottom: -62rem;
    right: -62rem;
    border-radius: 100%;
    z-index: 0;
    user-select: none;
    pointer-events: none;
}

.name-form {
    display: flex;
    gap: 1rem;
    align-self: center;
}

.name-input {
    background-color: var(--bg-45);
    border-radius: .4rem;
    padding: .4rem .6rem;
    border: 0;
}

.submit {
    background-color: var(--leaf);
    border-radius: 4rem;
    padding: .7rem 1.5rem;
    border: 0;
    color: rgb(222, 222, 222);
    font-weight: 600;
}

.name-input:focus-visible {
    outline: 0;
}

/* Animations */

@keyframes drainColor {
    0% {filter: saturate(1);}
    50% {filter: saturate(0);}
    100% {filter: saturate(1);}
}

@keyframes textExplosion {
    0% {font-weight: 100; scale: 1;}
    75% {font-weight: 800; scale: 1;}
    100% {scale: 10;}
}

@keyframes fadeInDown {
    from {opacity: 0; transform: translateY(-10rem);}
    to {opacity: 1; transform: translateY(0);}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

/**/

/* Responsive Design */

@media screen and (max-width: 1728px) {
    .title {white-space: unset;}
}

@media screen and (max-width: 1536px) {

}

@media screen and (max-width: 1152px) {

}

@media screen and (max-width: 960px) {
    html {font-size: 13px !important;}
    header {padding: 3rem;}
    .logo-wrapper nav {display: none;}
    .title-box {height: 100vh;}
    .title {font-size: 4rem;}
    .start-button {font-size: 1.1rem;}
}

@media screen and (max-width: 768px) {
    html {font-size: 12px !important;}

    .footer-top {
        flex-direction: column;
    }

    .title-box {
        flex-wrap: wrap;
        gap: 4rem;
        height: fit-content;
        padding: 8vw var(--side-padding) 22vw;
        flex-direction: column-reverse;
    }

    .list-wrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .icon-big {
        font-size: 8rem;
    }

    .graphic {
        width: 90%;
    }
}

@media screen and (max-width: 576px) {
    html {font-size: 11px !important;}
}

@media screen and (max-width: 384px) {

}

@media screen and (max-width: 192px) {

}

/**/