@property --peach {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffbd59;
}
@property --light-peach {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffc164;
}
@property --orange {
  syntax: "<color>";
  inherits: false;
  initial-value: #ff914d;
}
@property --light-orange {
  syntax: "<color>";
  inherits: false;
  initial-value: #ff9858;
}
@property --yellow {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffde59;
}
@property --light-yellow {
  syntax: "<color>";
  inherits: false;
  initial-value: #fcde66;
}
@property --blue {
  syntax: "<color>";
  inherits: false;
  initial-value: #4dbbff;
}
@property --light-blue {
  syntax: "<color>";
  inherits: false;
  initial-value: #57beff;
}
@property --light-white-area {
  syntax: "<color>";
  inherits: false;
  initial-value: #fff3c4;;
}

@font-face {
  font-family: Now;
  src: url("./assets/fonts/now.regular.otf") format("opentype");
}

body {
  height: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "photo-container profile profile"
    "character workexperience skills"
    "education other languages";
}

p,
b,
li,
b {
  font-family: "Lato";
}
h1,
h2,
h3 {
  font-family: "Now";
  font-weight: 600;
}

.photo-container {
  grid-area: photo-container;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.5rem;
  background-color: var(--peach);
  color: var(--blue);
  font-weight: bolder;
}

.photo-container:hover{
  background-color: var(--light-peach);
}

.photo-container img {
  border-radius: 50%;
  width: 20rem;
  height: 20rem;
  box-shadow: 0 0 1rem 1rem var(--blue);
  transition: 0.4s ease-in;
  cursor: pointer;
}

.photo-container img:hover {
  box-shadow: 0 0 1rem 1rem var(--yellow);
}

.photo-container ul {
  margin: 3rem 0 0 0;
  list-style: none;
  font-size: 1.25rem;
}

.photo-container ul li {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
}

.photo-container ul li i {
  font-size: xx-large;
  padding-right: 1rem;
}

.photo-container ul li a {
  color: #4dbbff;
}

.profile {
  grid-area: profile;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
}

.profile h1{
   text-align: center;
   color: var(--orange);
}

.profile:hover{
  background-color: var(--light-white-area);
}

.profile .text-animation::before {
  content: "Ingenieur ICT";
  color: var(--blue);
  animation: words 15s infinite;
}

@keyframes words {
  0%,
  25% {
    content: "Ingenieur ICT";
  }
  26%,
  50% {
    content: "Product owner";
  }
  51%,
  75% {
    content: "Senior ontwikkelaar";
  }
  76%,
  100% {
    content: "Teamspeler";
  }
}

.profile p {
  width: 80%;
}

.character {
  grid-area: character;
  background-color: var(--blue);
  padding: 2rem;
}

.character:hover{
  background-color: var(--light-blue);
}

.character h2,
.other h2 {
  color: var(--peach);
  border-bottom: 2px solid var(--peach);
}

.workexperience {
  grid-area: workexperience;
  background-color: var(--yellow);
  padding: 2rem;
}

.workexperience:hover{
  background-color: var(--light-yellow);
}

.workexperience b{
  color: var(--orange);
}

.skills {
  grid-area: skills;
  background-color: var(--orange);
  padding: 2rem;
}

.skills:hover{
  background-color: var(--light-orange);
}

.education {
  grid-area: education;
  background-color: white;
  padding: 2rem;
}

.education:hover{
  background-color: var(--light-white-area);
}

.education b{
  color: var(--orange);
}

.workexperience h2,
.education h2,
.languages-certificates h2,
.skills h2 {
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
}

.other {
  grid-area: other;
  background-color: var(--blue);
  padding: 2rem;
}

.other:hover{
  background-color: var(--light-blue);
}

.languages-certificates {
  grid-area: languages;
  background-color: var(--peach);
  padding: 2rem;
}

.languages-certificates:hover{
  background-color: var(--light-peach);
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "photo-container"
      "profile"
      "workexperience"
      "skills"
      "education"
      "character"
      "languages"
      "other";
  }
}


@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1200px) {
  body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "photo-container profile"
      "workexperience skills"
      "character education"
      "other languages";
  }
}