@font-face {
    font-family: "Montserrat";
    src: url("Montserrat-Regular.ttf") format("truetype"),
    url("Montserrat-Bold.ttf") format("truetype");
  }

/******************************************************************************

    Project Name:           Portfolio
	Project Description:    
	File Name: 
	Author:                 Oldophe GASPARD
	Author URI: 
	Version:                1.0
    lastmodified:           31/12/2022 
	
******************************************************************************/

/** --- Table of content ---
*
*   01. Global / <html>, <body>, *, by group of selectors, by unit, ".background-animated"
*   02. Header / <header>, <nav>
*   03. Main / <main>, <section>
*   04. Footer / <footer>, <section>
*   05. Modal / ".modal"
*
*   --- END --- */

/***************************

            1. Global

***************************/

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

:root{
  --primary-color: hsl(52, 72%, 56%);
  --purple: hsl(265, 49%, 48%);
  --bordeaux: hsl(346, 60%, 38%);
  --yellow: hsl(52, 72%, 56%);
  --primary-background: hsl(265, 38%, 6%);

  --green: hsl(52, 72%, 56%);
  --purple-bordeaux: hsl(52, 72%, 56%);
  --purple-gradient: linear-gradient(hsl(265, 49%, 48%), hsl(265, 38%, 6%));
  --grey: hsl(52, 72%, 56%);
}

html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 16px;
  letter-spacing: 0.05rem;
  line-height: 1.5; 
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 500;
}

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--primary-background);
  //filter: blur(5px);
  color: hsl(0, 0%, 80%);
  overflow: hidden;
}


/*.background-animated {
   z-index: 1;
   //background-color: green;
   width: 100%;
   height: 100%;
   
}*/


a {
  text-decoration: none;
}


/***************************

            2. Header

***************************/

header {
  width: 100vw;
  height: 10vh;
  display: inline-flex;
  justify-content: space-around;
  align-items: center; // vertical centered
  flex-wrap: wrap;
}

/***************************

            3. Main

***************************/

main {
  width: 100vw;
  height: 85vh;
  padding: 0 3vw;
}

/*  3.1. Section carousel
__________________________*/

section.carousel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; // vertical centered
  justify-content: space-around; // horizontal centered
}

/*  3.1.1. Sous-section item
_____________________________*/

section.item {
  height: 75%;
  display: flex;
  flex-direction: column;
  align-items: center; // vertical centered;
}

.item-title {
  height: 5%;
  display: block;
  align-items: center; // vertical centered;

}

rect {
  fill: hsl(244, 75%, 15%);
}

/*  3.1.2. Sous-section navigation
___________________________________*/

section.navigation {
  height: 10%;
  display: flex;
  align-items: center; // vertical centered
  justify-content: space-between;
}

circle {
  stroke: var(--primary-color);
  fill= transparent;
  opacity: 0.5;
  stroke-width: 2;
  filter: drop-shadow(0 0 0.2rem var(--primary-color));
  transition: all 0.3s ease-out;

}

circle:hover,
circle:focus {
  fill: var(--primary-color);
  
  opacity: 1;
}

/*  3.1.3. Sous-section call-to-action
_______________________________________*/

section.call-to-action {
  
  height: 10%;
  display: flex;
  align-items: center; // vertical centered
  justify-content: space-baround;
  flex-wrap: wrap;
  text-transform: uppercase;
  
}

a.button {
  padding: 0.4rem 2rem;
  border: solid 1px var(--primary-color);
  border-radius: 1px;
  color: var(--primary-color);
  //filter: drop-shadow(0rem 0 0.2rem var(--primary-color));
  transition: all 0.4s ease-out;
}

a.button:hover,
a.button:focus {
  color: black;
  background-color: var(--primary-color);
  filter: drop-shadow(0rem 0 0.5rem var(--primary-color));
 
}


/***************************

            4. Footer

***************************/

footer {
  width: 100vw;
  height: 5vh;
}


footer, button {
  font-size: 0.80rem;
  font-weight: 400;
}


.row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


/***************************

            5. Modal

***************************/

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}


.modal:target {
  display: block;
}

.modal::backdrop {
  position: fixed;
  inset: 0px;
  background: rgba(0, 0, 0, 0.1);
}

.button:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}

/*  5.1. Section Listen
________________________*/



/*  5.2. Section Download
__________________________*/


/*  5.3. Section Share
_______________________*/
