

.title {
  grid-area: title;
  display: none;

}
.desktop-menu {
  grid-area: desktop-menu;
}
.mobile-menu {
  grid-area: mobile-menu;
}


.wrapper-time-summary {
  grid-area: wrapper-time-summary;
  text-align: justify;
}
  .timesum {
  grid-area: timesum;
  text-align: justify;
}
.timesumheader {
  grid-area: timesumheader;
  text-align: justify;
}

.wrapper-contact {
    grid-area: wrapper-contact;
}
.wrapper-intro {
    grid-area: wrapper-intro;
}
.introcard {
    grid-area: introcard;
}
.intro-pic {
  grid-area: intro-pic;
}
.intro-info {
  grid-area: intro-info;
  text-align: justify;
}

.aboutme {
  grid-area: aboutme;
}

.contactme {
  grid-area: contactme;
}


  .card-pic {
    grid-area: card-pic;
  }
  .card-info {
    grid-area: card-info;
    text-align: justify;
  }

.about {
  position: relative;
  top: -10px;
}


.interests {
  grid-area: interests;
}
  .intr-one {
    grid-area: intr-one;
  }
  .intr-two {
    grid-area: intr-two;
  }
  .intr-three {
    grid-area: intr-three;
  }
  .intr-four {
    grid-area: intr-four;
  }
  .intr-five {
    grid-area: intr-five;
  }
  .intr-six {
    grid-area: intr-six;
  }

.me {
    grid-area: me;
  }
.name{
  grid-area: name;
  padding-bottom: 5px;
  }
  .f-age {
    grid-area: time-age;
    display: grid;
  }
  .f-work {
    grid-area: time-work;
    display: grid;
  }
  .f-edu {
    grid-area: time-edu;
    text-align: justify;
    display: grid;
  }
  .about {
    grid-area: about;
    text-align: justify;
  }



.contact {
  grid-area: contact;

}
  .contact-title {
    grid-area: contact-title;
    align-self: center;
    justify-self: center;
  }
  .contact-pic {
    grid-area: contact-pic;
  }
  .contact-info {
    grid-area: contact-info;
    align-items: center;
/*  justify-items: center;
*/ }
  .contact-text {
    grid-area: contact-text;
  }
  .contact-text-age {
    grid-area: contact-text-age;

  }
  .contact-text-work {
    grid-area: contact-text-work;
  }
  .contact-text-studies {
    grid-area: contact-text-studies;
  }
  

  .social {
    grid-area: social;
  }
  .fb {
    grid-area: fb;
  }
  .insta {
    grid-area: insta;
  }
  .ld {
    grid-area: ld;
  }
  .tw {
    grid-area: tw;
  }
  .download {
    grid-area: download;
  }

.work-timeline {
  padding-top: 20px;
  grid-area: work-timeline;
}

.referenceicture {
  grid-area: referenceicture;

}
  .referenceicture {
  display: none;
}
.ref-slider {
  display: none;
}

.ref-slider {
  grid-column-start: referenceicture-start;
  grid-column-end: referenceicture-end;
  grid-row-start: referenceicture-start;
  grid-row-end: referenceicture-end;
}

.characteristics {
  grid-column-start: parrallaxpicturetwo-start;
  grid-column-end: parrallaxpicturetwo-end;
  grid-row-start: parrallaxpicturetwo-start;
  grid-row-end: parrallaxpicturetwo-end;
  display: none;
}

.education-timeline {
  grid-area: education-timeline;
}
.program {
  grid-area: program;
  text-align: left;
  align-content: stretch;
  font-size: 12;
}
  .courses {
    grid-area: courses;
  }

  .grades {
    grid-area: grades;
  }

.skills {
    grid-area: skills;
}
  .skills-header {
    grid-area: skills-header;
  }
  .areas{
    grid-area: areas;
  }
  .area-one {
    grid-area: area-one;
  }
  .area-two {
    grid-area: area-two;
  }
  .area-three {
    grid-area: area-three;
  }
  .area-four {
    grid-area: area-four;
  }
  .area-five {
    grid-area: area-five;
  }
  .area-six {
    grid-area: area-six;
  }
  .area-seven {
    grid-area: area-seven;
  }
  .area-eight {
    grid-area: area-eight;
  }
  .area-nine {
    grid-area: area-nine;
  }
  .area-ten {
    grid-area: area-ten;
  }

  .languages{
    grid-area: languages;
  }
  .lang-one {
    grid-area: lang-one;
  }
  .lang-two {
    grid-area: lang-two;
  }
  .lang-three {
    grid-area: lang-three;
  }
  .lang-four {
    grid-area: lang-four;
  }
  .lang-five {
    grid-area: lang-five;
  }
  .lang-six {
    grid-area: lang-six;
  }
  .lang-seven {
    grid-area: lang-seven;
  }
  .lang-eight {
    grid-area: lang-eight;
  }
  .lang-nine {
    grid-area: lang-nine;
  }
  .lang-ten {
    grid-area: lang-ten;
  }
  .lang-eleven {
    grid-area: lang-eleven;
  }
  .lang-twelve {
    grid-area: lang-twelve;
  }
  .lang-thirteen {
    grid-area: lang-thirteen;
  }



  .programs{
    grid-area: programs;
  }
  .prog-one {
    grid-area: prog-one;
  }
  .prog-two {
    grid-area: prog-two;
  }
  .prog-three {
    grid-area: prog-three;
  }
  .prog-four {
    grid-area: prog-four;
  }
  .prog-five {
    grid-area: prog-five;
  }
  .prog-six {
    grid-area: prog-six;
  }
  .prog-seven {
    grid-area: prog-seven;
  }
  .prog-eight {
    grid-area: prog-eight;
  }
  .prog-nine {
    grid-area: prog-nine;
  }
  .prog-ten {
    grid-area: prog-ten;
  }
  .prog-eleven {
    grid-area: prog-eleven;
  }

.projects {
    grid-area: projects;
  }
  .pro-head {
    grid-area: pro-head;
  }
  .text {
    grid-area: text;
  }
  .picture {
    grid-area: picture;
  }


    .pichead {
    grid-area: pichead;
  }
  .pictext {
    grid-area: pictext;
  }
  .picpic {
    grid-area: picpic;
  }

.space {
  grid-area: space;
}

.photoaccordian {
    grid-area: photoaccordian;
}

.parrallaxpicturetwo {
  grid-area: parrallaxpicturetwo;
  z-index: 1;
  display: none;
}



.freetimeprojects {
  grid-area: freetimeprojects;
}





/*
------------------
--    MOBILE    --
------------------
*/


.photoaccordian {
  display: grid;
  grid-row-gap: 10px;
  align-items: center;
  justify-items: center;

}

.wrapper-quote {
    grid-area: wrapper-quote;
}
.wrapper-charac {
    grid-area: wrapper-charac;
}
.goals-right {
    grid-area: goalsright;
}
.wrapper-parra-first {
    grid-area: wrapper-parra-first;
    display: none;
}
.wrapper-parra-second {
    grid-area: wrapper-parra-second;
    display: none;
}
.parra-one {
    grid-area: parra-one;
}
.container {
    grid-area: container;
}
.container-quote {
    grid-area: container-quote;
}

.charac-one {
    grid-area: charac-one;
    align-items: center;
  justify-items: center;
}
.charac-two {
    grid-area: charac-two;
    align-items: center;
  justify-items: center;
}
.charac-three {
    grid-area: charac-three;
    align-items: center;
  justify-items: center;
}

.charac-four {
  grid-area: charac-four;
  align-items: center;
  justify-items: center;
}

.charac-five {
  grid-area: charac-five;
  align-items: center;
  justify-items: center;
}



.timeline-events h2,
.timeline-events h3,
.timeline-events h4 {
  display: none;
}
.timeline-events-secondary h2,
.timeline-events-secondary  h3,
.timeline-events-secondary  h4 {
  display: none;
}

.timeline-events-primary-headline h3 {
  display: none;
}
.timeline-events-secondary-headline h3 {
  display: none;
}

.timeline-events-secondary {
  position: relative;
  top: 80px;
}
.timesum {
  position: relative;
  top: -100px;
}

.wrapper-quote {
  width: 100vw;
  display: grid;
  grid-row-gap: 10px;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "container-quote"
    ;
  }
.desktop-menu {
  display: grid;
}
.mobile-menu {
  display: grid;
}



.chart-work {
  display: grid;
}
.sum-work {
  display: grid;
}
.chart-education {
  display: grid;
}

.card-work {
  width: 100vw;
  display: grid;
  grid-row-gap: 10px;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "chart-work"
    "sum-work"
    ;
  }




.card-education {
  width: 100vw;
  display: grid;
  grid-row-gap: 10px;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "chart-education"
    "sum-education"
    ;
  }



.wrapper {
  text-align: center;
  width: 95vw;
  display: grid;
  grid-row-gap: 10px;
  z-index: 9;
  grid-template-areas:
    "title"
    "desktop-menu"
    "wrapper-intro"
    "interests"
    "wrapper-time-summary"
    "referenceicture"
    "work-timeline"
    "wrapper-parra-first"
    "education-timeline"
    "wrapper-parra-second"
    "skills"
    "wrapper-charac"
    "projects"
    "parrallaxpicturetwo"
    "wrapper-quote"
    "wrapper-contact"
    "space";
}



.wrapper-time-summary {
  width: 100vw;
  display: none;
  grid-row-gap: 10px;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "timesumheader"
    "timesum"
    ;
}



.wrapper-intro {
  width: 90vw;
  display: grid;
  grid-row-gap: 10px;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "aboutme"
    "introcard"
    ;
}

 .introcard {
    width: 100vw;
    align-items: center;
    justify-items: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro-pic" 
      "intro-info"
      "interests"
 }


.intro-info {
  width: 90%;
  display: grid;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "name name name"
    "time-age time-work time-edu" 
    "about about about";
}

.interests {
  width: 90%;
  display: grid;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "intr-one intr-two intr-three intr-four intr-five intr-six";
}





.skills{
  width: 90vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 20px;
  grid-template-areas:
      "skills-header"
      "areas"
      "wrapper-areas"
      "languages"
      "wrapper-languages"
      "programs"
      "wrapper-programs";
  }



.wrapper-areas {
  width: 100%;
  /*height: 30vh; */
  display: grid;
  grid-row-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
      "area-one area-two area-three"
      "area-four area-five area-six"
      "area-seven area-eight area-nine"
      "area-ten . .";
  }

  .wrapper-languages {
  width: 100%;
  /*height: 30vh; */
  display: grid;
  grid-row-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
      "lang-one lang-two lang-three"
      "lang-four lang-five lang-six"
      "lang-seven lang-eight lang-nine"
      "lang-ten lang-eleven lang-twelve"
      "lang-thirteen . .";
  }

  .wrapper-programs {
  width: 100%;
  /*height: 30vh; */
  display: grid;
  grid-row-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
      "prog-one prog-two prog-three"
      "prog-four prog-five prog-six"
      "prog-seven prog-eight prog-nine"
      "prog-ten prog-eleven ."
  }


/*
.wrapper-freetime {
  display: grid;
  grid-row-gap: 20px;
  grid-template-areas:
    "freeproject-four"
    "freeproject-one"
    "freeproject-two"
    "freeproject-three";
  }
*/

  .freetimeprojects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }


  .wrapper-worktime {
  display: grid;
  grid-row-gap: 20px;
  grid-template-areas:
    "workproject-one"
    "workproject-two"
    "workproject-three";
  }

.wrapper-projects-left {
  display: grid;
  grid-row-gap: 30px;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "pro-head"
    "text"
    "picture";
  }

  .wrapper-projects-right {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-row-gap: 30px;
  grid-template-areas:
    "pro-head"
    "text"
    "picture";
  }


  .program{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-row-gap: 20px;
  grid-template-areas:
      "courses grades";
  }


.contact {
  width: 100vw;
}
.projects {
  width: 100vw;
}
.languages {
  width: 100vw%;
}
.areas {
  width: 100vw%;
}
.programs {
  width: 100vw%;
}
/*
.education-timeline {
  width: 90vw;
}
.work-timeline {
  width: 90vw;
}
*/



.wrapper-contact {
  width: 90vw;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-row-gap: 10px;
  grid-template-areas:
    "contactme" 
    "contact";
}

.contact {
  width: 90vw;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-row-gap: 10px;
  grid-template-areas:
    "contact-pic" 
    "contact-info"
    "social"
    ;
}


.contact-info {
  width: 90%;
  display: grid;
  grid-row-gap: 10px;
  grid-template-columns: 1.5fr 2.5fr;
  grid-template-areas:
    "time-age contact-text-age" 
    "time-work contact-text-work"
    "time-edu contact-text-studies";
}

.social {
  width: 90%;
  display: grid;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  grid-template-areas:
    "fb insta ld tw";
}

  .skills {
  width: 100vw;
}
















/*
------------------
--    TABLET    --
------------------
*/


@media (min-width: 550px) {

  .card-work {
  width: 100vw;
  display: grid;
  grid-row-gap: 10px;
  align-items: center;
  justify-items: left;
  grid-template-areas:
    "chart-work sum-work"
    ;
  }




  .card-education {
    width: 100vw;
    display: grid;
    grid-row-gap: 10px;
    align-items: center;
    justify-items: left;
    grid-template-areas:
      "chart-education sum-education"
      ;
  }



  .parrallaxpicturetwo {
    grid-area: parrallaxpicturetwo;
    z-index: 1;
    display: inline;
  }

    .skills {
    width: 100vw;
  }

  .desktop-menu {
    display: inline;
  }
  .mobile-menu {
    display: none;
  }
  .f-age {
    grid-area: time-age;
    display: grid;
  }
  .f-work {
    grid-area: time-work;
    display: grid;
  }
  .f-edu {
    grid-area: time-edu;
    text-align: justify;
    display: grid;
  }

  

  .contact {
    padding: 0em;
  }

  .time-age-p { display: inline-block }
  .time-work-p { display: inline-block }
  .time-edu-p { display: inline-block }

  .wrapper {
    display: grid;
    grid-column-gap: 2em;
    width: 100vw;
    grid-row-gap: 20px;
    grid-template-columns: 10fr;
    grid-template-areas:
      "title"
      "desktop-menu"
      "wrapper-intro"
      "referenceicture"
      "work-timeline"
      "wrapper-parra-first"
      "education-timeline"
      "wrapper-parra-second"
      "skills"
      "wrapper-charac"
      "projects"
      "parrallaxpicturetwo"
      "wrapper-quote"
      "wrapper-contact"
      "space";
  }


  .wrapper-intro {
    width: 90vw;
    display: grid;
    grid-row-gap: 10px;
    align-items: center;
    justify-items: center;
    grid-template-areas:
    "aboutme"
    "introcard"
    ;
}

 .introcard {
    width: 100vw;
    align-items: center;
    justify-items: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro-pic" 
      "intro-info"
      "interests"
 }


  .wrapper-quote {
    width: 100vw;
    display: grid;
    grid-row-gap: 10px;
    align-items: center;
    justify-items: center;
    grid-template-areas:
      "container-quote"
      ;
  }

  .wrapper-charac {
    width: calc(100vw - 75px);
    display: grid;
    align-items: left;
    justify-items: left;
    grid-row-gap: 0px;
    grid-template-areas:
      "charac-one"
      "charac-two"
      "charac-three"
      "charac-four"
      "charac-five"
      ;
  }

  .wrapper-parra-first {
    display: grid;
    grid-row-gap: 0px;
    grid-template-areas:
      "parra-one"
      "parra-two"
      "parra-three"
      "parra-four"
      "parra-five"
      "parra-six"
      "parra-seven"
      "parra-eight"
      ;
  }
  
  .wrapper-parra-second {
  display: grid;
  grid-row-gap: 0px;
  grid-template-areas:
    "parra-five"
    "parra-six"
    "parra-seven"
    "parra-eight"
    ;
  }


  .pic-left {
    display: grid;
    width: calc(100vw - 75px);
    align-items: left;
    justify-items: left;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pichead pichead"
      "picpic pictext";
  }

  .pic-right {
    display: grid;
    width: calc(100vw - 75px);
    align-items: left;
    justify-items: left;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pichead pichead"
      "pictext picpic";
  }

  .referenceicture {
    display: grid;
  }
  .ref-slider {
    display: grid;
  }

    .skills {
    width: 100vw;
  }

  .wrapper-time-summary {
    display: none;
  }

  .wrapper-time-summary {
    position: relative;
  }

  .timeline-events h2,
  .timeline-events h3,
  .timeline-events h4 {
    display: none;
  }
  .timeline-events-secondary h2,
  .timeline-events-secondary  h3,
  .timeline-events-secondary  h4 {
    display: none;
  }
  .timeline-events-primary-headline h3 {
    display: none;
  }
  .timeline-events-secondary-headline h3 {
    display: none;
  }

  .timeline-events-secondary {
    position: relative;
    top: 80px;
  }
  .timesum {
    position: relative;
    top: -100px;
  }

  .intro-info {
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    grid-template-areas:
      "name name name"
      "time-age time-work time-edu" 
      "about about about";
  }

    .interests {
      grid-row-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      justify-items: center;
      grid-template-areas:
        "intr-one intr-two intr-three"
        "intr-four intr-five intr-six";
  }

/*
  .wrapper-freetime {
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-row-gap: 20px;
    grid-template-areas:
    "freeproject-four"
      "freeproject-one"
      "freeproject-two"
      "freeproject-three";
  }
  */

  .freetimeprojects {
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 3fr));
    gap: 1rem;
  }

  .wrapper-worktime {
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-row-gap: 20px;
    grid-template-areas:
      "workproject-one"
      "workproject-two"
      "workproject-three";
  }

  .wrapper-projects-left {
    width: 80vw;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-template-areas:
      "pro-head pro-head"
      "text picture";
  }
  .wrapper-projects-right {
    width: 80vw;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-template-areas:
      "pro-head pro-head"
      "picture text";
  }

  .characteristics{
    width: 100vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-template-areas:
      "character-left"
      "character-right";
  }
  
  .wrapper-contact {
    width: 90vw;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-row-gap: 10px;
    grid-template-areas:
      "contactme" 
      "contact";
    }

    .contact {
      width: 90vw;
      display: grid;
      align-items: center;
      justify-items: center;
      grid-row-gap: 10px;
      grid-template-areas:
        "contact-pic" 
        "contact-info"
        "social"
        ;
    }
       

  .contact-info {
    grid-row-gap: 10px;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "time-age contact-text-age" 
      "time-work contact-text-work"
      "time-edu contact-text-studies";
  }


}







/*
------------------
--    LAPTOP    --
------------------
*/

@media (min-width: 768px) {

  .wrapper {
    display: grid;
    grid-column-gap: 2em;
    width: 100vw;
    grid-row-gap: 20px;
    grid-template-columns: 10fr;
    grid-template-areas:
      "title"
      "desktop-menu"
      "wrapper-intro"
      "wrapper-time-summary"
      "referenceicture"
      "work-timeline"
      "wrapper-parra-first"
      "education-timeline"
      "wrapper-parra-second"
      "skills"
      "wrapper-charac"
      "projects"
      "parrallaxpicturetwo"
      "wrapper-quote"
      "wrapper-contact"
      "space";
  }


  .time-age-p { display: inline-block }
  .time-work-p { display: inline-block }
  .time-edu-p { display: inline-block }

 .contact {
    width: 90vw;
  }

  .wrapper-time-summary {
    display: grid;
  }



  .wrapper-intro {
    width: 90vw;
    display: grid;
    grid-row-gap: 10px;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-areas:
    "aboutme"
    "introcard"
    ;
}

 .introcard {
    width: 100vw;
    align-items: center;
    justify-items: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro-pic" 
      "intro-info"
      "interests"
 }





  .interests {
    width: 90vw;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    grid-template-areas:
      "intr-one intr-two intr-three intr-four intr-five intr-six";
  }

  .languages {
    width: 100%;
  }
  .areas {
    width: 100%;
  }
  .programs {
    width: 100%;
  }

  .wrapper-areas {
    width: 100%;
  }
    .wrapper-languages {
    width: 100%;

    }
    .wrapper-programs {
    width: 100%;
    }

  .wrapper-time-summary {
    width: 100vw;
    margin: 0 auto;
    display: grid;
    grid-row-gap: 20px;
    grid-template-areas:
    "timesumheader"
    "timesum"
    ;
  }

  .wrapper-time-summary {
    position: relative;
  }

    .timeline-events h2,
  .timeline-events h3,
  .timeline-events h4 {
    display: none;
  }
  .timeline-events-secondary h2,
  .timeline-events-secondary  h3,
  .timeline-events-secondary  h4 {
    display: none;
  }
  .timeline-events-primary-headline h3 {
    display: none;
  }
  .timeline-events-secondary-headline h3 {
    display: none;
  }
  .timeline-events-secondary {
    position: relative;
    top: 0px;
  }
  .timesum {
    position: relative;
    top: 0px;
  }



  .skills {
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 10px;
    grid-template-areas:
        "skills-header skills-header skills-header"
        "areas languages programs"
        "wrapper-areas wrapper-languages wrapper-programs";
  }

  .wrapper-areas {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
      "area-one area-two"
      "area-three area-four"
      "area-five area-six"
      "area-seven area-eight"
      "area-nine area-ten"
      "area-eleven .";
  }

  .wrapper-languages {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
      "lang-one lang-two" 
      "lang-three lang-four"
      "lang-five lang-six"
      "lang-seven lang-eight" 
      "lang-nine lang-ten"
      "lang-eleven lang-twelve"
      "lang-thirteen ."
  }

  .wrapper-programs {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
      "prog-one prog-two" 
      "prog-three prog-four" 
      "prog-five prog-six"
      "prog-seven prog-eight" 
      "prog-nine prog-ten"
      "prog-eleven .";
  }

/*
  .wrapper-freetime {
  width: 80vw;
  align-items: center;
  justify-items: center;
  display: grid;
  grid-row-gap: 20px;
  grid-template-areas:
  "freeproject-four"
    "freeproject-one"
    "freeproject-two"
    "freeproject-three";
  }
  */

  .freetimeprojects {
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
  }

  .wrapper-worktime {
    width: 80vw;
    align-items: center;
    justify-items: center;
    display: grid;
    grid-row-gap: 20px;
    grid-template-areas:
      "workproject-one"
      "workproject-two"
      "workproject-three";
  }

  .wrapper-projects-left {
    width: 80vw;
    max-width: 1600px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    grid-row-gap: 20px;
    grid-template-areas:
      "pro-head pro-head"
      "text picture";
  }
  .wrapper-projects-right {
    width: 80vw;
    max-width: 1600px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    grid-row-gap: 20px;
    grid-template-areas:
      "pro-head pro-head"
      "picture text";
  }

  .wrapper-contact {
    width: 90vw;
    grid-row-gap: 10px;
    align-items: center;
    justify-items: center;
    grid-template-areas:
      "contactme" 
      "contact";
  }

  .contact {
    width: 100vw;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr 4fr;
    grid-row-gap: 10px;
    grid-template-areas:
      "contact-pic contact-info"
      "social social"
      ;
  }

  .contact-info {
    grid-row-gap: 10px;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
    "time-age contact-text-age" 
    "time-work contact-text-work"
    "time-edu contact-text-studies";
  }


}










/*
------------------
--    DESKTOP   --
------------------
*/

@media(min-width: 992px) {


  .title {
    grid-area: title;
    display: grid;
  }



  .wrapper-intro {
    width: 95vw;
    grid-row-gap: 10px;
    align-items: center;
    justify-items: center;
    isplay: grid;
    grid-template-areas:
      "aboutme"
      "introcard"
      ;
  }

 .introcard {
    width: 100vw;
    max-width: 1400px;
    align-items: center;
    justify-items: center;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      "intro-pic intro-info"
      "interests interests"
 }


  .interests {
    width: 80vw;
    max-width: 1200px;
    align-items: center;
    justify-items: center;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "intr-one intr-two intr-three intr-four intr-five intr-six";
  }

  .wrapper-charac {
    width: calc(100vw - 75px);
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-areas:
    "charac-one"
    "charac-two"
    "charac-three"
    "charac-four"
    "charac-five"
    ;
  }


  .wrapper-contact {
    width: 95vw;
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    grid-template-areas:
        "contactme" 
        "contact";
  }

  .contact {
    width: 100vw;
    max-width: 1400px;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr 4fr;
    grid-row-gap: 10px;
    grid-template-areas:
      "contact-pic contact-info"
      "social social"
      ;
  }

  .contact-info {
    grid-row-gap: 10px;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
    "time-age contact-text-age" 
    "time-work contact-text-work"
    "time-edu contact-text-studies";
  }

  .skills {
    width: 80vw;
    max-width: 1600px;
  }

  .freetimeprojects {
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
  }



  .timeline-events h2,
  .timeline-events h3,
  .timeline-events h4 {
    display: grid;
  }
  .timeline-events-secondary h2,
  .timeline-events-secondary  h3,
  .timeline-events-secondary  h4 {
    display: grid;
  }
  .timeline-events-primary-headline h3 {
    display: grid;
  }
  .timeline-events-secondary-headline h3 {
    display: grid;
  }
  .timeline-events-secondary {
    position: relative;
    top: 0px;
  }
  .timesum {
    position: relative;
    top: 0px;
  }
    
}



/*
------------------
--    SEMI-LARGE     --
------------------
*/

@media(min-width: 1100px) {


}


/*
------------------
--    LARGE     --
------------------
*/

@media(min-width: 1400px) {
  .pic-left {
    display: grid;
    width: 80vw;
    max-width: 1600px;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pichead pichead"
      "picpic pictext";
  }

  .pic-right {
    display: grid;
    width: 80vw;
    max-width: 1600px;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pichead pichead"
      "pictext picpic";
  }

}
