.circle.resume{
background:#f2a900;
color:black;
}

.circle.portfolio{
background:#ff3c2f;
color:white;
}

.circle.contact{
background:#7fc6c7;
color:black;
}.resume{
background:#f2a900;
}

.portfolio{
background:#ff3c2f;
color:white;
}

.contact{
background:#7fc6c7;
}
.circle:hover{
transform:scale(1.15);
box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

/* RESET 2  */
*{
box-sizing:border-box;
}




html{
scroll-behavior:smooth;
}



*{
caret-color: transparent;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html, body{
height:100%;
margin:0;
}

.pagecontent {
  flex:1;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#f4f4f4;
color:#111;

min-height:100%;
  
display:flex;
flex-direction:column;
}
/* NAVBAR */

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 80px;
max-width:1200px;
margin:auto;
}

.logo{
display:flex;
align-items:center;
gap:12px;
}

.logo h1{
font-size:25px;
font-weight:600;
}

.logo p{
font-size:16px;
color:#777;
}

.dot{
width:12px;
height:12px;
background:#f2a900;
border-radius:50%;
position:relative;
top:-10px;
}

a{
text-decoration:none;
color:black;
}

/* NAV LINKS */

nav a{
margin:0 15px;
font-weight:500;
}

nav a:not(:last-child)::after{
content:" | ";
margin-left:15px;
color:#555;
}

/* HERO SECTION */

.hero{
display:flex;
align-items:center;
justify-content:center;
gap:80px;
padding:30px 5%;
max-width:1200px;
margin:auto;

flex:1;
}

/* PROFILE IMAGE */

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

.profile-img{
width:320px;
height:320px;
border-radius:50%;
object-fit:cover;
object-position:center 15%;
max-width:90vw;
}

/* CONTENT */

.content h2{
font-size:80px;
margin-bottom:10px;
}

.content h3{
margin-bottom:15px;
}

.content p{
max-width:420px;
color:#555;
line-height:1.6;
}

/* BUTTONS */

.buttons{
margin-top:20px;
display:flex;
justify-content:center;
gap:25px;
flex-wrap:nowrap;
}

.circle{
width:120px;
height:120px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
cursor:pointer;
transition:transform .3s, box-shadow .4s;
color:black;
}

.circle:hover{
transform:scale(1.2);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.resume{
background:#f2a900;
}

.portfolio{
background:#ebebeb;
color:rgb(0, 0, 0);
}

.contact{
background:#ebebeb;
}



html, body{
height:100%;
overflow-x:hidden;
overflow-y:auto;
}



h2:hover{
transform:scale(1);
transition:transform .2s;
}





/* RESPONSIVE DESIGN */

@media (max-width:900px){

/* HERO STACK */
.logo{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.dot{
position:relative;
top:-13px;
left: 3px;
}

  nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-top:15px;
}

nav a{
background:#ffffff;
padding:8px 14px;
border-radius:20px;
font-size:14px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

nav a:hover{
background:#f2a900;
color:white;
}




 .buttons{
margin-top:20px;
display:flex;
justify-content:center;
gap:25px;
flex-wrap:nowrap;
}

.circle{
width:95px;
height:95px;
font-size:15px;
}

.contact{
margin-top:0;
}



  


  
.hero{
flex-direction:column;
text-align:center;
gap:35px;
padding:40px 20px;
}

/* PROFILE IMAGE */

.profile-img{
width:230px;
height:230px;
}

/* TEXT SIZE */

.content h2{
font-size:42px;
}

.content p{
padding:0 15px;
}



/* BUTTON SIZE */

.circle{
width:110px;
height:110px;
font-size:16px;
}

}


/* DISABLE TEXT SELECTION EVERYWHERE */

*{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;

cursor:default;
}


/* MAKE CLICKABLE ELEMENTS POINTER */

a,
button,
.circle,
nav a,
footer a{

cursor:pointer;


}


.nav{
max-width:420px;
width:100%;
margin:auto;
padding:0 16px;
box-sizing:border-box;
}
nav a{
border-radius:20px;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
}



@media (max-width:370px){

.nav{
padding-left:20px;
padding-right:20px;
}

nav{
gap:6px;
}

}body{
padding-left:16px;
padding-right:16px;
box-sizing:border-box;
}