/* CORE */

body {
  display: block;
  margin: 0px;
  padding-left: 15%;
  padding-right: 15%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
}

p {
  margin-bottom: 0;
  margin-block-end: 0;
}

section {
  position: relative;
  margin-block-end: 1.5em;
}

table,
td {
  text-align: left;
  vertical-align: top;
}

h1 {
  text-transform: uppercase;
  padding-top: 20px;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0;
}

h1 {
  font-size: 1.3rem;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1.1rem;
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

article {
  margin-bottom: 2%;
}

ul {
  padding-inline-start: 18px;
  padding-bottom: 0;
  margin-bottom: 0;
}

table {
  border-spacing: 10px 10px;
}

.photo {
  grid-area: photo;
  margin: 10px;
  text-align: center;
  max-height: 270px;
  align-self: center;
}

.title {
  grid-area: title;
  margin-bottom: 0;
}

.summary {
  grid-area: summary;
}

.skills {
  grid-area: skills;
}

.assets {
  grid-area: assets;
}

.interests {
  grid-area: interests;
}

.main {
  grid-area: main;
}

.title,
.main {
  padding-left: 2%;
  position: relative;
}

.background-red {
  background-color: #ff0000;
}

.text-red {
  color: #ff0000;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "photo  title title title title title title"
    "summary  main main main main main main"
    "skills  main main main main main main"
    "assets  main main main main main main"
    "interests  main main main main main main";
  color: white;
  width: 100%;
}

.photo,
.summary,
.skills,
.assets,
.interests {
  padding: 0 10%;
  position: relative;
}

.title,
.main {
  background-color: white;
  color: black;
}

.line-black {
  border-top: 2px solid black;
  position: absolute;
  width: 80%;
  top: 0;
}

.line-red {
  border-top: 2px solid #ff0000;
  position: absolute;
  width: 105%;
  top: 0;
  left: -5%;
}

.firstname {
  font-size: 2.5rem;
}

.lastname {
  font-size: 2.5rem;
}

.profile-image {
  max-width: 180px;
  height: auto;
  width: 100%;
}

.main h1 {
  margin-bottom: 0;
  margin-bottom: 30px;
}

.main h2 {
  margin-bottom: 0;
}

.experiences article {
  margin-bottom: 30px;
}

.other-formations article {
  clear: both;
}

.formation-title {
  float: left;
}

.formation-date {
  float: right;
}

.head {
  font-weight: bold;
}

@media only screen and (max-width: 1280px) {
  body {
    display: block;
    margin: 0px;
    padding-left: 0;
    padding-right: 0;
  }

  .grid-container {
    display: grid;
    grid-template-areas:
      "photo"
      "title"
      "summary"
      "main"
      "skills"
      "assets"
      "interests";
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
  }

  .main {
    padding-left: 0;
  }

  .line-black {
    border-top: 2px solid black;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  .line-red {
    border-top: 2px solid #ff0000;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  .title {
    padding-left: 35px;
    padding-right: 35px;
  }

  section {
    padding-left: 35px;
    padding-right: 35px;
  }

  .formation-title {
    float: left;
    max-width: 80%;
    margin-bottom: 5px;
  }

  .formation-date {
    float: right;
  }

  td {
    display: block;
    margin-bottom: 10px;
  }

  table {
    border-spacing: 0 10px;
  }

  .photo,
  .summary,
  .skills,
  .assets,
  .interests {
    padding: 0 35px;
    position: relative;
  }

  .title article:last-of-type,
  .other-formations article:last-of-type {
    margin-bottom: 20px;
  }
}

@media only print {
  body {
    display: block;
    margin: 0px;
    padding-left: 0;
    padding-right: 0;
    font-size: 10pt;
  }

  h1 {
    font-size: 1.2rem;
  }
  h2 {
    font-size: 1.1rem;
  }
  .grid-container {
    display: grid;
    /*grid-template-columns: 280px 100px 100px 100px 100px 100px;*/
    grid-template-areas:
      "photo title"
      "summary summary"
      "main main"
      "skills skills"
      "assets assets"
      "interests interests";
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
  }

  * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: white;
  }

  .background-red {
    background-color: white;
  }

  .line-black {
    border-top: 2px solid black;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  .line-red {
    border-top: 2px solid black;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  .text-red {
    color: black;
  }

  .pagebreak {
    page-break-before: always;
  } /* page-break-after works, as well */
}