:root {
--bg: #1c1b1b;
--text: #eeeeee;
--card: #0b0b0c;
--accent: #f1f1f1;
}
body.light {
--bg: #ffffff;
--text: #111111;
--card: #f2f2f2;
--accent: #007b83;
}

* {
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: "Open Sans", sans-serif;
background-color: var(--bg);
color: var(--text);
margin: 0;
line-height: 1.6;
transition: background-color 0.3s, color 0.3s;
}
h1,
h2,
h3 {
font-family: "Montserrat", sans-serif;
}
img {
max-width: 100%;
display: block;
border-radius: 8px;
}

header {
text-align: center;
padding: 70px 20px;
}
header h1 {
color: var(--accent);
font-size: 3.2em;
margin-bottom: 10px;
}
header p {
color: #bbb;
}

section {
/* max-width: 1000px; */
margin: auto;
padding: 40px 20px;
}
h2 {
text-align: center;
color: var(--accent);
margin-bottom: 5px;
}

/* ABOUT */
.about {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.outer-div{
    width:400px;
    height:400px;
    background: var(--accent);
    border-radius:50%;
    animation: outanim;
    animation-duration:3s;
}
@keyframes outanim {
    0%{

    }
    50%{
        margin-left:-100%
    }
    75%{
        margin-right: -100%;
    }
    100%{
        
    }
}
.inner-div{
    width: 360px;
    height:360px;
    background: var(--bg);
    border-radius:50%;
    margin-left:-60px;
    margin-top:-25px;
    border: 4px solid var(--accent);
    border-right:var(--bg);
    border-bottom:var(--bg);
    /* box-shadow: 0 4px 8px 0 var(--bg), 0 6px 20px 0 var(--bg);; */
    z-index:-999;
    animation:inanim;
    animation-duration:3s;
    animation-iteration-count: infinite;
    animation-delay:1s;
}
@keyframes inanim {
    0%{
        margin-left:-60px;
        margin-top:-25px;
    }
    50%{
        margin-left:60px;
        margin-top:-25px;
    }
    75%{
         /* margin-left:0px; */
        margin-top:50px;     
    }
    100%{
        margin-left:-60px;
        margin-top:-25px;
    }
}
.inner-div img {
width: 350px;
height: 350px;
border-radius: 50%;
object-fit:cover;
/* z-index: -999; */
}
.about p {
max-width: 500px;
text-align: center;
}

/* PROJECTS */
.projects {
/* display: grid; */
/* grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); */
margin:0;
display:flex;
gap: 20px;
overflow-x: scroll;
scrollbar-width: none;
}
.project:nth-child(1),.project:nth-child(2),.project:nth-child(3) {
min-width:500px;
background: var(--card);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: transform 0.5s, box-shadow 0.3s;
transition:0.6s ease-in-out;
animation: anim;
animation-duration:20s;
animation-iteration-count: infinite;
}
@keyframes anim {
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(-540px);
    }
    100%{
        transform: translateX(0px);
    }
}
.project:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* SKILLS */
.skills {
text-align: center;
justify-content: center;
width:80%;

}
.skills p {
background: var(--card);
display: inline-block;
padding: 10px 15px;
border-radius: 8px;
margin:5px;
color: #555353;
transition: transform 0.5s, box-shadow 0.3s;
transition:0.6s ease-in-out;
animation: ski;
animation-duration: 2.5s;
animation-iteration-count:infinite;
}

.skills p:nth-child(1){
    animation-delay:.2s;
}

.skills p:nth-child(2){
    animation-delay:.4s;
}
.skills p:nth-child(3){
    animation-delay:.6s;
}
.skills p:nth-child(4){
    animation-delay:.8s;
}
.skills p:nth-child(5){
    animation-delay:1s;
}
.skills p:nth-child(6){
    animation-delay:1.2s;
}
.skills p:nth-child(7){
    animation-delay:1.4s;
}
.skills p:nth-child(8){
    animation-delay:1.6s;
}
.skills p:nth-child(9){
    animation-delay:1.8s;
}
.skills p:nth-child(10){
    animation-delay:2s;
}
.skills p:nth-child(11){
    animation-delay:2.2s;
}



@keyframes ski {
   from{
        filter: opacity(0);
    }
    to {
       filter: opacity(1);
    }
}

/* CONTACT */
.contact {
text-align: center;
width:fit-content;
padding:25px;
border:2px solid var(--accent);
border-radius:5px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
margin: 0 auto;
}
input,
textarea {
padding: 10px;
border: none;
outline: none;
background: var(--card);
color: var(--text);
}
button {
background: var(--accent);
color: var(--bg);
border: none;
padding: 12px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: black;
}

/* TOGGLE */
.theme-toggle {
position: fixed;
top: 15px;
right: 15px;
background:black;
color: var(--text);
border: none;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
}

/* WHATSAPP BUTTON */
.whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
background: #25d366;
color: white;
border: none;
padding: 14px 18px;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
animation:whats;
animation-duration:1s;
animation-iteration-count: infinite;
}
@keyframes whats {
    0%{
       padding: 14px 18px;
    }
    50%{
        padding:16px 20px;
        bottom:10px;
    }
    100%{
         padding: 14px 18px;
    }
}
.whatsapp:hover {
background: #1ebe5c;
}

footer {
text-align: center;
padding: 20px;
font-size: 0.9em;
color: #777;
}

@media (max-width: 600px) {
header h1 {
    font-size: 2.2em;
}
.about {
    flex-direction: column;
}
.project:nth-child(1),.project:nth-child(2),.project:nth-child(3){
    min-width:300px;
}
.inner-div{
    width:320px;
    height:320px;
}
.outer-div{
    width:370px;
    height:370px ;
}
.inner-div img {
width: 310px;
height: 310px;
}
@keyframes outanim {
    0%{

    }
    50%{
        margin-bottom:-100%
    }
    75%{
        margin-top: 100%;
    }
    100%{
        
    }
}
@keyframes anim {
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(-600px);
    }
    100%{
        transform: translateX(0px);
    }
}
}