/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

h1 {
    font-family: "Gothic A1", sans-serif;
}

*{ 
    margin: 0;
    padding: 0;
}

:root{ 
    --white: #fff;
    --purple: #8669a5;
    --purple2: #d16ef5;
}

body{
    background-color: black;
    height: 100vh;
    font-family: "Gothic A1", sans-serif;
}


header {
    display: flex; 
    justify-content: space-around;
    align-items: center;
    gap: 1rem; 
    flex-wrap: wrap; 
    padding: .8rem; 
    background-color: var(--purple2);
    min-height: 40px;
}

nav{
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.nav-links{
    text-decoration: none;
    color: var(--white);
}   
.nav-links:hover{ 
    color: rgb(255, 157, 0);
    transition: .4s;
    text-decoration: underline;
}

.box-btn-actions{ 
    display:flex;
    gap: 1rem;

}

button, .link-action { 

    padding: .6rem;
    font-size: .9rem;
    border-style: solid;
    border-radius: 8px;
    border-color: white;
    cursor: pointer;

}

.btn-action{
    background-color: transparent;
    border: 1px solid white;
    color: white
}
.btn-action:hover{
    background-color: rgb(137, 137, 137);
    border: 1px solid whitesmoke;
    transition: .3s;
}

.link-action{
    text-decoration: none;
    width: 200px;
    text-align: center;
}

main{
    display: flex;
    flex-direction: column; 
    gap: 2rem; 
}

section{
    padding: 4rem;   
}

.first-section { 
    display: flex; 
    justify-content: space-evenly; 
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    min-height: 650px; 
}

.first-section > div {
    display: flex;
    flex-direction: column; 
    gap: 1rem;
    min-width: 300px;
}

h1{
    font-size: 4rem;
    color: rgb(255, 243, 243);
    letter-spacing: 8px; 
}

strong{
    color: #c69bde;
}

.first-section p {
    color: white;
}   
.box-img-main{
    max-width: 450px;
    padding: 1rem;
}

.img-profile{
    border-radius: 50%;
    width: 100%;
}

.second-section, .fourth-section{
    background-color: var(--purple2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.second-section ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.second-section ul li {
    color: rgb(78, 73, 73);
    letter-spacing: 2px;
    font-weight: bold;
}

.second-section ul li:hover {
    color: rgb(204, 0, 0);
    transition: .4s;
    cursor: default;
}

.title{
    color: rgb(113, 20, 199);
}


.third-section {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.third-section > div{
    display: flex;
    gap: 4rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}

.third-section > div img {
    width: 250px;
    border-radius: 10px;
}

.third-section > div p{
    max-width: 600px;
    color: white;
    text-align: justify; 
}

.third-section > h2 {
    color: rgb(113, 20, 199);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}


.fourth-section > h2 {
    color: rgb(113, 20, 199);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fourth-section > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#my-projects-list{
    gap: 2rem;
}


footer{
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

footer > div {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

footer > h2 {
    display: flex;
    justify-content: center;
}



#my-projects-list a{
    text-decoration: none;
    color: rgb(68, 0, 255);
    flex-wrap: wrap;
    
}

#my-projects-list a:hover{
    transition: .4s;
    color: aliceblue;
    cursor: pointer;
}

:is(.img-profile, .img-who-am-i){
    box-shadow: 1px 1px 1px 1px whitesmoke;
}