style.css

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*---------------*\
|    LANGUAGES    |
\*---------------*/
[lang="en"] {
  display: none;
}


/*---------------*\
|     COLORS      |
\*---------------*/
:root {
  --main-color: #1c5c9d;
  --secondary-color: #b98f07;
  --navbar-color: #f0f1f4;
  --background-color: #fff;
  --tile-color: #fff;
}

/*:root {*/
/*  --main-color: #406646;*/
/*  --secondary-color: rgba(176, 33, 33, 0.78);*/
/*  --navbar-color: #e2e5d9;*/
/*  --background-color: #eeeeee;*/
/*  --tile-color: #f4e285;*/
/*}*/


/*----------------*\
|    DISCLAIMER    |
\*----------------*/
.disclaimer {
  color: var(--secondary-color);
  text-align: center;
  border-top: 2px solid var(--main-color);
  padding: .5em 0;
  margin: 0;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #ffd9d9;
  width: 100%;
  z-index: 1000;
}


/*--------------*\
|      BODY      |
\*--------------*/
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #333;
  /* change background opactiy */
  /*background: rgba(255, 255, 255, 0.2) url("/images/hip-square.png");*/
  background: var(--background-color);
  max-width: 1400px;
  min-width: 300px;
  margin: auto;
  padding: 3em 1em 5em;
}


/*----------------*\
|       TILE       |
\*----------------*/
.tile {
  background: var(--tile-color);
  padding: 1em;
  box-shadow: 0 0 2px #aaa;
  margin: 1em 0;
  border-radius: 2px;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .tile {
    box-shadow: 0 0 4px #aaa;
  }
}


/*----------------*\
|      HEADER      |
\*----------------*/
header h1, header h2 {
  text-align: center;
}

header .tile {
  margin: 0;
  position: relative;
}

header .tile .photo {
  float: left;
  height: 125px;
  margin-right: .5em;
  border: 1px solid #ccc;
  border-radius: 2px;
}

header h1 {
  font-size: 2.5em;
  text-transform: none;
  margin: .1em auto .3em;
}

header h2 {
  font-size: 1.5em;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin-top: 0;
}


/*----------------*\
|      FOOTER      |
\*----------------*/
footer a:link, footer a:visited {
  color: var(--main-color);
}

footer a:hover {
  color: var(--secondary-color);
}


/*----------------*\
|      NAVBAR      |
\*----------------*/
.tile.navbar {
  padding: 0;
  background: var(--navbar-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  column-gap: 0;
  align-items: center;
}

nav a:link {
  padding: 1em .7em;
  flex-grow: 5;
  margin: 0;
  border: 1px solid #eee;
  color: var(--main-color);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-style: normal;
  transition: background 0.2s ease-in-out;
}

nav a:hover {
  color: var(--secondary-color);
  background: #e9e9e9;
  transition: background 0.1s ease-in-out;
}

/*----------------*\
|      GLOBAL      |
\*----------------*/
h1 {
  font-size: 1.8em;
  text-align: center;
  text-transform: uppercase;
  color: var(--main-color);
  margin-top: 0;
}

p, li {
  text-align: justify;
}

a:link, a:visited {
  color: var(--secondary-color);
  text-decoration: none;
  font-style: italic;
}

a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
  cursor: pointer;
}

strong {
  color: var(--secondary-color);
  font-weight: bold;
}

em {
  font-style: normal;
  font-weight: bold;
}


/*-----------------*\
|   SIBLING TILES   |
\*-----------------*/
@media screen and (min-width: 1000px) {
  .sibling-tiles {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    column-gap: 1em;
  }

  .sibling-tiles .tile {
    flex: 1 1 45%;
    margin: 0;
  }
}


/*------------*\
|    RESUME    |
\*------------*/

/* Global left border */
/* Line */
.resume-item {
  padding: 0 0 10px 20px;
  border-left: 2px solid var(--main-color);
  position: relative;
  margin-left: 10px;
}

/* Bullets */
.resume-item::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 1.4em;
  border-radius: 10px;
  left: -6px;
  top: 0;
  background: var(--background-color);
  border: 2px solid var(--main-color);
}

/* Final bullet */
.resume-item:last-child::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: -4px;
  bottom: 0;
  background: var(--main-color);
}

/* Experience title */
.resume-item h2 {
  color: var(--main-color);
  font-size: 1.2em;
  display: inline-block;
  margin: 0 0 .1em;
}

/* Experience date */
.resume-item h3 {
  font-weight: normal;
  /*font-style: italic;*/
  font-size: 1.1em;
  color: var(--main-color);
  margin: 0 0 .1em;
}

/* Experience place */
.resume-item h4 {
  font-weight: bold;
  color: var(--secondary-color);
  font-style: italic;
  text-transform: uppercase;
  font-size: 1em;
  margin: 0 0 .1em;
}

/* Experience description */
.resume-item-description {
  margin-top: -.9em;
  /*border-left: 2px dotted var(--secondary-color);*/
  /*padding-left: .5em;*/
}

/* Experience list */
.resume-item ul {
  list-style: circle;
  overflow: hidden;
}

.resume-item p + ul {
  transform: translateY(-.8em);
  margin-bottom: 0;
}

/* See more section that appear when clicked */
.resume-item .see-more {
  display: none;
}

.resume-item-description .see-more-button {
  display: block;
  margin: -.5em 0 1em auto;
  color: var(--main-color);
  font-weight: bold;
  font-size: 1em;
  border: none;
  background-color: transparent;
  text-decoration: underline;
}

.resume-item-description .see-more-button:hover {
  color: var(--secondary-color);
  cursor: pointer;
}

.resume-item-description .see-more-button:focus {
  outline: none;
}


/*-----------*\
|    TOOLS    |
\*-----------*/
.tool-item {
  max-width: 170px;
  margin: -2em 1em 1em;
}

.tool-item h2 {
  font-size: 1.5em;
  color: var(--main-color);
  text-align: center;
  /*margin-bottom: 0;*/
}

.tools-list p {
  text-align: center;
  margin: 0;
}

.logo-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  column-gap: .5em;
  row-gap: 1em;
}

.logo-list img {
  display: block;
  height: 2.6em;
  text-align: center;
  margin: 0 auto;
}


/*----------------*\
|   SMALL TILES    |
\*----------------*/
.small-tiles {
  display: flex;
  height: 88%;
  flex-flow: row wrap;
  justify-content: space-evenly;
  /*height: 100%;*/
  align-content: stretch;
  column-gap: 1em;
  row-gap: 1em;
  padding: .5em;
}

.small-tile {
  flex: 1 1 auto;
  min-width: 300px;
  box-shadow: 0 0 .1em gray;
  position: relative;
  height: 100%;
  z-index: 0;
}

.small-tile h2 {
  position: relative;
  font-size: 1.4em;
  color: var(--main-color);
  background: linear-gradient(to bottom, var(--background-color) 0%, var(--background-color) 50%, rgb(0,0,0,0) 100%);
  text-align: center;
  margin-top: 0;
  z-index: -1;
  padding-top: .1em;
  padding-bottom: 2em;
  margin-bottom: -2em;
}

.small-tile img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /*object-position: center;*/
  z-index: -1;
  opacity: 1;
  transition: opacity .5s;
}

.small-tile:hover {
  box-shadow: 0 0 5px gray;
  transition: box-shadow .1s;
}

.small-tile:hover img {
  opacity: .1;
}

.small-tile .small-tile-description {
  display: flex;
  flex-flow: column;
  justify-content: center;
  row-gap: 1em;
  height: 83%;
  opacity: 0;
  transition: opacity .5s;
  margin: .1em .6em 2em;
  z-index: 5;
}

.small-tile:hover .small-tile-description {
  transition: opacity .5s;
  opacity: 1;
  z-index: 2;
}

.small-tile-description p {
  margin: 0;
  text-align: center;
  z-index: 2;
}


/*--------------*\
|    LANGUAGE    |
\*--------------*/
.sibling-tiles .tile.languages {
  flex: 1 5 10%;
}

.columns {
  /*margin-top: 2em;*/
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  column-gap: 4em;
  row-gap: 1.5em;
  align-items: baseline;
}

.language-item {
  min-width: 110px
}

.language-item h2, .language-item p {
  text-align: center;
}

/* Language name */
.language-item h2 {
  font-size: 1.5em;
  color: var(--main-color);
  margin-bottom: -.5em;
}

.language-item p {
  font-size: 1.1em;
  color: var(--secondary-color);
}

.language-item .certificate {
  font-style: italic;
  font-size: .8em;
}

.language-item img {
  object-fit: cover;
  display: block;
  width: 60px;
  height: 60px;
  border: 2px solid black;
  border-radius: 100%;
  text-align: center;
  margin: 0 auto;
}


/*---------------*\
|     HOBBIES     |
\*---------------*/
.tile.hobbies {
  flex: 2 1 40%;
}

.hobbies .small-tile {
  flex-basis: 45%;
  height: auto;
}


/*-----------*\
|   CONTACT   |
\*-----------*/
.contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: .6em;
}

.contact-item a {
  display: flex;
  align-items: center;
  font-size: 1.2em;
}

.contact-item a img {
  width: 20px;
  height: 20px;
  margin-right: .5em;
}