/* Only loading what you actually use */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Winky+Rough:wght@400;700&display=swap');
*{
    font-family:"Nunito", sans-serif;
}

body{
    background:#151412;
    padding: 1vh 10vw 10vh 10vw;
    display: flex;
    flex-direction: column;
    gap: 10vh;
    align-items: center;
}

.card-image{
width: 170px;
border-radius: 10px;
clip-path: path('M85,0 C120,0 135,0 155,15 C170,35 170,50 170,85 C170,120 170,135 155,155 C135,170 120,170 85,170 C50,170 35,170 15,155 C0,135 0,120 0,85 C0,50 0,35 15,15 C35,0 50,0 85,0 Z');
transition: clip-path 0.4s ease-in-out;
    
}

.card-name{
    color: rgb(10,10,10);
    font-weight: bold;
    font-size: 25px;
}

.info-card{
    padding: 10px;
    width: 200px;
    height: 400px;
    background:rgb(250, 111, 60);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-description{
    font-size: 14px;
    color:white;
    text-align: center;
}

.card-menu{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 10px;
}

.card-menu img{
    width: 35px;
    cursor: pointer;
    transition: 0.3s;
}

.card-menu img:hover{
    rotate: 30deg;
    
    
}

.container{
    display: flex;
    flex-direction: row;
    gap: 10vw;
    align-items: center;
    justify-content: center;
}

.main-text{
    display: flex;
    flex-direction: column;
    line-height: 1;
    
    
}

.github-button{
    padding: 10px;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: white;
    width: 250px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;

}

.github-button:hover{
 box-shadow: 0 0 10px white;   
}
.github-button img{
    width: 35px;
}

.github-button label{
    cursor: pointer;
}

.dramatic-text-1,.dramatic-text-2{
    font-weight: bold;
    font-size: 9rem;
    font-family: "Winky Rough", sans-serif;

}

.dramatic-text-1{
    color: rgb(255,255,255);
}
.dramatic-text-2{
    color: rgb(62, 62, 64);
}

.main-description{
    color: rgb(150,150,150);
    max-width: 40vw;
}

.skill-cards-1,.skill-cards-2{
    width: 30vw;
    font-size: 1rem;
    height: 100px;
    padding: 20px 30px 30px 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: bold;
    
   
}

.skill-cards-1{
    background-color: #ff6b35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600'%3E%3Cpath d='M0 100 C 200 50, 400 150, 600 100 C 800 50, 1000 150, 1000 150 L 1000 600 L 0 600 Z' fill='white' fill-opacity='0.1'/%3E%3Cpath d='M0 200 C 150 150, 300 250, 500 200 C 700 150, 850 250, 1000 200 L 1000 600 L 0 600 Z' fill='white' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: cover;
    color: white;
    
}
.skill-cards-2{
    background-color: #ccff33; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpolyline points='0,50 25,20 50,80 75,20 100,50' fill='none' stroke='black' stroke-width='1' stroke-opacity='0.1'/%3E%3C/svg%3E");
    
    background-size: 150px 150px; 
}

.skill-cards-1 img{
 width: 40px;
}
.skill-cards-2 img{
    width: 30px;
}

.skill-area{
    display: flex;
    flex-direction: column;
    gap: 8vh;
    padding: 10vh 5vw 10vh 5vw;
    background-color: rgb(45, 45, 46);
    background-size: cover;
    border-radius: 20px;
    width: 80vw; 
    

}


.topics{
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
    top: 10;
    left: 10;
    width: 75vw;
    margin-top: 10vh;
}




.sub-skill-area{
    display: flex;
    flex-direction: row;
    gap: 5vw;
    justify-content: center;
}

@media screen and (min-width:891px) {
    .skill-area{
        flex-direction: row;
        width: 65vw;
    }
    .sub-skill-area{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5vh;
    }
}


.item-card{
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: white;
    opacity: 0;
    
    
}


.item-card span{
    font-size:0.8rem;
}
.item-card img{
    width: 50px;
}


.loading-screen{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
    transition: 1s;

}

.loading-context{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #151412;;
    padding: 30px;
    font-size: 2rem;
    color: white;
    border-radius: 30px;
}

.loading-context img{
    width: 70px;
    animation: rotate 1s infinite;
}

@keyframes rotate {
    from{
        rotate: 0deg;
    }
    to{
        rotate: 360deg;
    }
}

.project-area{
    display: flex;
    flex-direction: column;
    gap: 10vh;
    
    
}

.project{
    display: flex;
    flex-direction: column;
    width: 60vw;
    gap: 5vh;
}
.project-head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 1.6rem;
}

.project-head img{
    width: 30px;
    cursor: pointer;
    transition: 0.3s;
}

.project-head img:hover{
   transform: translateY(-10px) scale(1.2);
   transform: translateX(10px) scale(1.2);
}

.project-content{
    color: rgb(150,150,150);
}

.content-topic{
    font-weight: bold;
    font-size: 1.2rem;
}

.code{
    color: aqua;
    font-weight: bold;
}
.url{
    color: rgb(0,150,250);
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
}