@font-face {
    font-family: 'Retro';
    font-style: normal;
    font-weight: 500;
    src: url(PressStart2P-Regular.ttf) format('truetype');
    font-display: swap;
}

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

html {
    font-family: "Retro", sans-serif;
    background: #111;
    min-height: 100vh;
    color: #eee;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=),auto;
    display: flex;
    justify-content: center;
}

input, textarea {
    font-family: "Retro", sans-serif;
}

body {
    margin: 2rem;
    max-width: 768px;
    width: 100%;
    margin-bottom: 0;
}

.text-gradient {
    background: linear-gradient(to right, #68A063 0%, #41B883 25%, #c30 50%, #699eca 75%, #185886 100%);
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 5s linear infinite;
}

@keyframes gradient {
    to {
        background-position: 200% center;
    }
}

h1 {
    font-size: 2.5em;
    margin-top: 5rem;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 10rem;
}

section {
    position: relative;
    margin-bottom: 5rem;
    padding: 1.5rem 2rem;
    border-color: #eee;
    border-style: solid;
    border-width: 4px;
    line-height: 2rem;
}

section h2 {
    display: table;
    padding: 0 0.5rem;
    margin: -2.6rem 0 1rem;
    font-size: 1rem;
    background-color: #111;
}

.skills {
    display: flex;
    margin: 2rem;
    margin-bottom: 1rem;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.skill {
    display: inline-block;
    margin-right: 1rem;
    background-color: #333;
    padding: 0.5rem;
    box-shadow: 0 0.5em #333, 0 -0.5em #333, 0.5em 0 #333, -0.5em 0 #333;
    text-align: center;
}

.node {
    background-color: #68A063;
    box-shadow: 0 0.5em #68A063, 0 -0.5em  #68A063, 0.5em 0  #68A063, -0.5em 0  #68A063;
}

.vue {
    background-color: #41B883;
    box-shadow: 0 0.5em #41B883, 0 -0.5em  #41B883, 0.5em 0 #41B883, -0.5em 0 #41B883;
}

.svelte {
    background-color: #c30;
    box-shadow: 0 0.5em #c30, 0 -0.5em #c30, 0.5em 0 #c30, -0.5em 0 #c30;
}

.postgresql {
    background-color: #699eca;
    box-shadow: 0 0.5em #699eca, 0 -0.5em #699eca, 0.5em 0 #699eca, -0.5em 0 #699eca;
}

.linux {
    background-color: #185886;
    box-shadow: 0 0.5em #185886, 0 -0.5em #185886, 0.5em 0 #185886, -0.5em 0 #185886;
}

.godot {
    background-color: #478cbf;
    box-shadow: 0 0.5em #478cbf, 0 -0.5em #478cbf, 0.5em 0 #478cbf, -0.5em 0 #478cbf;
}

.game-card {
    display: block;
    margin-top: 1.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #eee;
    text-decoration: none;
    border: 4px solid #eee;
    background: #000 url(blobituary/art/night_scene.png) center / cover no-repeat;
}

.game-card:hover {
    border-color: #ffd23f;
}

.game-card img {
    width: min(360px, 100%);
    height: auto;
}

.game-card p {
    display: inline-block;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5rem 1rem;
    margin: 1rem 0 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
}

input, textarea {
    display: block;
    border-image-slice: 2;
    border-image-width: 2;
    border-style: solid;
    border-width: 4px;
    border-image-repeat: stretch;
    padding: 1rem;
    background-clip: padding-box;
    width: 100%;
    color: #eee;
    background-color: #000;
    margin-bottom: 2rem;
    border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
    outline-color: #eee;
}

input:focus, textarea:focus {
    outline: none;
}

textarea {
    height: 10rem;
    max-height: 20rem;
    resize: none;
    max-width: 100%;
}

.actions {
    display: flex;
    justify-content: end;
}

button, .btn {
    font-family: "Retro", sans-serif;
    border-image-slice: 2;
    border-image-width: 2;
    border-image-repeat: stretch;
    border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
    border-image-outset: 2;
    position: relative;
    display: inline-block;
    padding: 6px 8px;
    margin: 4px;
    text-align: center;
    vertical-align: middle;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0,pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: visible;
    color: #fff;
    background-color: #209cee;
    border-style: solid;
    border-width: 4px;
}

button:after, .btn:after {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    content: "";
    box-shadow: inset -4px -4px #006bb3;
}

button:hover, .btn:hover {
    background-color: #0069af;
}

button:hover:after, .btn:hover:after {
    box-shadow: inset -6px -6px #004570;
}

.success {
    color: #68A063;
}