@media screen and (max-width: 600px) {
    h1 {
        font-size: 45px !important;
    }
}

/* Core */

body {
    display: flex;
    justify-content: center;
    background: #161616;
    color: #807e7e;
    font-size: 17.5px;
    font-family: 'Product Sans', sans-serif;
    text-align: center;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column !important;
}

a {
    opacity: 0.7;
    color: #9e9d9d;
    text-underline-offset: 3px;
    text-decoration-color: #9e9d9d;
}

a:hover {
    opacity: 1;
    color: #6b6b6b;
    text-decoration-color: #6b6b6b;
}

h1 {
    font-size: 35px;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 100;
    color: #c8c7c7;
}

h2 {
    font-size: 17.5px;
    margin-top: -15px;
    margin-bottom: 15px;
    font-weight: 100;
    color: #b3aeae;
}

.info {
    margin-left: 0 !important;
}

.avatar {
    background-image: url('https://avatars.githubusercontent.com/u/77232878');
    background-size: contain;
    background-position: center;
    width: 175px;
    height: 175px;
    border-radius: 100px;
    margin-bottom: 20px;
    width: 200px !important;
    height: 200px !important;
    filter: grayscale(1) brightness(1);
}

.work {
    margin-top: 5px
}

.links {
    margin-bottom: 25px;
}

.links, .icons-group {
    margin-top: 15px;
}

.icons {
    display: flex;
    justify-content: center;
}

.icons:last-of-type {
    margin-top: 7.5px;
}

.icon { 
    width: 30px; 
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 11px;
    filter: grayscale(100%);
}

/* Icons */

.k8s { background-image: url('/assets/icons/kubernetes.png'); filter: grayscale(1) brightness(0.8); margin-top: -1px }
.terraform { background-image: url('/assets/icons/terraform.png'); filter: grayscale(1) brightness(2.25); margin-left: -4.5px; margin-right: 9.5px; margin-top: -0.5px }
.docker { background-image: url('/assets/icons/docker.png'); filter: grayscale(1) brightness(1.5); margin-top: -0.5px; }
.aws { background-image: url('/assets/icons/aws.png'); filter: grayscale(1) brightness(1); }
.redis { background-image: url('/assets/icons/redis.webp'); margin-right: 9.5px; margin-top: 2px; filter: grayscale(1) brightness(1.3); }
.sls { background-image: url('/assets/icons/sls.png'); margin-top: 1px; width: 25px; height: 27px; filter: grayscale(1) brightness(1.3); }
.python { background-image: url('/assets/icons/python.png'); width: 27px; height: 27px; }
.laravel { background-image: url('/assets/icons/laravel.png'); margin-top: 2.5px; width: 30px; height: 27px; filter: grayscale(1) brightness(2.5); }
.go { background-image: url('/assets/icons/go.svg'); margin-left: -3px; margin-top: 1px; width: 45px; height: 27px; filter: grayscale(1) brightness(1.5); }
.ansible { background-image: url('/assets/icons/ansible.png'); margin-left: -7px; margin-top: 3px; height: 22px; filter: brightness(1) invert(0.7); }
.postgresql { background-image: url('/assets/icons/postgresql.svg'); margin-top: 2px; height: 28.5px; filter: brightness(1) invert(0.8); }
.node { background-image: url('/assets/icons/node.png'); margin-top: 2px; margin-left: -3px; margin-right: 8.5px; height: 28px; }