/* For my personal image */
#my-img { 
  border-radius: 50%;
  max-width:100%; 
  height:auto;
}

/* Scrolling behavior */
*{scroll-behavior: smooth;}

/* Fixes overflow */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Lists modification */
.lists {
  list-style: none;
}

/* For img with text */
.img-with-text {
    text-align: center;
    display: block;
    margin: 0 auto;
}

/* Download resume button */
.download-resume {
  border: 3px outset;
  border-radius: 8%;
}

.my-resume-text-color {}


/* For image resizing */
.img-resizer {
  border-radius: 50%;
  text-align: left;
  max-width:100%; 
  height:auto;
}

.img-resizer-2 {
  border-radius: 10%;
  text-align: left;
  max-width:100%; 
  height:auto;
}

/* Alignment */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* Icon sizes */
.custom-fa-size { 
  transform: scale(1.5, 1.5); 
}

.custom-fa-size-2 {
  transform: scale(2.5, 2.5); 

}

/* Navigation button padding */
.nav-padding {
  padding-right: 10px; 
  padding-left: 10px;
  padding-top: 50px;
  padding-bottom: 15px;
}

/* Full Screen Height */
.full-screen-height {
  height: 100vh;
  width: 100vw;
}

/* Z-index */
.line-z-index {
  z-index: 0;
}


/* FONTS */
.roberto-font {
  font-family: 'Roboto', sans-serif;
}

.montserrat-font {
  font-family: 'Montserrat', sans-serif;
}

.inter-font {
  font-family: 'Inter', sans-serif;
}

.poppins-font {
  font-family: 'Poppins', sans-serif;
}


/* For scroll snapping */
.scroll-container {
  overflow: scroll;
  scroll-snap-type: y mandatory;
  height: 100vh;
  width: 100vw;
}

.scroll-area {
  scroll-snap-align: start;
  height: 100vh;
  width: 100vw;
}

.scroll-area2 {
  scroll-snap-align: start;  
}


/* For the circle around icons */
.icon-circle {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;

}

/* For anchor linking */
#home {}
#about {}
#projects {}
#contact {}


/* For seeing more projects */
#extra-projects {
  display: none;
}

#my-btn-more {
  display: inline;
}

#more-div {
  display: inline;
}

#my-btn-less {
  display: none;
}


#less-div {
  display: none;
}


/* Hover Finger */
.link-click {
  cursor: pointer;
}


/* Light and Dark mode classes*/
.background-general-color {}
.background-header-bar-color {}
.my-text-hr-color {}
.my-contact-color {}


/* Light and Dark Mode Icons */
#sun-button {
  display: none;
}

#moon-button {
  display: inline;
}