@font-face{
    font-family: 'JetBrainsMono';
    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root{
    --stripcolor: #7f7e7e;
    --stripcolorhover: #ff3a3a;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    align-items: center;
    background: #242424;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow-x: hidden;
}

@media (max-width: 440px) {
    .card-wrapper { transform: scale(0.85); }
}

.dev-access {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 36px;
    opacity: 0;
    z-index: 10;
}

a {
    color: inherit;
    text-decoration: none;
}
a.hover {
    text-decoration: underline;
}

/* Enlarge the real clickable hit-area of the bracketed card links slightly
   (padding + matching negative margin so text position stays unchanged).
   Kept modest so adjacent rows (25px apart) never overlap each other. */
.card-front a {
    display: inline-block;
    padding: 8px 12px;
    margin: -8px -12px;
}

/* The decorative corner brackets are purely visual and some (Instagram/Loc)
   are much taller (75px) than their own text, reaching into neighboring
   rows (e.g. over "Me"). Without this, clicking on a bracket intercepts
   the click meant for a different link underneath/nearby and does nothing
   useful. pointer-events:none lets clicks pass through to the real link. */
.job::before, .job::after,
.me::before, .me::after,
.insta::before, .insta::after,
.loc::before, .loc::after,
.mail::before, .mail::after,
.git::before, .git::after {
    pointer-events: none;
}

* {
    font-family: "JetBrainsMono", sans-serif;
    color: #ffffff;
}

.full-with-card{
    height: 274px;
    width: 100%;
    background: #242424;
    border-top: 1px solid var(--stripcolor);
    border-bottom: 1px solid var(--stripcolor);
}

.card-wrapper {
    height: 272px;
    perspective: 600px;
    position: relative;
    width: 420px;
    background: #242424;
    margin: 0 auto;
}
.card {
    height: 100%;
    width: 100%;
}
.card-front {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main {
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 4px;
    margin: 0 auto;
}

.job {
    position: absolute;
    left: 72px;
    top: 80px;
    font-size: 16px;
    font-weight: 400;
    --stripwidthjob: 16px;
    --stripheightjob: 30px;
}
.job::before {
    content: "";
    left: 32px;
    top: 8px;
    height: var(--stripheightjob);
    width: var(--stripwidthjob);
    position: absolute;
    border-right: 2px solid var(--stripcolor);
    border-top: 2px solid var(--stripcolor);
}
.job::after {
    content: "";
    right: 32px;
    top: 8px;
    height: var(--stripheightjob);
    width: var(--stripwidthjob);
    position: absolute;
    border-left: 2px solid var(--stripcolor);
    border-top: 2px solid var(--stripcolor);
}
.job:hover{
    color: var(--stripcolorhover);
    cursor: pointer;
}
.job:hover::before {
    border-right: 2px solid var(--stripcolorhover);
    border-top: 2px solid var(--stripcolorhover);
}
.job:hover::after {
    border-left: 2px solid var(--stripcolorhover);
    border-top: 2px solid var(--stripcolorhover);
}


.me {
    position: absolute;
    left: 186px;
    top: 80px;
    font-size: 16px;
    font-weight: 400;
    --stripwidthme: 34px;
    --stripheightme: 30px;
}
.me::before {
    content: "";
    left: 25px;
    top: 8px;
    height: var(--stripheightme);
    width: var(--stripwidthme);
    position: absolute;
    border-right: 2px solid var(--stripcolor);
    border-top: 2px solid var(--stripcolor);
}
.me::after {
    content: "";
    right: 25px;
    top: 8px;
    height: var(--stripheightme);
    width: var(--stripwidthme);
    position: absolute;
    border-left: 2px solid var(--stripcolor);
    border-top: 2px solid var(--stripcolor);
}
.me:hover{
    color: var(--stripcolorhover);
    cursor: pointer;
}
.me:hover::before {
    border-right: 2px solid var(--stripcolorhover);
    border-top: 2px solid var(--stripcolorhover);
}
.me:hover::after {
    border-left: 2px solid var(--stripcolorhover);
    border-top: 2px solid var(--stripcolorhover);
}

.insta {
    position: absolute;
    left: 165px;
    top: 35px;
    font-size: 16px;
    font-weight: 400;
    --stripwidthinsta: 39px;
    --stripheightinsta: 75px;
}
.insta::before {
    content: "";
    left: 90px;
    top: 8px;
    height: var(--stripheightinsta);
    width: var(--stripwidthinsta);
    position: absolute;
    border-right: 2px solid var(--stripcolor);
    border-top: 2px solid var(--stripcolor);
}
.insta::after {
    content: "";
    right: 90px;
    top: 8px;
    height: var(--stripheightinsta);
    width: var(--stripwidthinsta);
    position: absolute;
    border-left: 2px solid var(--stripcolor);
    border-top: 2px solid var(--stripcolor);
}
.insta:hover{
    color: var(--stripcolorhover);
    cursor: pointer;
}
.insta:hover::before {
    border-right: 2px solid var(--stripcolorhover);
    border-top: 2px solid var(--stripcolorhover);
}
.insta:hover::after {
    border-left: 2px solid var(--stripcolorhover);
    border-top: 2px solid var(--stripcolorhover);
}

.loc {
    position: absolute;
    left: 327px;
    top: 35px;
    font-size: 16px;
    font-weight: 400;
    --stripwidthloc: 8px;
    --stripheightloc: 75px;
}
.loc::before {
    content: "";
    left: 32px;
    top: 8px;
    height: var(--stripheightloc);
    width: var(--stripwidthloc);
    position: absolute;
    border-right: 2px solid var(--stripcolor);
    border-top: 2px solid var(--stripcolor);
}
.loc::after {
    content: "";
    right: 32px;
    top: 8px;
    height: var(--stripheightloc);
    width: var(--stripwidthloc);
    position: absolute;
    border-left: 2px solid var(--stripcolor);
    border-top: 2px solid var(--stripcolor);
}
.loc:hover{
    color: var(--stripcolorhover);
    cursor: pointer;
}
.loc:hover::before {
    border-right: 2px solid var(--stripcolorhover);
    border-top: 2px solid var(--stripcolorhover);
}
.loc:hover::after {
    border-left: 2px solid var(--stripcolorhover);
    border-top: 2px solid var(--stripcolorhover);
}

.mail {
    position: absolute;
    left: 191px;
    bottom: 35px;
    font-size: 16px;
    font-weight: 400;
    --stripwidthmail: 136px;
    --stripheightmail: 75px;
}
.mail::before {
    content: "";
    left: 40px;
    bottom: 8px;
    height: var(--stripheightmail);
    width: var(--stripwidthmail);
    position: absolute;
    border-right: 2px solid var(--stripcolor);
    border-bottom: 2px solid var(--stripcolor);
}
.mail::after {
    content: "";
    right: 40px;
    bottom: 8px;
    height: var(--stripheightmail);
    width: var(--stripwidthmail);
    position: absolute;
    border-left: 2px solid var(--stripcolor);
    border-bottom: 2px solid var(--stripcolor);
}
.mail:hover{
    color: var(--stripcolorhover);
    cursor: pointer;
}
.mail:hover::before {
    border-right: 2px solid var(--stripcolorhover);
    border-bottom: 2px solid var(--stripcolorhover);
}
.mail:hover::after {
    border-left: 2px solid var(--stripcolorhover);
    border-bottom: 2px solid var(--stripcolorhover);
}

.git {
    position: absolute;
    left: 206px;
    bottom: 80px;
    font-size: 16px;
    font-weight: 400;
    --stripwidthgit: 55px;
    --stripheight: 30px;
}
.git::before {
    content: "";
    left: 33px;
    bottom: 8px;
    height: var(--stripheight);
    width: var(--stripwidthgit);
    position: absolute;
    border-right: 2px solid var(--stripcolor);
    border-bottom: 2px solid var(--stripcolor);
}
.git::after {
    content: "";
    right: 33px;
    bottom: 8px;
    height: var(--stripheight);
    width: var(--stripwidthgit);
    position: absolute;
    border-left: 2px solid var(--stripcolor);
    border-bottom: 2px solid var(--stripcolor);
}
.git:hover{
    color: var(--stripcolorhover);
    cursor: pointer;
}
.git:hover::before {
    border-right: 2px solid var(--stripcolorhover);
    border-bottom: 2px solid var(--stripcolorhover);
}
.git:hover::after {
    border-left: 2px solid var(--stripcolorhover);
    border-bottom: 2px solid var(--stripcolorhover);
}