/*
* This is a neat little trick that turns on simple borders to easily see the template.
* Note that this does add some extra border spacing that you might want to remove for the final template.
*/
/*
* {
  border: 1px solid red !important;
}
*/

/*
* Adding flex support
*/
* {
  -webkit-box-sizing: border-box;
  -mox-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --custom-text-color: rgb(209, 205, 199);

  /* --custom-body-background-color: rgb(229, 234, 238); */ /* off-white */
  /* --custom-body-background-color: rgb(36, 39, 41); */ /* off-black/dark grey */
  --custom-body-background-color: hsl(204, 6%, 22%);

  /* --custom-bg-color-about-me: rgb(114, 162, 175);
  --custom-bg-color-education: rgb(132, 183, 197);
  --custom-bg-color-workexperience: rgb(149, 204, 219);
  --custom-bg-color-projects: rgb(177, 212, 222); */

  --custom-bg-color-infotemplate: rgba(1, 1, 1, 0.05);
  --custom-bg-color-infotemplate-hover: rgba(1, 1, 1, 0.22);
  /* --custom-bg-color-infotemplate-hover: rgba(1, 1, 1, 0.5); */
  /* --custom-bg-color-infotemplate-hover: rgb(229, 234, 238); */
  
  /* --custom-bg-color-about-me: rgb(66, 106, 117);
  --custom-bg-color-education: rgb(51, 96, 108);
  --custom-bg-color-workexperience: rgb(35, 87, 102);
  --custom-bg-color-projects: rgb(35, 72, 83); */
  --custom-bg-color-about-me: hsl(193, 39%, 44%);
  --custom-bg-color-education: hsl(193, 39%, 42%);
  --custom-bg-color-workexperience: hsl(193, 39%, 40%);
  --custom-bg-color-projects: hsl(193, 39%, 38%);

  /* --custom-bg-color-description-modal: rgb(229, 234, 238); */
  --custom-modal-bg-color: rgb(36, 39, 41);
  --custom-modal-border-color: rgba(140, 130, 115, 0.2);
  --custom-modal-header-separater-color: rgb(56, 61, 63);
  --custom-hr-color: rgb(62, 68, 70);
  --custom-close-button-shadow: rgb(24, 26, 27) 0px 1px 0px;
}

* {
  color: var(--custom-text-color);
}

html, #title {
  background-color: var(--custom-body-background-color);
}

/* List styling. */
ul {
  /* padding: revert; */
  list-style-type: none;
}

h1, h2, h3, h4 {
  padding: 0px;
  margin: 0px;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: 1.4rem;
  font-variant: small-caps;
  text-transform: capitalize;
  /* text-transform: uppercase; */
}
h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.7rem;
  text-transform: lowercase;
}
h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1rem;
}
h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
}
.inner {
  max-width: 1024px;
}

/* making email link look more like normal text */
a.email {
  color: var(--custom-text-color);
}


.fadeinanim {
  animation:          fadein 2.5s;
  -o-animation:       fadein 2.5s;
  -ms-animation:      fadein 2.5s;
  -moz-animation:     fadein 2.5s;
  -webkit-animation:  fadein 2.5s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.section {
  padding: 0.5rem;
  margin: 0.5rem;
}

/* section background colors */
#title {
  padding: 1rem;
  
  animation:          fadein 1.5s;
  -o-animation:       fadein 1.5s;
  -ms-animation:      fadein 1.5s;
  -moz-animation:     fadein 1.5s;
  -webkit-animation:  fadein 1.5s;
}
#aboutme {
  background-color: var(--custom-bg-color-about-me);
  /* background-image: linear-gradient(var(--custom-bg-color-about-me), hsl(193, 39%, 10%)); */
}
#education {
  background-color: var(--custom-bg-color-education);
}
#workexperience {
  background-color: var(--custom-bg-color-workexperience);
}
#projects {
  background-color: var(--custom-bg-color-projects);
}


/* infotemplate styling */
#infotemplatebox {
  cursor: pointer;
  background-color: var(--custom-bg-color-infotemplate);
}
#infotemplatebox:hover {
  background-color: var(--custom-bg-color-infotemplate-hover);
  box-shadow: none;
}



/* descriptionModal styling */
#descriptionModalBodyContent {
  background-color: var(--custom-modal-bg-color);
}
#descriptionModal-detailsArea {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
}
#descriptionModal-textarea {
  line-height: 1.25;
  /* font-weight: 100; */
}
#descriptionModal-bulletpoints {
  line-height: 1.25;
  /* font-weight: 100; */
}
#descriptionModal-bulletpoints li {
  padding: 0.4rem;
}
#descriptionModal-links {
  word-wrap: break-word;
  line-height: 1.0;
  /* font-weight: 100; */
}
#descriptionModal-links li {
  padding: 0.3rem;
}
#descriptionModal-image {
  margin: 1em;
}
.modal-content {
  border-color: var(--custom-modal-border-color);
}
.modal-header {
  border-bottom-color: var(--custom-modal-header-separater-color);
}
hr {
  border-top-color: var(--custom-hr-color);
}
.close {
  /* Not needed for light mode */
  text-shadow: var(--custom-close-button-shadow);
}


/* about me fading */
#aboutMeLine {
  opacity: 1;
  
  transition: opacity 0.5s;
  OTransition: opacity 0.5s;
  MozTransition: opacity 0.5s;
  WebkitTransition: opacity 0.5s;
}
#aboutMeLine.fade {
  opacity: 0;
}


/* Darken scrollbar */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: #555b00 !important;
  color: #e8e6e3 !important;
}
::-webkit-scrollbar {
  background-color: #202324;
  color: #aba499;
}
::-webkit-scrollbar-thumb {
  background-color: #454a4d;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #575e62;
}
::-webkit-scrollbar-thumb:active {
  background-color: #484e51;
}
::-webkit-scrollbar-corner {
  background-color: #181a1b;
}
* {
  scrollbar-color: #202324 #454a4d;
}
::selection {
  background-color: #004daa !important;
  color: #e8e6e3 !important;
}
::-moz-selection {
  background-color: #004daa !important;
  color: #e8e6e3 !important;
}