/* SETUP */

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

:root {
          --ligh-theme: white;
          --light-color: black;
          --light-grey: rgb(224, 223, 223);
          --grey: rgb(169, 162, 162);
}

* {
          margin: 0;
          box-sizing: border-box;
          font-family: 'Oswald', sans-serif;
          letter-spacing: 1px;
}

body {
          background-color: var(--ligh-theme);
}

/* HEADER */

header {
          background-color: var(--light-color);
          padding: 80px;
          height: max-content;
          color: var(--ligh-theme);
          display: flex;
          justify-content: space-around;
}

header p {
          max-width: 300px;
          font-size: large;
          letter-spacing: 2px;
          margin: 30px 0;
}

header h1 {
          font-size: 50px;
}

header h3 {
          font-size: x-large;
}

header div {
          width: 55%;
}

header div img {
          width: 100%;
}

.btn-cv {
          color: white;
          cursor: pointer;
          border: none;
          padding: 15px;
          width: 25%;
          background-color: blue;
          border-radius: 10px;
          font-size: large;
          transition: all 0.3s ease;
}

.btn-cv:hover {
          opacity: 0.8;
}

.btn-cv a {
          text-decoration: none;
}

/* CONTENT */

main {
          padding: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
}

.skills {
          margin: 50px;
          text-align: center;
}

.skills button {
          margin-top: 20px;
}

.skills button a {
          text-decoration: none;
          color: var(--light-color);
}

.skills h3 {
          margin-bottom: 10px;
          text-align: center;
          font-size: x-large;
}

.skills-img {
          justify-content: center;
}

.skills-img img {
          transition: transform 0.2s ease-in-out;
}

.skills-img img:hover {
          transform: scale(1.05);
}

.projects,
.experience {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 50px;
}

.projects h3 {
          text-align: center;
          font-size: x-large;
}

.projects-cases {
          display: flex;
          justify-content: flex-start;
          overflow: hidden;
          transition: transform 0.3s ease-in-out;
          max-width: 1180px;
}

.projects-cases div {
          margin: 10px;
          transition: transform 0.2s ease-in-out;
          max-width: 370px;
}

.projects-cases div:hover {
          transform: scale(1.05);
}

.projects-cases.scrollable {
          overflow: hidden;
}

.projects-cases.scrollable:focus {
          outline: none;
          overflow: auto;
}

.image-container {
          position: relative;
          display: inline-block;
}

.overlay-box {
          position: absolute;
          top: -12px;
          right: 0;
          width: 340px;
          height: 200px;
          display: flex;
          align-items: center;
          cursor: pointer;
}

.video-player {
          width: 350px;
          display: none;
}

.insight {
          height: 200px;
          width: 350px;
}

.arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 40px;
          height: 40px;
          background-color: var(--light-color);
          border-radius: 20px;
          color: var(--ligh-theme);
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: scale 0.2s ease-in-out;
}

.arrow:hover {
          scale: 1.2;
          opacity: 0.8;
}

.arrow-left {
          left: -50px;
          top: 200px;
}

.arrow-right {
          right: -50px;
          top: 200px;
}

.info-cards span {
          margin-right: 5px;
          background-color: var(--light-grey);
          color: var(--grey);
          border-radius: 3px;
          padding: 3px 4px;
          font-size: small;
}

.git-link {
          margin-top: 5px;
          margin-bottom: 5px;
          text-decoration: none;
}

/* TIMELINE */
.timeline-area {
          margin: 20px auto;
          width: 700px;
          border-left: 2px solid #ccc;
          padding: 0 20px 0 30px;
}

.timeline-area div {
          background-color: #fff;
          padding: 10px 25px;
          font-size: 16px;
          border: 1px solid #ccc;
          line-height: 1.7;
          position: relative;
          height: 110px;
          margin-bottom: 20px;
}

.timeline-area div:before {
          content: ' ';
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #000;
          border: 3px solid #ddd;
          position: absolute;
          top: 10px;
          left: -40px;
}

.timeline-area div:after {
          content: ' ';
          width: 0;
          height: 0;
          border-style: solid;
          border-color: transparent #ddd transparent transparent;
          border-width: 8px;
          position: absolute;
          left: -17px;
          top: 10px;
}

.timeline-area div h2 {
          text-transform: uppercase;
}

.timeline-area div h3,
.timeline-area div h4,
.timeline-area div h5 {
          margin: 0;
}

/* FOOTER*/

footer {
          background-color: var(--light-color);
          height: max-content;
          padding-bottom: 60px;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: var(--ligh-theme);
          margin-top: 100px;
}

footer p {
          margin-top: 10px;
}

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

.links::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: var(--ligh-theme);
}

.links a,
.links p {
          padding: 10px;
          margin-bottom: 35px;
          margin-top: 20px;
}

header a,
footer a {
          color: var(--ligh-theme);
}


/* HELP*/

#modal {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          margin: auto auto;
          background-color: rgba(52, 52, 56, 0.808);
          height: 230vh;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: 0.3s;
          text-align: center;
}

#modal:target {
          /* S'active quand la modal est ciblée */
          visibility: visible;
          opacity: 1;
}

/* modal:first-child */
.modal_content {
          background-color: var(--ligh-theme);
          padding: 1.5em 2em;
          width: 500px;
          max-width: 90%;
          border-radius: 4px;
          position: relative;
          color: var(--light-color);
}

#modal a {
          position: absolute;
          right: 15px;
          top: 15px;
          text-decoration: none;
          color: red;
          font-size: larger;
}

#modal h3 {
          padding: 15px;
          width: 100%;
          text-decoration: underline;
}