@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: #ffffff;
    display: flex;
    background: #282828;
    }

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

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

#serverre {
    background-color: #282828;
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 30px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

.website {
position: absolute;
margin: auto;
bottom: 3em;
}
.full-with-card{
    height: 272px;
    width: 100%;

    background: #242424;
    box-shadow: 0 0 4px var(--stripcolor);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}

@media (max-width : 600px) {
    .full-with-card{
    width: 420px;
}

}

.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);
}