/*-------------------------------------------------------------------------------------------------------------*/

/* IMPORTS */

@import url("css/top.css");
@import url("css/footer.css");

/*-------------------------------------------------------------------------------------------------------------*/

:root {
  /* Color palette */
  --color-background: #004643;
  --color-headline: #fffffe;
  --color-paragraph: #abd1c6;
  --color-button: #f9bc60;
  --color-button-text: #001e1d;
  --color-illustration-stroke: #001e1d;
  --color-main: #e8e4e6;
  --color-highlight: #f9bc60;
  --color-secondary: #abd1c6;
  --color-tertiary: #e16162;
}

/*-------------------------------------------------------------------------------------------------------------*/

/* RESET + STRUCTURE DE BASE */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: var(--color-background);
    height: 100%;
}
  
body {
    display: flex;
    flex-direction: column;
}
  
main {
    flex: 1;
    background-color: var(--color-main);
}

/*-------------------------------------------------------------------------------------------------------------*/

/* TYPOGRAPHIE + LIENS */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-headline);
}

section h1,
article h1,
nav h1,
aside h1 {
  font-size: medium;
}

p {
    color: var(--color-paragraph);
}

a {
    text-decoration: none;
    color: var(--color-illustration-stroke);
}

/*-------------------------------------------------------------------------------------------------------------*/

/* LAYOUT UTILITAIRE */

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

.btn, .btn-small {
    background-color: var(--color-button);
    color: var(--color-button-text);
    padding: 10px;
    border-radius: 0.5rem;
    text-align: center;
    display: inline-block;
}

.btn-small {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

article + article {
    margin-top: 4rem;
    padding-top: 2rem;
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    padding-top: 15px;
}

/* Highlight utility */
.highlight {
    background-color: var(--color-highlight);
    color: var(--color-button-text);
}

/* Secondary / Tertiary utilities */
.secondary {
    background-color: var(--color-secondary);
    color: var(--color-background);
}

.tertiary {
    background-color: var(--color-tertiary);
    color: var(--color-background);
}

/*-------------------------------------------------------------------------------------------------------------*/

/* Carousel */

.carousel {
    position: relative;
    overflow: hidden;
    width: 50vw;
    max-width: 900px;
    margin: 0 auto;
    height: max-content;
    background-color: var(--color-main);
}

.carousel-btn {
  position: absolute;
  transform: translateY(-50%);
  background: var(--color-illustration-stroke);
  color: var(--color-headline);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 1;
  font-size: 1.5rem;
  border-radius: 0.25rem;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

@media screen and (max-width: 900px) {
  .carousel-btn {
      padding: 0.5rem 0.5rem;
      top: 9%;
  }
}

ol li {
    list-style: none;
}

/*-------------------------------------------------------------------------------------------------------------*/

/* ICONES / ILLUSTRATIONS */

.icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    stroke: var(--color-illustration-stroke);
}