body {
    margin: 0;
    padding: 0;
    max-width: 100vw;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: #0c0717;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: default;
    z-index: 1;
}

.content {
    width: 65%;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 15px;
    grid-template-areas:
        "pic about about exp"
        "local local lg hobbies"
        "mail link git hobbies"
        "stack f1 f1 f1"
        "stack lab lab lab";
    padding-bottom: 15px;
}

.picture {
    border-radius: 20px;
    height: 250px;
    background: rgba(140, 24, 255, 0.1);
    border: 2px solid #8c18ff8d;
    backdrop-filter: blur(10px);
    grid-area: pic;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.picture img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text h2 {
    margin-left: 20px;
    margin-top: 3px;
    margin-bottom: -3px;
}

.text p {
    width: 90%;
    margin-left: 20px;
}

.about-me {
    border-radius: 20px;
    border: 2px solid #8c18ff8d;
    backdrop-filter: blur(10px);
    background: rgba(140, 24, 255, 0.1);
    grid-area: about;
    display: flex;
    flex-direction: column;
    font-size: 1.1em;
}

.experience {
    border-radius: 20px;
    border: 2px solid #8c18ff8d;
    background: rgba(140, 24, 255, 0.1);
    backdrop-filter: blur(10px);
    grid-area: exp;
}

.experience-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.experience-content h1 {
    margin-top: -30px;
    font-size: 8em;
}

.experience-content p {
    font-size: 2em;
    margin-top: -90px;
}

.hobbies {
    border-radius: 20px;
    border: 2px solid #8c18ff8d;
    background: rgba(140, 24, 255, 0.1);
    backdrop-filter: blur(10px);
    grid-area: hobbies;
    display: flex;
    flex-direction: column;
}

.hobby-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-right: 20px;
    margin-left: 20px;
    gap: 14px;
}

.hobby-tag {
    min-width: 150px;
    display: flex;
    justify-content: center;
    padding: 10px;
    background: rgba(140, 24, 255, 0.1);
    border: 2px solid #8c18ff8d;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 17px;
}

.card-header {
    margin-left: 20px;
    font-size: 20px;
    color: #ffffff96;
}


.mail {
    grid-area: mail;
    border: 2px solid #ff18888d;
    background: rgba(255, 24, 116, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in 0.2s;
}
.mail:hover{
    background: rgba(255, 24, 116, 0.5);
    border-color: #ff1888;
    transition: all ease-in 0.2s;
}
.mail img {
    width: 170px;
}

.location {
    grid-area: local;
    border: 2px solid #8c18ff8d;
    background: rgba(140, 24, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    background-image: 
    linear-gradient(rgba(12, 7, 23, 0.859), rgba(12, 7, 23, 0.859)),
    url('img/map.webp');
    background-size: cover;
    transition: all ease-out 0.7s;
}
.location-content{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.location-content img{
    width: 70px;
}
.location-content h1{
    font-size: 3.5em;
}
.location:hover{
    border: 2px solid #8b18ff;
    background-position: center;
    transition: all ease-out 0.7s;
}

.language {
    grid-area: lg;
    border: 2px solid #ff18888d;
    background: rgba(255, 24, 116, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    cursor: pointer;
    transition: all ease-in 0.2s;
}

.language:hover{
    background: rgba(255, 24, 116, 0.5);
    border-color: #ff1888;
    transition: all ease-in 0.2s;
}

.language-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.language-text h1 {
    margin-top: -20px;
    font-size: 8em;
}

.language-text p {
    margin-top: -90px;
    font-size: 1.5em;
}

.linkedin {
    grid-area: link;
    border: 2px solid #0084ff8d;
    background-color: #013b718d;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in 0.2s;
}
.linkedin:hover{
    border: 2px solid rgb(0, 132, 255)8d;
    background-color: #006fd68d;
    transition: all ease-in 0.2s;
}

.linkedin img {
    width: 170px;
}

.github {
    grid-area: git;
    border: 2px solid #8c18ff8d;
    background: rgba(140, 24, 255, 0.1);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in 0.2s;
}
.github:hover{
    border: 2px solid #8c18ff;
    background: rgba(140, 24, 255, 0.5);
    transition: all ease-in 0.2s;
}
.github img{
    width: 170px;
}

.project-f1 {
    grid-area: f1;
    border: 2px solid #ff00008d;
    border-radius: 20px;
    background: #15151f1d;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in 0.4s;
}
.project-f1 img{
    position: fixed;
}
.project-f1:hover{
    border: 2px solid red;
    background: #15151f96;
    transition: all ease-in 0.4s;
}

.project-laberinto {
    grid-area: lab;
    border: 2px solid #5f5e5e8d;
    border-radius: 20px;
    background: #1212121c;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: white;
    text-decoration: none;
    transition: all ease-in 0.4s;
}
.laberinto-logo{
    font-family: "Press Start 2P";
    font-weight: 400;
    font-size: 4em;
}
.project-laberinto:hover{
    background: #12121278;
    border: 2px solid #979696;
    transition: all ease-in 0.4s;
}

.stack {
    grid-area: stack;
    border-radius: 20px;
    background: rgba(140, 24, 255, 0.1);
    border: 2px solid #8c18ff8d;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}

.stack img {
    width: 60px;
}
.stack img[alt='photoshop']{
    margin-left: 3px;
}

.tech {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    column-gap: 25px;
    row-gap: 50px;
    align-self: center;
}

@media screen and (max-width: 1850px) {
    .stack img {
        width: 50px;
    }
}
@media screen and (max-width: 1600px) {
    .content {
        width: 65%;
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 15px;
        grid-template-areas:
            "pic about about"
            "exp lg hobbies"
            "local local hobbies"
            "link git mail"
            "stack f1 f1"
            "stack lab lab";
        padding-bottom: 15px;
    }
    img{
        max-width: 600px;
    }
    .stack img {
        width: 60px;
    }
}
@media screen and (max-width: 1450px) {
    .stack img {
        width: 55px;
    }
    img{
        max-width: 500px;
    }
    .laberinto-logo{
        font-size: 3em;
    }
}
@media screen and (max-width: 1280px) {
    .content {
        width: 65%;
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(9, 1fr);
        gap: 15px;
        grid-template-areas:
            "pic exp"
            "about about"
            "local local"
            "lg hobbies"
            "link hobbies"
            "mail git"
            "stack stack"
            "f1 f1"
            "lab lab";
        padding-bottom: 15px;
    }
    .tech {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 50px;
        row-gap: 25px;
        align-self: center;
    }
    .stack img {
        width: 60px;
    }
}
@media screen and (max-width: 1020px) {
    .stack img {
        width: 50px;
    }
    .content{
        width: 75%;
    }
}
@media screen and (max-width: 810px) {
    .stack img {
        width: 45px;
    }
}
@media screen and (max-width: 750px) {
    .content{
        width: 85%;
    }
}
@media screen and (max-width: 700px) {
    .content{
        width: 90%;
    }
}
@media screen and (max-width: 630px) {
    .content{
        width: 100%;
    }
}
@media screen and (max-width: 600px) {
    
}