*{
    margin: 0px;
    padding:0px;
    font-family: 'Poppins',sans-serif;
    box-sizing: border-box;
}

:root {
    --contrast-color: #ff004f;
    --off-white: #ababab;
    --social-icon-inner-color: #fff;
    --desc-font-size: 11px;
    /*----- Light theme ------*/
    --website-primary-color: #f5edec;
    --website-secondary-color: #33000d;
    --panel-contrast-color: #33000d;
    --card-background: #f6f6f6;
    --label-background: #ababab;
  }

.dark-theme {
  /*------- Contrast color scheme for dark theme ------*/
  --website-primary-color: #080808;
  --website-secondary-color: #fff;
  --panel-contrast-color: #ff004f;
  --card-background: #333;
  --label-background: #5a5a5a
}

body {
    /* background-image: url(../images/background-design.png); */
    /* background-size: cover */
    background: var(--website-primary-color);
    color: var(--website-secondary-color);
}

html {
  scroll-behavior: smooth;
}

/*------------ Home page ---------------*/
.section-spacing{
    padding: 20px 8% 30px;
}

.mainHeader {
  width: 100%;
  padding: 20px 8% 0px;
}

.padbtm-50px,.intro-text {
  padding-bottom: 50px;
}

.mainHeader .logo {
    width: 10rem;
    padding-top: 5px;
}

.mainHeader nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.mainHeader nav ul li{
    display: inline-block;
    list-style: none;
    margin: 10px 20px;
}

.mainHeader nav ul li a {
    color: var(--website-secondary-color);
    text-decoration: none;
    font-size: 15px;
    position: relative;
}

.mainHeader nav ul li a::after,.view-transcript::after{
    content: '';
    width: 0%;
    height: 3px;
    background: var(--contrast-color);
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.4s;
}

.mainHeader nav ul li a:hover::after,.view-transcript:hover::after{
    width: 100%;
}

.intro-text p {
    margin-top: 6%;
    font-size: 18px;
    color: var(--off-white);
}

.intro-text h1{
    font-size: 50px;
}

.intro-text h1 span {
    color: var(--contrast-color);
}

/* ----------About section------------- */

.display-flex, .display-flex-wrap, .display-flex-center{
    display: flex;
    justify-content: space-between;
}

.display-flex-wrap {
  flex-wrap: wrap;
}

.display-flex-center {
  align-items: center;
}

.about-col-1, .edu-col-2,
.contact-left{
    flex-basis: 35%;
}

.about-col-1 img , .edu-col-2 img{
    width: 100%;
    border-radius: 15px;
}

.about-col-2, .edu-col-1{
    flex-basis: 60%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.section-title {
  position: relative;
  display: inline-block; /* Header are 100% width by their default block behaviour */
  font-size: 30px;
  font-weight: 600;
  color: var(--website-secondary-color);
}

.section-title:before{
  position: absolute;
  height: 2.5px;
  width: 70%;
  left: 0;
  bottom: -2px;
  background: var(--contrast-color);
  display: block;
  content: "";
}

.bio {
  margin-top: 15px;
}

.about-col-2 .bio {
    text-align: justify;
}

.social-section .social-row {
  margin-top: 35px;
}

.social-section .social-row, .uni-card {
    display: flex;
    flex-direction: row;
    align-items: center;

}

.social-section .social-row p {
  margin: 0px 0px 0px 10px;
}

.social-icons {
  display: flex;
  align-items: center;
  position: relative;
  left: -3px;
}

.social-icons a {
  margin-right: 10px;
}

.social-icons i {
    border-radius: 2.6rem;
    cursor: pointer;
    display: inline-block;
    font-size: 1.4rem;
    height: 2.2rem;
    width: 2.2rem;
    line-height: 2.4rem;
    position: relative;
    text-align: center;
    user-select: none;
  }

  .cv-button,.send-button {
    text-decoration: none;
    display: inline-block;
    padding: 8px 10px;
    font-size: 12px;
    color: #fff;
    background-color: #ff004f; 
    border: 2px solid #ff004f;
    border-radius: 5px; 
    user-select: none;
  }
  

  .contrast-color {
    color: var(--contrast-color);
  }

  .linked-color {
    background-color: rgb(0, 119, 181);
    color: var(--social-icon-inner-color);
  }

  .git-color {
    color: #000;
    background-color: #f6f6f6;
  }

  .leetcode-color {
    color: var(--social-icon-inner-color);
    background-color: #ebce00;
  }

  .margin-lr-5px {
    margin: 0px 5px;
  }

  /*------------ Education ----------*/
  #education {
    margin-top: 5%;
  }

  .details-section {
    margin-top: 3%;
  }


  .uni-logo {
    border: 1px solid #d9dbdf;
    border-radius: 50%;
    height: 68px;
    width: 75px;
    background: var(--card-background);
    padding: 8px;
    box-shadow: 1px 1px 1px var(--off-white);
    display: block;
  }

  .uni-logo img {
    max-width: 100%;
    max-height: 100%;
  }

  .uni-details {
    margin: 10px;
    padding: 25px 30px;
    width: 100%;
    background: var(--card-background);
    border-radius: 10px;
  }

  .uni-details .uni-desc {
    margin-top: 15px;
    border-radius: 5px;
    color: var(--website-secondary-color);
  }

  .uni-details .header, .timeline-content .header {
    border-bottom: 1px solid #b54;
  }

  .uni-details .uni-desc p span {
    display: inline-block;
    background-color: var(--label-background);
    padding: 3px 5px;
    margin: 2px;
    border-radius: 10px;
    font-size: 9px;
    color: white;
    font-weight: 500;
  }

  .uni-details .uni-desc p i {
    color: var(--card-background);
    background: rgb(235, 206, 0);
    padding: 2px;
  }

  .uni-details a, .company-info a {
    text-decoration: none;
  }

  .uni-details h2, .company-info h2 {
    font-size: 15px;
    font-weight: 550;
    color: var(--website-secondary-color);
  }

  .uni-details .display-flex-center p,
  .timeline-content .header p {
    font-size: 11px;
    font-weight: 600;
    color: var(--off-white)
  }


.padbottom-5px,.timeline-content .header {
  padding-bottom: 5px;
}

.pad5px {
  padding: 5px;
}
/*------------- Experience --------------*/ 
.fun-fact {
  display: inline;
  word-wrap: break-word;
  font-style: italic;
  font-size: 12px;
}

.fun-fact.typed-cursor {
  font-size: 14px
}

.experience-timeline {
  position: relative;
  margin: 0 auto;
  margin-top: 3%;
}

/* The actual timeline (the vertical ruler) */
.experience-timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: var(--card-background);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
  border-radius: 5px;
}

/* Container around content */
.timeline-dot {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline-dot::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  right: -11px;
  background-color: var(--card-background);
  border: 4px solid var(--contrast-color);
  top: 20px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.timeline-left {
  left: 0;
}

/* Place the container to the right */
.timeline-right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.timeline-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid var(--card-background);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--card-background);
}

/* Add arrows to the right container (pointing left) */
.timeline-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid var(--card-background);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--card-background) transparent transparent;
}

/* Fix the circle for containers on the right side */
.timeline-right::after {
  left: -12px;
}

/* The actual content */
.timeline-content {
  padding: 20px 30px;
  background-color: var(--card-background);
  position: relative;
  border-radius: 6px;
}

.company-info img {
  max-height: 2rem;
  max-width: 2.25rem;
  margin-right: 10px;
}

.company-desc p,.uni-desc p {
  margin: 10px 0px;
}

.company-desc p,.uni-desc p {
  font-size: var(--desc-font-size);
  color: var(--website-secondary-color);
}

.role-icons i {
  border-radius: 2.6rem;
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  margin: 0 3px;
  user-select: none;
  cursor: default;
  color: var(--off-white);
}

/*--------------- contact -------------*/
.contact-left h1 {
  margin-top: 10px;
}

.contact-left p, .cv-button{
  margin: 20px 0px;
}

.contact-left p a {
  color: var(--website-secondary-color);
  text-decoration: none;
  word-break: break-all;
}

.contact-left p a:hover,
.uni-details a h2:hover,
.company-info a h2:hover{
  color: var(--contrast-color) !important;
  text-decoration: underline;
}

.contact-left p i {
  color: var(--contrast-color);
  margin-right: 5px;
  font-size: 15px;
}

.contact-right {
  flex-basis: 60%;
}

.contact-right form, .contact-right form textarea {
  width: 100%;
}

.contact-right form .col1 {
  flex-basis: 46%;
}

.contact-right form .col2 {
  flex-basis: 51%;
}

.contact-right form input, .contact-right form textarea {
  border: 0;
  outline: none;
  background: var(--card-background);
  padding: 15px;
  margin: 10px 0;
  color: var(--website-title-color);
  font-size: 15px;
  border-radius: 6px;
  width: 100%;
}

.margin0 {
  margin: 0px;
}

textarea {
  resize: none;
}

.boldFont {
  font-weight: bold;
}


/*-------- Light Dark theme ---------*/
.light-dark i {
  cursor: pointer;
}

.light-dark i:hover {
  color: var(--contrast-color);
}

/*------- footer -----------*/

footer {
  background-color: #333; /* Background color for the strip */
  color: #fff; /* Text color for the copyright notice */
  text-align: center;
  padding: 8px;
  bottom: 0;
  width: 100%;
  font-size: 10px;
  display: flex;
  justify-content: center;
}

/*------ Reveal on scroll -----*/
.reveal {
  position: relative;
  transform: translateY(150);
  opacity: 0;
  transition: all 1s ease;
}

.reveal.active {
  transform: translate(0px);
  opacity: 1;
}

  /* Style for the message toast */
  .toast {
    visibility: hidden;
    min-width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 12px;
    position: fixed;
    z-index: 1;
    left: 60%;
    bottom: 30px;
    font-size: 10px;
    transform: translateX(-50%);
}
/* Show the toast */
.show {
    visibility: visible;
}

/*-------- CSS specific to small screens --------*/

.mainHeader nav .fas {
  display: none;
}
@media only screen and (max-width: 600px){
  .mainHeader nav .fas {
    display: block;
    font-size: 18px
  }

  .mainHeader .logo {
    width: 7rem;
    padding-top: 5px;
  }

  .mainHeader nav ul {
    background: var(--panel-contrast-color);
    color: white;
    position: fixed;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100vh;
    padding-top: 50px;
    z-index: 1;
  }

  .mainHeader nav ul li a,
  .light-dark i:hover {
    color: white;
  }

  .mainHeader nav ul li a:hover::after {
    width: 0%;
  }

  .mainHeader nav ul li {
    display: block;
    margin: 25px;
  }

  .mainHeader nav ul .fas{
    position: absolute;
    top: 25px;
    left: 25px;
    cursor: pointer;
  }

  .intro-text {
    padding-bottom: 20px;
  }
  
  .intro-text p {
    font-size: 16px;
  }

  .intro-text h1 {
    font-size: 30px;
  }

  #homePage .display-flex-wrap {
    display: block;
  }
  /*----- Education --------*/
  #education .details-section.display-flex-center,
  #contact .details-section.display-flex {
    display: block;
  }

  #education .edu-col-2 {
    margin-top: 10px;
  }

  .uni-details h2,.company-info h2{
    font-size: 11px;
  }

  .uni-details .display-flex-center p,
  .timeline-content .header p{
    font-size: 8px;
  }

  .uni-details .uni-desc p, .company-desc p{
    font-size: 10px;
  }

  .uni-logo {
    height: 55px;
    width: 63px;
  }
  /*-------------- Experience ---------*/
  .timeline-dot {
    width: 100%;
  }

  .timeline-right {
    left: 0%;
  }

  .experience-timeline::after,
  .timeline-left::before,.timeline-right::before,
  .timeline-dot::after{
    display: none;
  }

  /*------- Contact ---------*/
  .contact-right {
    margin-top: 10px;
  }
}