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

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

  --padding: calc(3 * var(--font-size));
  --font-size: 1rem;

  --button-margin: 0.75rem;
  --button-padding-top-and-bottom: 0.25rem;
  --button-padding-left-and-right: 1rem;

  --experience-card-info-main-height: calc((2 * var(--font-size) + (3 * 1.5 * var(--font-size))));

  --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 */

body {
  font-size: 100%;
}

/* Typography */

h1 {
  margin: 0 0 var(--font-size) 0;

  font-size: calc(3 * var(--font-size));
  font-weight: bold;
  color: var(--color-white);

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

h2 {
  margin: 0 0 calc(2 * var(--font-size)) 0;

  font-size: calc(1.5 * var(--font-size));
  color: var(--color-white);

  /* outline: 1px solid red; */
}

h3 {
  margin: calc(2 * var(--font-size)) 0 calc(var(--font-size)) 0;

  font-size: var(--font-size);
  color: var(--color-light-gray);
  /* outline: 1px solid green; */
}

p {
  margin: var(--font-size) 0;

  line-height: calc(1.5 * var(--font-size));
  /* outline: 1px solid blue; */
}

/* 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-dark-gray);
  border-radius: calc(2 * var(--button-padding-top-and-bottom));
}

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 {
  padding: var(--padding);

  /* outline: 1px solid black; */
}

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

/* Contacts */

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

.contact-button {
  width: 100%;
}

/******************* A ******************/

#a {
  padding-bottom: 0;
  height: calc(var(--height-a) - var(--height-nav));
}

/******************* B ******************/

#b {
  padding-top: 0;
}

#b > div {
  margin-bottom: var(--padding);
}

#b > div:first-child {
  margin-bottom: 0;
}

#b > div:last-child {
  margin-bottom: 0;
}

#b > .show {
  margin-bottom: 0;
  height: calc(100vh - (var(--height-nav) + var(--padding)));

  overflow-y: scroll;
}

/* Nav */

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

  padding: var(--padding) 0;

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

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

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

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

/* Experience */

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

.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(--font-size);
  height: var(--experience-card-info-main-height);
  width: calc(100% - (var(--experience-card-info-main-height) + var(--font-size)));
}

.experience-card-info-main > h3 {
  margin: 0 0 calc(var(--font-size)) 0;
}

.experience-card-info-more {
  width: 100%;
}

/* Skills */

.skill-button {
  margin-bottom: var(--font-size);
  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-top: var(--font-size);
  padding: var(--button-padding-top-and-bottom) var(--button-padding-left-and-right);
}

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

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

@media (min-width: 48rem) {

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

  .contact-button {
    width: 8rem;
  }

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

}


/* Desktop */
@media (min-width: 100rem) {

  body {
    display: flex;
    flex-flow: row nowrap;

    justify-content: center;
  }

  #a {
    padding-bottom: var(--padding);
    padding-right: calc(var(--padding) / 2);
    height: calc(100vh - (2 * var(--padding)));
    width: calc(35vw - var(--padding));

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

  #b {
    padding-left: calc(var(--padding) / 2);
    height: calc(100vh - (var(--padding)));
    width: calc(65vw - var(--padding));

    overflow-y: scroll;
  }

}