@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Variables */
:root{
    --main-font: 'Lexend Deca', sans-serif;
    --pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='70' patternTransform='scale(6) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M-4.8 4.44L4 16.59 16.14 7.8M32 30.54l-13.23 7.07 7.06 13.23M-9 38.04l-3.81 14.5 14.5 3.81M65.22 4.44L74 16.59 86.15 7.8M61 38.04l-3.81 14.5 14.5 3.81'  stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5' stroke='hsla(317, 30%, 14%, 1)' fill='none'/><path d='M59.71 62.88v3h3M4.84 25.54L2.87 27.8l2.26 1.97m7.65 16.4l-2.21-2.03-2.03 2.21m29.26 7.13l.56 2.95 2.95-.55'  stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5' stroke='hsla(164, 32%, 13%, 1)' fill='none'/><path d='M58.98 27.57l-2.35-10.74-10.75 2.36M31.98-4.87l2.74 10.65 10.65-2.73M31.98 65.13l2.74 10.66 10.65-2.74'  stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5' stroke='hsla(313, 9%, 32%, 1)' fill='none'/><path d='M8.42 62.57l6.4 2.82 2.82-6.41m33.13-15.24l-4.86-5.03-5.03 4.86m-14-19.64l4.84-5.06-5.06-4.84'  stroke-linejoin='round' stroke-linecap='round' stroke-width='1.5' stroke='hsla(147, 14%, 49%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")

}

*{
    margin: 0;
    padding: 0;
    font-family: var(--main-font);
}

body{
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: var(--pattern)
}

#card{
    width: 700px;
    height: 430px;
    border-radius: 20px;
    background: rgba( 255, 255, 255, 0.75 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 2.0px );
    -webkit-backdrop-filter: blur( 2.0px );
    border-radius: 15px;
    animation: wobble 2s ease 0s 1 normal forwards;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#img-container{
    width: 100%;
    height: 45%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#head{
    height: 50px;
    margin-top: 15px;
}

.text-container{
    width: 85%;
    height: 75%;
    display: flex;
    flex-direction: column;
    margin-left: 30px;
}

#img-container img{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin-right: 30px;
    
}

.text{
    padding: 10px 0 10px 0;
}

.title{
    font-weight: 700;
    font-size: 18px;
}

.title-2{
    font-weight: 700;
    font-size: 16px;
}

#text-container{
    width: 100%;
    height: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    /* background-color: blue; */
}

.no-hacer{
    margin-top: 15px;
}

#user{
    color: #A7A7A7;
}

.sub-container{
    width: 95%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
}

.sub-container a {
    margin-left: 15px;
    text-decoration:none;
    color: black;
}

.sub-container a:hover{
    margin-left: 15px;
}

.sub-container img{
    width: 25px;
    height: 25px;
    margin-right: 65px;
}

.sub-container:hover{
    cursor: pointer;
}


#github:hover{
    background: rgba( 180, 180, 180, 0.50 );
    transition: background-color 2s;
    text-decoration: underline;
    border-left: 5px solid rgba( 180, 180, 180 );
}

#gitlab:hover{
    background: rgba( 252, 109, 38, 0.30 );
    transition: background-color 2s;
    text-decoration: underline;
    border-left: 5px solid rgba( 252, 109, 38 );
}

#linkedin:hover{
    background: rgba( 0, 119, 181, 0.30 );
    transition: background-color 2s;
    text-decoration: underline;
    border-left: 5px solid rgba( 0, 119, 181 );
}

#codewars:hover{
    background: rgba( 177, 54, 30, 0.30 );
    transition: background-color 2s;
    text-decoration: underline;
    border-left: 5px solid rgba( 177, 54, 30 );
}

@keyframes wobble {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(6deg);
	}

	30% {
		transform: translateX(15px) rotate(-6deg);
	}

	45% {
		transform: translateX(-15px) rotate(3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(-2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(1.2deg);
	}
}


@media only screen and (max-width: 800px){
    #card{
        width: 330px;
        height: 600px;
    }
    
    #img-container{
        width: 100%;
        height: 45%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;
    }

    #img-container{
        height: 70%;
    }

    #img-container img{
        width: 130px;
        height: 130px;
        margin: 30px 0 15px 0;
        
    }

    .text-container{
        height: 30%;
    }

    .sub-container img{
        width: 25px;
        height: 25px;
        margin-right: 45px;
    }

    #text{
        text-align: center;
        margin-bottom: 10px;
    }

    #head{
        margin-top: 0px;
    }

    .no-hacer{
        margin-top: 0px;
    }

}