style2.css

@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
  font-family: Helvetica, sans-serif;
}

/* Set a background color */
header {
  background-color: #6CC0B8;
  font-size: 1.5em;
  padding: 2em;
  color: aliceblue;
  text-align: center;
}

div.educationAndExperience {
  background-color: #2D3135;
  padding: 2em;
  color: white;
}

div.portfolio {
  background-color: white;
  padding: 2em;
  color: #232629;
}

div.skillsSection {
  background-color: #2D3135;
  padding: 2em;
  color: white;
}

h1 {

  text-align: center;
}

h2 {
  font-family: Helvetica, sans-serif;
  font-size: 1.5em;
}


.responsive {
  width: 90%;
  height: auto;
}

.graduate {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 20%;
  height: auto;
}

p.location {
  font-style: italic;
}

p.degree {
  font-weight: 600;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 0.5em;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -0.25em;
}

/* Container around content */
.container {
  padding: 0.5em 2em;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.clearLeft {
  clear: left;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  right: -1.05em;
  background-color: white;
  border: 0.35em solid #29ACA0;
  top: 2em;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.experience {
  left: 0;
}

/* Place the container to the right */
.education {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.experience::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 2.5em;
  width: 0;
  z-index: 1;
  right: 1.5em;
  border: medium solid white;
  border-width: 0.6em 0 0.6em 0.6em;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.education::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 2.5em;
  width: 0;
  z-index: 0;
  left: 1.5em;
  border: medium solid white;
  border-width: 0.6em 0.6em 0.6em 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.education::after {
  left: -1.05em;
  border: 0.35em solid #22D036;
}

/* The actual content */
.content {
  padding: 1em 2em;
  background-color: white;
  position: relative;
  border-radius: 1em;
  color: black;
}


.portfolio section {
  width: 25%;

  float: left;
  text-align: center;

}

.portfolioElement {
  width: 80%;
  padding-top: 80%;
  margin: 0 auto;
  background: #6CC0B8;
}

.portfolio img {
  width: 80%;
  display: block;
  margin: 0 auto;
}

.clearLeft {
  clear: left;
}

.proficiencyLevel {
  width: 80%;
  /* Full width */
  height: 1.5em;
  background-color: #ddd;
  /* Grey background */
  border-radius: 1em;
  margin: 1em;

}

.programming {
  grid-area: programming;
}

.design {
  right: 1em;
  grid-area: design;
}

.skillGrid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "programming design";
}

.skills {
  text-align: left;
  /* Right-align text */
  padding-left: 1em;
  /* Add some right padding */
  line-height: 1.5em;
  /* Set the line-height to center the text inside the skill bar, and to expand the height of the container */
  color: white;
  /* White text color */
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}


.html {
  width: 90%;
  background-color: #4CAF50;
}

/* Green */
.css {
  width: 80%;
  background-color: #2196F3;
}

/* Blue */
.js {
  width: 65%;
  background-color: #f44336;
}

/* Red */
.php {
  width: 60%;
  background-color: #E99C1E;
}

/* Dark Grey */


/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {}

@media screen and (max-width: 600px) {

  /* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

  /* Full-width containers */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .experience::after,
  .education::after {
    left: 0.8em;
  }

  /* Make all right containers behave like the left ones */
  .education {
    left: 0%;
  }

  .portfolio section {
    width: 100%;
    float: none;
  }

  .portfolioElement {
    width: 60%;
    padding-top: 60%;
  }
}