:root {
    --background-image-url: url(https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1680000/ss_47c954880d19a167b73c0670f7396ba33f556d0d.1920x1080.jpg?t=1752569942);
}

body {
    color: white;
    overflow: hidden;
    /*rgb(39,38,38)*/
    background:
        linear-gradient(to bottom, rgb(39, 38, 38) 15%, rgba(39, 38, 38, 0) 63%),
        linear-gradient(to top, rgb(39, 38, 38) 7%, rgba(39, 38, 38, 0) 500%),
        var(--background-image-url);
    background-color: rgb(39, 38, 38);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

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

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

@font-face {
    font-family: MS Gothic;
    src: url(./fonts/msgothic.ttc);
}

main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;
}

.left-entries,
.right-entries {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.vtl {
    position: absolute;
    top: 0;
    left: 0;
    padding: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.page-border-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*200vw mobile*/
    height: 4vh;
    background: #313131;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 20%, 0 100%);
}

.page-border-1::before {
    content: "[ 03 ]";
    position: absolute;
    top: 0.5vh;
    left: 1vh;
    color: rgb(89, 89, 89);
    font-size: 2rem;
    font-family: AniMeMatrix-MB_EN;
}

.page-border-2::after {
    content: "//////////////////////////////";
    position: absolute;
    top: 20px;
    right: 10px;
    font-size: 48px;
    color: rgb(89, 89, 89);
    z-index: -1;
}


.page-border-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4vh;
    background: #313131;
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 80%, 0 0);
}

.page-border-6 {
    position: absolute;
    bottom: 4vh;
    left: 0;
    width: 100%;
    height: 50px;
    background: #312f2f;
    z-index: 1;
    clip-path: polygon(50% 100%, 76.57% 104%, 98.83% 95%, 100.27% 52%, 100% -6%, 99.83% 58%, 98.81% 90.01%, 87.6% 96%, 48.48% 98%, 1.55% 84%, 0.89% 46%, 16px -11%, 0.67% 49%, 1.32% 88%);
}

.page-border-7 {
    position: absolute;
    bottom: 4.5vh;
    left: 0.5vh;
    width: 100%;
    height: 50px;
    background: #312f2f;
    z-index: 1;
    clip-path: polygon(50% 100%, 76.57% 104%, 98.83% 95%, 100.27% 52%, 100% -6%, 99.83% 58%, 98.81% 90.01%, 87.6% 96%, 48.48% 98%, 1.55% 84%, 0.89% 46%, 16px -11%, 0.67% 49%, 1.32% 88%);
}

.page-border-8 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /*200vw mobile*/
    height: 4vh;
    background: #313131;
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 80%, 0 0);
    /*on mobile remove*/
}

.page-border-9::after {
    content: "//////////////////////////////";
    position: absolute;
    bottom: 20px;
    left: 10px;
    /*    left: 50%; mobile*/
    font-size: 48px;
    color: rgb(89, 89, 89);
    z-index: -1;
}

.page-border-4 {
    position: absolute;
    top: 4vh;
    left: 0;
    width: 100%;
    height: 50px;
    background: #312f2f;
    z-index: 1;
    clip-path: polygon(50% 0%, 76.57% -4%, 98.83% 5%, 100.27% 48%, 100% 106%, 99.83% 42%, 98.81% 9.99%, 87.6% 4%, 48.48% 2%, 1.55% 16%, 0.89% 54.00%, 16px 111%, 0.67% 51%, 1.32% 12%);
}


.page-border-5 {
    position: absolute;
    top: 4.5vh;
    left: 0.5vh;
    width: 100%;
    height: 50px;
    background: #312f2f;
    z-index: 1;
    clip-path: polygon(50% 0%, 76.57% -4%, 98.83% 5%, 100.27% 48%, 100% 106%, 99.83% 42%, 98.81% 9.99%, 87.6% 4%, 48.48% 2%, 1.55% 16%, 0.89% 54.00%, 16px 111%, 0.67% 51%, 1.32% 12%);
}

footer {
    position: absolute;
    bottom: 80px;
    padding-left: 50px;
}

.attributes {
    text-align: center;
    position: absolute;
    bottom: 25px;
    left: 50%;
    color: gray;
    font-family: "orbitron";
}

#coolsites {
    position: absolute;
    bottom: 100px;
}

#profile {
    position: absolute;
    top: 40%;
    left: 0;
}

.lt {
    padding-left: 40px;
    /*transform: perspective(21px) rotate3d(1, 0, 0, 1deg);*/
}

.rt {
    /*transform: perspective(60px) rotate3d(0, -1, 1, 1deg);*/
}

.entry h1 {
    color: gray;
    font-family: 'AniMeMatrix-MB_EN';
    text-transform: uppercase;
    letter-spacing: 3px;
    pointer-events: none;
}

.lt h1::after {
    content: '';
    position: absolute;
    top: 60px;
    width: 200px;
    left: 80px;
    height: 3px;
    background-color: #312f2f;
    pointer-events: none;
}

.lt h1::before {
    content: var(--name);
    -webkit-text-stroke: 1px rgb(48 48 48);
    position: absolute;
    left: 20px;
    top: 2px;
    color: transparent;
    height: 0.9em;
    font-style: italic;
    z-index: -1;
    pointer-events: none;
}

.rt h1::before {
    content: var(--name);
    -webkit-text-stroke: 1px rgb(48 48 48);
    position: absolute;
    left: 20px;
    top: 97px;
    color: transparent;
    height: 0.9em;
    font-style: italic;
    z-index: -1;
    pointer-events: none;
}

.summary {
    padding-left: 25px;
}

.summary h3 {
    color: gray;
    margin-top: -15px;
    font-size: 4em;
    font-family: "Orbitron";
    filter: drop-shadow(8px 4px rgb(78, 78, 78));
}

.summary h3::before {
    content: "NOIA";
    position: absolute;
    color: transparent;
    -webkit-text-stroke: 1px rgb(138, 138, 138);
    left: 0;
    top: -5px;
}

.summary .about p {
    /*margin-top: -50px;*/
    color: white;
    font-family: "MS Gothic";
    word-break: break-all;
}

.summary .about p::before {
    content: "";
    position: absolute;
    left: 0;
    width: 60px;
    background: #7d7d7d;
    height: 20px;
    z-index: -1;
    transform: skewX(359deg);
}

.tags {
    display: flex;
    justify-content: space-evenly;
    margin-top: 25px;
}

.tag {
    background: gray;
    padding: 2px;
    margin-right: 5px;
    font-family: 'Exo2-Light';
}

.right-entries {
    right: 10em;
    position: absolute;
    padding-top: 50px;
}

.project {
    margin: 20px 0;
    padding: 15px 20px;
    background: #2a2a2a;
    box-shadow: 4px 4px rgb(30, 30, 30);

    transition: transform 0.3s;
}

.project a {
    font-size: 40px;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFD700;
    transition: 0.3s;
    user-select: none;
    font-family: Exo2-Light;
}

.project h2 {
    font-size: 40px;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #FFD700;
    user-select: none;
    font-family: Exo2-Light;
}

.project a:hover {
    color: white;
}

.project p {
    font-size: 15px;
    line-height: 1.6;
    font-family: Exo2-Light;
}

#projects::after {
    content: "";
    background-color: #312f2f;
    pointer-events: none;
    width: 0.5px;
    height: 50em;
    position: absolute;
    right: -60px;
    top: 50px;
    z-index: -1;
}

#projects::before {
    content: "";
    background-color: #312f2f;
    pointer-events: none;
    width: 0.5px;
    height: 130em;
    position: absolute;
    left: 40em;
    top: -58em;
    rotate: 270deg;
    z-index: -1;

    /**/
}

#phoenix::before {
    content: "";
    background-color: #312f2f;
    pointer-events: none;
    width: 33px;
    height: 130em;
    position: absolute;
    left: 40em;
    top: -60em;
    rotate: 270deg;
    z-index: -1;
}

#phoenix::after {
    content: "";
    background-color: gray;
    pointer-events: none;
    width: 0.5px;
    height: 50em;
    position: absolute;
    right: 0px;
    bottom: 60em;
    z-index: -1;
    rotate: 270deg;
}

.soc {
    margin-top: 15em;
}

.social-quicklinks {
    margin-top: 20px;
}

.social-quicklinks a img {
    width: 50px;
    filter: invert(1) drop-shadow(3px 3px gray);
    transition: 0.2s filter;
}

.social-quicklinks a img:hover {
    width: 50px;
    filter: invert(0.3);
}

#arcadia {
    /* position: absolute; */
    /* right: 0; */
    /* bottom: -300px; */
    border-right: 0.5px solid #312f2f;
    border-top: 0.5px solid #312f2f;
    padding: 20px;
    /* left: 5em; */
    /* padding-left: 20em; */
    /* width: 100%; */
    filter: drop-shadow(4px 4px #312f2f);
    /* transform: perspective(60px) rotate3d(0, -1, 2, 5deg); */
    font-family: Exo2-Light;
    margin-top: 50px;
}

#arcadia h1 {
    margin-top: -40px;
    background-color: rgb(39, 38, 38);
    text-align: center;
    width: 200px;
    filter: drop-shadow(4px 4px #312f2f);

}

#arcadia a {
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    font-size: 24px;
    font-style: italic;
    color: gray;
    transition: 0.3s;
}

#arcadia a::before {
    content: "";
    position: static;
    width: 90%;
    height: 20px;
    background: linear-gradient(to right, #312f2f 50%, transparent 50%);
    background-size: 20px 100%;
    clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
    filter: drop-shadow(4px 2px rgb(52, 51, 51));
    margin-right: 15px;
}

#arcadia a:hover {
    color: white;
}

#arcadia::after {
    content: "---------------------------------";
    position: absolute;
    bottom: -30px;
    right: -30em;
    rotate: 0deg;
    color: #312f2f;
    filter: none;
    font-size: 15px;
}

.about {
    margin-top: -50px;
}

@media (max-width: 1920px) {
    .project {
        padding: 5px 10px !important;
    }

    .right-entries {
        right: 0em !important;
        padding-top: initial !important;
    }
}

/* please get a better monitor */

@media (max-width: 1280px) {

    /* i hope you're on mobile */
    body {
        overflow: auto !important;
    }

    .page-border-7 {
        display: none !important;
    }

    .entry h1 {
        border-bottom: 0.5px solid #312f2f !important;
        margin-top: 26px !important;
    }


    .page-border-8 {
        left: initial !important;
        width: auto !important;
    }

    .page-border-5 {
        display: none !important;
    }

    main {
        justify-content: initial !important;
        align-items: initial !important;
        flex-wrap: wrap;
        padding: 20px;
        box-sizing: border-box;
    }

    .left-entries,
    .right-entries {
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }

    #profile {
        position: initial !important;
        margin-top: 50px !important;
    }

    .lt {
        padding-left: initial !important;
        transform: none !important;
    }

    .summary {
        padding-left: initial !important;
        text-align: center !important;
    }

    .summary h3 {
        margin-top: initial !important;
        font-size: 10em !important;
        text-align: center !important;
    }

    .summary .about p {
        margin-top: 0px !important;
        word-break: normal !important;
        font-size: 20px !important;
    }

    h1::before {
        display: none !important;
    }

    .tags {
        display: flex !important;
        justify-content: space-between !important;
        margin-top: 50px !important;
        font-size: 30px !important;
    }

    .tag {
        background: gray;
        padding: 7px;
        margin-right: normal !important;
        font-family: 'Exo2-Light';
    }

    .social-quicklinks {
        margin-top: 20px !important;
        text-align: left !important;
    }

    .right-entries {
        position: initial !important;
        padding-top: initial !important;
    }

    .project {
        margin: 20px 0;
        padding: 15px 20px;
        background: #2a2a2a;
        box-shadow: 4px 4px rgb(30, 30, 30);
        transition: transform 0.3s;
        width: auto !important;
    }

    .project p {
        font-size: 20px !important;
    }

    #arcadia {
        position: initial !important;
        /* right: 0; */
        /* bottom: -300px; */
        border-right: 0.5px solid #312f2f;
        border-top: 0.5px solid #312f2f;
        padding: 20px !important;
        /* left: 5em; */
        /* padding-left: 20em; */
        padding-left: initial !important;
        /* width: 100%; */
        width: auto !important;
        filter: drop-shadow(4px 4px #312f2f);
        /* transform: perspective(60px) rotate3d(0, -1, 2, 5deg); */
        font-family: Exo2-Light;
        margin-top: 50px !important;
        text-align: right !important;
    }

    #arcadia h1 {
        margin-top: -40px !important;
        background-color: rgb(39, 38, 38);
        text-align: center;
        width: 200px;
        filter: drop-shadow(4px 4px #312f2f);
    }

    #arcadia a {
        display: initial !important;
        align-items: center !important;
        position: relative !important;
        text-decoration: none;
        font-size: initial !important;
        font-style: italic;
        color: gray;
        transition: 0.3s;
    }

    .attributes {
        display: none !important;
    }

    .page-border-3 {
        display: none !important;
    }

    /*The footer is a desktop exclusive thank you.*/

    #phoenix::before {
        display: none !important;
    }

    #phoenix::after {
        display: none !important;
    }

    /*get on pc */

    #projects::before {
        display: none !important;
    }

    #projects::after {
        display: none !important;
    }

    #arcadia::after {
        display: none !important;
    }

    #arcadia a::before {
        display: none !important;
    }
}