:root {
--text-color: rgb(85, 85, 85);
--dark-color: rgb(8, 8, 8);
--soft-color: rgb(163, 163, 163);
--softer-color: rgb(225, 225, 225);
--accent-color: rgb(38, 89, 155);
--light-accent-color : rgb(173, 201, 230); 
--light-color: rgb(255, 255, 255);
}


/* GENERAL */

.differ {
  display: none;
}

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


body {
font-family: 'Nunito', sans-serif;
background-color: var(--light-color);
width: auto;
display: flow-root;
overflow-x: clip;
}

html {
scroll-behavior: smooth;
display: flow-root;
overflow-x: clip;
max-width: 100vw;
}

p {
color: var(--text-color);
/* font-size: 1.1rem; */
font-size: 1rem;
}

h1, h2, h3{
color: var(--text-color);
}

h1{
  font-size: 3rem;
}

h2{
  font-size: 2rem;
}

h3, .like_h3{
  font-size: 1.5rem;
}

.text_p1 {
text-align: center;
}

.title {
font-size: 3rem;
text-align: center;
}

img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}

/* TRANSITION */

a,
.btn {
transition: all 300ms ease;
}


/* ICONS */

.icon {
cursor: pointer;
height: 2rem;
color: var(--dark-color);
}

.arrow {
position: absolute;
right: -5rem;
bottom: 2.5rem;
}

.contact-icon {
cursor: default;
}

.email-icon {
height: 2.5rem;
}

article .icon {
cursor: default;
}


/* BUTTONS */
.btn-container {
display: flex;
justify-content: center;
gap: 1rem;
}

.btn {
font-weight: 600;
transition: all 300ms ease;
padding: 1rem;
width: 9rem;
border-radius: 2rem;
border: var(--text-color) 0.1rem solid;
}

.btn-color-1,
.btn-color-2 {
border: var(--text-color) 0.1rem solid;
}

.btn-color-1:hover,
.btn-color-2:hover {
cursor: pointer;
}

.btn-color-1,
.btn-color-2:hover {
background: var(--text-color);
color: var(--light-color);
}

.btn-color-1:hover {
background: var(--dark-color);
border-color: var(--dark-color);
}

.btn-color-2 {
background: none;
color: var(--dark-color);
}

.btn-color-2:hover {
border: var(--text-color) 0.1rem solid;
}

.btn-container {
gap: 1rem;
}


/* SECTIONS */

section {
padding-top: 4vh;
margin: 0 5rem;
box-sizing: border-box;
min-height: fit-content;
}

.section_container {
/* padding-top: 5vh; */
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1rem;
margin-top: 1rem;
}

.details-container {
padding: 1rem;
flex: 1;
background: var(--light-color);
border-radius: 2rem;
border: var(--soft-color) 0.1rem solid;
text-align: center;
max-width: 50%;
transition: all 0.3s ease-in-out;
}

/* Define the rotating shake animation */
@keyframes rotating-shake {
    0% { transform: rotate(0deg); }
    2.5% { transform: rotate(5deg); }
    5.0% { transform: rotate(0deg); }
    7.5% { transform: rotate(-5deg); }
    10.0% { transform: rotate(0deg); }
  }
  
  /* Apply the shaking animation on hover */
  .details-container:hover {
    cursor: pointer;
    animation: rotating-shake 3s infinite;
  }
  

.article-container {
display: flex;
text-align: initial;
flex-wrap: wrap;
flex-direction: row;
gap: 2.5rem;
justify-content: space-around;
}

article {
display: flex;
width: 90%;
/* justify-content: space-around; */
justify-content: flex-start;
gap: 0.5rem;
}

.color-container {
border-color: var(--soft-color);
background: var(--light-color);
}

#profile, #about{
position: -webkit-sticky;
}


/* PROFILE SECTION */

#profile {
position: sticky;
top: 0;
display: flex;
justify-content: center;
gap: 2vmin;
height: 80vh;
z-index: 96;
}

.profile_pic_container {
max-width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 30vw;
width: 50%;
margin: auto;
position: relative;
clip-path: circle(50% at center);
}

.profile_pic {
width: 100%;
height: 100%;
object-fit: contain;
z-index: 97;
transform: scale(5) translate(23%, 15%); 
background: radial-gradient(circle at center, transparent 30%, var(--softer-color) 50%, var(--soft-color) 100%);
}

.profile_text_container {
align-self: center;
text-align: center;
}

.profile_text_container p {
font-weight: 600;
}

/* PROFILE ANIMATED TYPEWRITER TEXT  */

.text_typewriter {
font-size: 1.75rem;
margin-bottom: 1rem;
color: var(--accent-color);
}
#cursor {
color: var(--text-color);
animation: blink 2s infinite;
font-weight: lighter;
font-style: oblique;
}

@keyframes blink {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}

#profile_socials_container {
display: flex;
justify-content: center;
margin-top: 1rem;
gap: 1rem;
}


/* ABOUT SECTION */

#about {
position: sticky;
top: 0;
/* max-height: 200vh; */
/* height: 150vh; */
padding-top: 7%;
}

.about_title{
padding-right: 5vw;
font-size: 3rem;
text-align: center;
}

.about_details_container {
display: flex;
justify-content: flex-start;
flex-direction: column;
}

.about_section_container {
display: flex;
height: 80%;
margin-left: 35%;
}


.about_text_container {
text-align: left;
margin-bottom: 1vH;
margin-right: 2vw;
max-height: 28vh;
overflow: hidden;
word-wrap: break-word;
text-wrap: wrap;
flex-wrap: wrap;
}


/* PROJECTS SECTION */

#projects {
position: relative;
background-color: transparent;
/* padding-top: 100vh; */
/* min-height: 100vh;
max-width: 100vw; */
margin-bottom: 20%;
margin-top: 150vh;
}

.project-img {
border-radius: 2rem;
width: 90%;
height: 90%;
}

.project-title {
margin: 1rem;
color: var(--text-color);
}

.project-btn {
color: var(--text-color);
border-color: var(--soft-color);
}

/* CONTACT */

#contact {
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 60vh;
padding-bottom: 25vh;
}

.contact-info-upper-container {
display: flex;
justify-content: center;
border-radius: 2rem;
border: var(--soft-color) 0.1rem solid;
background: var(--light-color);
margin: 2rem auto;
padding: 0.5rem;
gap: 1rem;
}

.contact-info-container {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 1rem;
}

.contact-info-container p {
font-size: larger;
}

/* FOOTER SECTION */

footer {
/* height: 26vh; */
margin: 0 1rem;
}

footer p {
text-align: center;
}

footer .copyright{
  /* position: fixed;
  bottom:0%;
  right: 0%; */
  text-align: right;
  /* transform: translate(20%, 0%); */
  font-size: 0.5rem;
}


/* LANGUAGE SELECTION  */

.language-selection {
  position: fixed;
  bottom: 0;
  left: 0;
  /* transform: translateY(-50%); */
  padding: 10px;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border-radius: 1rem; */
  z-index: 101;
}

.language-selection span {
  margin: 0;
  padding: 0;
}

.language-selection button {
  background-color: var(--text-color);
  color: var(--light-color);
  border: 1px solid var(--text-color);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 1rem;
}

.language-selection button.active {
  background-color: var(--accent-color);
}

.language-selection button:hover {
  opacity: 0.8;
}