/**************** GLOBAL ****************/

:root{
  --color-white:      hsl(0, 0%, 100%);
  --color-light-gray: hsl(0, 0%,  85%);
  --color-dark-gray:  hsl(0, 0%,  60%);
  --color-black:      hsl(0, 0%,  10%);

  --padding: calc(3 * var(--font-size));
  --font-size: 1.75vh;
  --spacing-1: var(--font-size);
  --spacing-2: calc(var(--font-size) * 2);

  --h1-font-size:   calc(3 * var(--font-size));
  --h2-font-size:   calc(1.5 * var(--font-size));
  --h3-font-size:   calc(1 * var(--font-size));
  --h4-font-size:   var(--font-size);
  --p-font-size:    var(--font-size);

  --h1-line-height: var(--h1-font-size);
  --h2-line-height: var(--h2-font-size);
  --h3-line-height: calc(1.5 * var(--h3-font-size));
  --h4-line-height: calc(1.5 * var(--h4-font-size));
  --p-line-height:  calc(1.5 * var(--p-font-size));

  --button-margin: 0.75vh;
  --button-padding-top-and-bottom: 0.25vh;
  --button-padding-left-and-right: 1.5vh;

  --experience-card-info-main-height: calc(var(--h3-line-height) + var(--spacing-1) + (3 * var(--p-line-height)));

  --height-a: calc(100vh - var(--padding));
  --height-nav: calc(var(--font-size) + (2 * var(--button-padding-top-and-bottom)) + (2 * var(--padding)));
}

/* All elements */

* {
  margin: 0;
  padding: 0;

  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size);
  font-weight: normal;
  background-color: var(--color-black);
  color: var(--color-dark-gray);

  -ms-overflow-style: none;  /* To hide scrollbar for IE and Edge */
  scrollbar-width: none;     /* To hide scrollbar for Firefox */
}

*::-webkit-scrollbar {
  display: none;             /* To hide scrollbar for Chrome, Safari, and Opera */
}

/* Body */

/* Typography */

h1 {
  margin: 0 0 var(--spacing-1) 0;

  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  font-weight: bold;
  color: var(--color-white);
}

h2 {
  margin: 0 0 var(--spacing-2) 0;

  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  color: var(--color-white);
}

h3 {
  margin: var(--spacing-2) 0 var(--spacing-1) 0;

  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
  color: var(--color-light-gray);
}

h4 {
  margin: var(--spacing-2) 0 0;

  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
  color: var(--color-light-gray);
}

p {
  margin: 0 0 var(--spacing-1);

  font-size: var(--p-font-size);
  line-height: var(--p-line-height);
}

#highlight {
  color: var(--color-light-gray);
  font-weight: bold;
}

/* Buttons */
button {
  margin-left: 1px;
  margin-right: var(--button-margin);
  border: none;
  padding: var(--button-padding-top-and-bottom) 0;

  background-color: var(--color-light-gray);
  color: var(--color-black);
  text-decoration: none;
  outline: 1px solid var(--color-light-gray);
  border-radius: calc(var(--font-size));
}

button:hover {
  background-color: var(--color-black);
  color: var(--color-light-gray);
}

.button-selected {
  background-color: var(--color-black);
  color: var(--color-light-gray);
}

.hide {
  display: none;
}

/*************** CONTAINER **************/

.container > div {
  margin: 0 var(--padding) var(--padding);
}

/***************** HERO *****************/

#heading > p:last-child {
  margin-bottom: 0;
}

#hero {  
  height: calc(100vh - (var(--padding) - 1px));

  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

/* Heading */

#heading {
  margin: var(--padding) var(--padding) 0;

  display: flex;
  flex-flow: column nowrap;
}

#heading > div:not(:first-child) {
  margin-top: var(--padding);
}

#pic-and-name-div {
  display: flex;
  flex-flow: row nowrap;

  width: 100%;
}

#pic-and-name-div > div {
  height: 25vh;
}

#my-pic {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
}

#my-name {
  margin-left: var(--padding);
  align-content: center;
}

/* Contacts */

#contacts {
  margin-bottom: 0;
}

#contacts > div {
  display: flex;
  flex-flow: row nowrap;
}

.contact-button {
  width: calc(25% - (2px + var(--button-margin)));
}

.contact-button:last-child {
  margin-right: 0;
}

/******************* B ******************/
/***************** MAIN *****************/

main {
  padding-top: 0;
}

main > .show {
  min-height: calc(100vh - (var(--height-nav) + var(--padding) + 2px));

  overflow-y: scroll;
}

/* Nav */

#nav {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;

  margin: 0;
  padding: var(--padding);
  max-width: 100vw;

  display: flex;
  flex-flow: row nowrap;
  overflow-x: scroll;
}

.nav-button {
  min-width: 8rem;
}

.nav-button:last-child {
  margin-right: 1px;
}

/* Section */

.header {
  margin-bottom: var(--spacing-1);
}

.sub-header {
  margin: var(--spacing-1) 0 var(--spacing-2);
}

/* Experience */

#experience > div > div > p {
  margin-bottom: 0;
}

.experience-card {
  display: flex;
  flex-flow: row wrap;

  margin: var(--spacing-2) 0 0;
}

.experience-card-logo {
  height: var(--experience-card-info-main-height);
  width: var(--experience-card-info-main-height);
}

.experience-card-logo > img {
  height: var(--experience-card-info-main-height);
  width: var(--experience-card-info-main-height);
  object-fit: scale-down;
}

.experience-card-info-main {
  margin-left: var(--spacing-1);
  height: var(--experience-card-info-main-height);
  width: calc(100% - (var(--experience-card-info-main-height) + var(--spacing-1)));

  overflow: hidden;
}

.experience-card-info-main > h4 {
  margin: 0 0 var(--spacing-1) 0;
}

.experience-card-info-more {
  margin-top: var(--spacing-1);
  width: 100%;
}

/* Education */

/* Skills */

.skill-name-button:hover {
  background-color: var(--color-light-gray);
  color: var(--color-black);
}

.skill-button {
  margin-top: calc(var(--spacing-1) / 2);
  margin-bottom: var(--spacing-1);

  padding: var(--button-padding-top-and-bottom) var(--button-padding-left-and-right);

  background-color: var(--color-black);
  color: var(--color-dark-gray);
}

.skill-button:hover {
  background-color: var(--color-black);
  color: var(--color-dark-gray);
}

/* Projects */

.project-button {
  margin: var(--spacing-1) 0 var(--spacing-1) 1px ;
  padding: var(--button-padding-top-and-bottom) var(--button-padding-left-and-right);
}

.project-button-first-child {
  margin-top: 0;
}

/* Certifications */

/************** BREAKPOINTS *************/

@media (min-width: 48rem) {

  :root {
    --padding: calc(5 * var(--font-size));
  }

  .experience-card-info-more {
    margin-left: calc(var(--experience-card-info-main-height) + var(--spacing-1));
    width: calc(100% - (var(--experience-card-info-main-height) + var(--spacing-1)));
  }

}

@media (min-width: 100rem) {

  .body {
    position: relative;
  }

  #hero {
      position: fixed;
      top: 0;
      left: 0;

      width: 40vw;
  }

  main {
      margin-left: 40vw;
  }
}

/**************** TESTING ***************/

/* .container {
  outline: 1px solid black;
} */

/* .container > div {
  outline: 1px solid white;
} */

/* #heading > div {
  outline: 1px solid red;
} */

/* h1 {
  outline: 1px solid white;
}

h2 {
  outline: 1px solid red;
}

h3 {
  outline: 1px solid green;
}

h4 {
  outline: 1px solid yellow;
}

p {
  outline: 1px solid blue;
}

.experience-card > div {
  outline: 1px solid red;
} */