/* src/static/global.styles.css */

/**************************************************
* ELEMENTS
**************************************************/

:root {
  --my-even-spacing: 3rem;

  --my-color: 3%;

  --my-color-nav:       hsl(213.5, 50%, calc(var(--my-color)* 1));
  --my-color-nav-hover: hsl(213.5, 50%, calc(var(--my-color)* 3));

  --my-color-hero:      hsl(213.5, 50%, calc(var(--my-color)* 3));
  
  --my-color-main:      hsl(213.5, 50%, calc(var(--my-color)* 4));
  --my-color-cards:     hsl(213.5, 50%, calc(var(--my-color)* 5));
  --my-color-border:    hsl(213.5, 50%, calc(var(--my-color)* 7));
  --my-color-input:     hsl(213.5, 50%, calc(var(--my-color)* 7));
  --my-color-focus:     hsl(213.5, 50%, calc(var(--my-color)* 10));

  --my-color-btn:       hsl(213.5, 75%, 30%);
  
  --my-color-footer:    hsl(213.5, 50%, calc(var(--my-color)* 2));
}
      
section {
  padding: calc(var(--my-even-spacing) * 2) var(--my-even-spacing);
}

a {
  text-decoration: none;
}

/**************************************************
* MY CLASSES
**************************************************/

.my-nav-btn {
  background-color: var(--my-color-nav);
  border-color:     var(--my-color-nav);
}

.my-icon-parent {
  display: inline-flex;
  align-items:center;
}

.my-highlight {
  font-weight: bold;
}

.my-line-height {
  line-height: 2.325rem;
}

.my-section-header {
  text-align: center;
}

.my-card {
  border: 2px solid var(--my-color-border);
  contain: layout paint;
}

.my-btn {
  background-color: var(--my-color-btn);
  border-color:     var(--my-color-btn);
}

.my-contact-form-label {
  padding-bottom: 0.5rem;
}

.my-contact-form-input {
  margin-bottom: 2rem;
  width: 100%;
  padding: 0.5rem;

  background-color: var(--my-color-input);
  border: 2px solid var(--my-color-border);
}

.my-contact-form-input:focus {
  background-color: var(--my-color-focus);
}

.my-error-msg {
  margin-left: 1rem;
  color: hsl(0, 100%, 50%);
}

#my-footer-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.my-contact-link {
  width: 14rem;
}

/**************************************************
* OTHER CLASSES
**************************************************/

.card {padding: 0}

/**************************************************
* SHARED
**************************************************/

nav,
.offcanvas {
  background-color: var(--my-color-nav);
}

.card-header,
.card-body,
.card-footer,
.my-contact-card,
footer {
  padding: 1rem;
}

.my-card,
.card-header,
.card-footer {
  background-color: var(--my-color-cards);
}

.my-card,
#my-more-projects-btn {
  margin-top: var(--my-even-spacing);
}

.my-card,
.my-contact-form-input,
.my-img-border-radius {
  border-radius: 0.5rem;
}

#hero,
#projects,
#contact {
  background-color: var(--my-color-hero);
  box-shadow:
    25vw 0 var(--my-color-hero),
    50vw 0 var(--my-color-hero),
    -25vw 0 var(--my-color-hero),
    -50vw 0 var(--my-color-hero);
}

/**************************************************
* EVENTS
**************************************************/

.my-nav-btn:hover {
  background-color: var(--my-color-nav-hover);
  border-color:     var(--my-color-nav-hover);
}

/**************************************************
* MEDIA QUERIES
**************************************************/

/* Extra small */
@media (max-width: 576px) {}

/* Small */
@media (min-width: 576px) {
  .my-skill-card                {width: calc(50% - (var(--my-even-spacing) / 2))}
  .my-skill-card:nth-child(odd) {margin-right: var(--my-even-spacing)}
}

/* Medium */
@media (min-width: 768px) {
  #my-footer-container {
    flex-flow: row wrap;
    justify-content: space-evenly;
  }

  .my-contact-link {
    width: auto;
    margin: 0 1.625rem;
  }
}

/* Large */
@media (min-width: 992px) {
  .my-skill-card                   {width: calc(33.3% - ((2 * var(--my-even-spacing)) / 3))}
  .my-skill-card:nth-child(odd)    {margin-right: 0}
  .my-skill-card:nth-child(3n),
  .my-skill-card:nth-child(3n - 1) {margin-left: var(--my-even-spacing)}

  /* When there are 2n projects */
  .my-project-card                {width: calc(50% - (var(--my-even-spacing) / 2))}
  .my-project-card:nth-child(odd) {margin-right: var(--my-even-spacing)}

  .my-card{max-width: 50rem}

  .my-contact-link {margin: 0 4rem}
}

/* Extra large */
@media (min-width: 1200px) {.my-contact-link {margin: 0 6rem}}

/* Extra extra large */
@media (min-width: 1400px) {
  section {
    padding-left: 0;
    padding-right: 0
  }

  /* When there are 3n projects */
  /* .my-project-card                   {width: calc(33.3% - ((2 * var(--my-even-spacing)) / 3))}
  .my-project-card:nth-child(odd)    {margin-right: 0}
  .my-project-card:nth-child(3n - 1) {margin-left: var(--my-even-spacing); margin-right: var(--my-even-spacing);} */


  .my-contact-link {margin: 0 2rem}
}