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

/* ##### FONTS
font-family: 'Fira Sans', sans-serif;
*/

/*  */

.tb-1 {
    background-color: green !important;
}

.tb-2 {
    background-color: rgb(144, 205, 0) !important;
}

.tb-3 {
    background-color: rgb(0, 128, 75) !important;
}




.background {
    height: 100vh;
    width: 100vw;
    background: linear-gradient(15deg, rgb(97, 85, 209), rgb(152, 49, 186));


    display: flex;
    justify-content: center;
    align-items: center;

}

.big-card {
    height: 90vh;
    width: 90vw;
    background: linear-gradient(12deg, rgb(84, 0, 105), rgb(0, 27, 86));
    border-radius: 1rem;
    padding: 1.5rem 1.5rem;
}

.hero-img {
    height: auto;
    width: 256px;
    border-radius: 50%;
}

.center-flex {
    display: flex;
    align-items: center;
    justify-content: center;

}

.name {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: white;
}

.role {
    font-weight: 300;
    text-align: center;
    color: rgb(221, 221, 221);
}

.aboutme,
.skills {
    color: #ccc;
    text-align: justify;
    text-align-last: center;

}

.skills i {
    color: rgb(62, 0, 121);
    font-size: 2rem;
    /* font-weight: 900; */
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    padding: .3rem;
    margin: 0px .5rem;
}

.skills i:hover {
    animation: spinner-border .5s linear 0s infinite normal;
    cursor: pointer;
}





.btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.btn {
    color: rgb(255, 255, 255);
    background: linear-gradient(45deg, rgba(147, 2, 204, 0.089), rgba(0, 0, 124, 0.123));
    border-radius: 128px;
    border: 4px solid rgb(255, 255, 255);
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid transparent;
}

.btn:hover {
    color: white;
    background: linear-gradient(45deg, rgb(147, 2, 204), rgb(0, 0, 124));
    border-radius: 128px;
    border: 1px solid transparent;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all 1s ease 1s;
}


.middle {
    display: flex;
    flex-direction: row;
    color: rgb(218, 218, 218);

}

.education h2 {
    margin-bottom: 2rem;
}



.plink {
    background-color: rgba(0, 0, 0, 0.107);
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    border-radius: 2rem;
}


.plink:hover {
    background-color: rgba(0, 0, 0, 0.277);

    text-decoration: none;
    color: white;
    padding: 10px 20px;
    border-radius: 2rem;
}



.plink a {

    text-decoration: none;
    color: white;
    font-weight: 100;
}

.right {
    color: white;
}


.right-links {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* justify-content: space-between; */
}