/*---------- Sass Variabler ----------*/
/*-----*/
/*---------- fonts ----------*/
/*-----*/
/*---------- general --------- */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-decoration: none;
}

h1 {
  color: #000000;
  font-size: 25px;
  text-align: center;
  font: "Lora", serif;
}

h2 {
  color: #000000;
  font-size: 20px;
  font: "Abel", sans-serif;
  text-transform: uppercase;
}

h3 {
  color: #000000;
  font-size: 18px;
  font: "Abel", sans-serif;
}

p {
  color: #000000;
  font-size: 16px;
  font: "Abel", sans-serif;
  line-height: 22px;
}

.p_footer {
  color: #000000;
}

.uppercase{
  text-transform: uppercase;
}

a {
  font: "Abel", sans-serif;
}

main {
  background-color: #ffffff;
}

.bold{
  font-weight: bolder;
}


#myBtn {
  display: none;
  position: fixed;
  bottom: 210px;
  height: 30px /**/;
  width: 30px; /**/
  right: 10px;
  z-index: 99;
  font-size: 18px; /*13px*/
  border: none;
  outline: none;
  background-color: #181830;
  color: #ffffff;
  cursor: pointer;
  padding: 9px; /*12px*/
  border-radius: 50%; /*4px*/
}

.linkedin_icon {
  font-size: 2px;
  color: #444444;
}

.nav-blue{
  color: #0040C1;
  font-weight: bold;
}

.space_b{
  padding-bottom: 20px;
}

/*-----*/
/*---------- nav bar --------- */
header {
  background-color: #fff;
}

li {
  list-style: none;
}

a {
  color: #000000;
  text-decoration: none;
}

.logo {
  width: 70px;
}

.navbar {
  min-height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 24px;
  display: flex;
  /*-webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;*/
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #000000;
}

.hamburger {
  display: block;
  cursor: pointer;
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(45deg);
          transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
  -webkit-transform: translateY(-8px) rotate(-45deg);
          transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
  position: fixed;
  left: -100%;
  top: 47px;
  /*gap: 0;*/
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ffffff;
  width: 100%;
  text-align: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.nav-item {
  margin: 16px 0;
}

.nav-menu.active {
  left: 0;
}

.nav-link {
  font-size: 17px;
}

/*-----*/
/*---------- FRONTPAGE --------- */
.front_info{
  background-color: #181830 ; /*f5f5f4*/
}

.h1_front_page {
  font-size: 23px;
  color: white;
}

.h2_front_page {
  text-align: center;
  padding-top: 50px;
  color: #0040C1;
  font-size: 22px;
  padding: 30px 0;
}

.p_front_page_cover{
  text-align: center;
  padding: 15px 22px 0px 15px;
  color: white;
}

.col_left {
  padding-top: 8%;
}

.col_right {
  padding-top: 10%;
}

.img_front_info {
  width: 70%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
}

.typed-text {
  text-transform: uppercase;
  color: #474479;
}

.cursor {
  display: inline-block;
  width: 2px;
  background-color: #C4C4C4;
  margin-left: 0,1rem;
  -webkit-animation: blink 1s infinite;
          animation: blink 1s infinite;
}

.cursor.typing {
  -webkit-animation: none;
          animation: none;
}

@-webkit-keyframes blink {
  0% {
    background-color: #C4C4C4;
  }
  49% {
    background-color: #C4C4C4;
  }
  50% {
    background-color: transparent;
  }
  99% {
    background-color: transparent;
  }
  100% {
    background-color: #C4C4C4;
  }
}

@keyframes blink {
  0% {
    background-color: #C4C4C4;
  }
  49% {
    background-color: #C4C4C4;
  }
  50% {
    background-color: transparent;
  }
  99% {
    background-color: transparent;
  }
  100% {
    background-color: #C4C4C4;
  }
}

/*-----*/
/*---------- A LITTLE ABOUT ME--------- */

.h2_about_me {
  text-align: center;
  padding-top: 25px;
  padding: 25px 0 20px 0;
}

.about_me_tekst{
  padding: 0px 40px 30px 40px;
}

/*-----*/
/*---------- PORTFOLIO --------- */

.h2_portfolio{
  text-align: center;
  padding: 20px 0;
}

.p_portfolio{
  padding: 0px 40px;
}

.portfolio-wrapper{
  margin: 2em 0 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0px 20px;
}

.project{
  width: 100%;
  margin-bottom: 1em;
  position: relative;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

.project_img{
  width: 100%;
}

.phone_img{
  width: 35%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.p_project{
  padding: 10px 15px 10px 15px;
}


/*-----*/
/*---------- WHAT NOW --------- */

.now_what{
  background-color: #f5f5f4;
  padding-bottom: 1em;
}

.h2_now_what{
  text-align: center;
  padding: 20px 0;
}

.p_now_what{
  padding: 0px 40px;
  text-align: center;
}

.h3_column{
  text-align: center;
  margin-bottom: 10px;
}

.columns_now_what{
  padding: 0px 40px;
}

.column{
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  background-color: white;
  padding: 20px 8px;
}

/*-----*/
/*---------- OVERALL_SKILLS-------- */

.overall_skills{
  background-color: #f5f5f4 ;
}

.h2_overall_skills{
  text-align: center;
  padding: 20px 0;
}

.p_overall_skills{
  padding: 0px 40px;
}


.overall_skills_wrap_all{
  padding-left: 40px;
}

.p_overall_skills_graph{
  font-weight: bold;
}

/*-----*/
/*---------- ALL SKILLS--------- */

.all_skills_heder{
  background-color: #F5F5F4;
}

.h1_all_skills{
  padding: 20px 0;
}

.h2_all_skills{
  padding: 25px 0 0px 0;
  text-align: center;
}

.p_all_skills_heder{
  padding: 0px 40px 25px 40px;
}

.h3_all_skills{
  text-transform: uppercase;
}

.grouped_skills{
  padding-bottom: 40px;
}

.line{
  height: 2px;
  background-color: black;
  width: 40%;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.miniSpace{
  padding-bottom: 10px;
}


/*SKILLS*/

.html{
  animation: html 1s linear forwards;
  background: #9484A5;
}
.html span{
  border: 1px solid #9484A5;
}

.css{
  animation: css 1s linear forwards;
  background: #9484A5;
}
.css span{
  border: 1px solid #9484A5;
}

.scss{
  animation: scss 1s linear forwards;
  background: #9484A5;
}
.scss span{
  border: 1px solid #9484A5;
}

.javascript{
  animation: javascript 1s linear forwards;
  background: #9484A5;
}
.javascript span{
  border: 1px solid #9484A5;
}

.php{
  animation: php 1s linear forwards;
  background: #9484A5;
}
.php span{
  border: 1px solid #9484A5;
}

.json{
  animation: json 1s linear forwards;
  background: #9484A5;
}
.json span{
  border: 1px solid #9484A5;
}
/**/
.photoshop{
  animation: photoshop 1s linear forwards;
  background: #AB704F;
}
.photoshop span{
  border: 1px solid #AB704F;
}

.illustrator{
  animation: illustrator 1s linear forwards;
  background: #AB704F;
}
.illustrator span{
  border: 1px solid #AB704F;
}

.xd{
  animation: xd 1s linear forwards;
  background: #AB704F;
}
.xed span{
  border: 1px solid #AB704F;
}

.figma{
  animation: figma 1s linear forwards;
  background: #AB704F;
}
.figma span{
  border: 1px solid #AB704F;
}

.trello{
  animation: figma 1s linear forwards;
  background: #AB704F;
}
.trello span{
  border: 1px solid #AB704F;
}

.miro{
  animation: figma 1s linear forwards;
  background: #AB704F;
}
.miro span{
  border: 1px solid #AB704F;
}

/**/
.ahrefs{
  animation: ahrefs 1s linear forwards;
  background: #128190;
}
.ahrefs span{
  border: 1px solid #128190;
}

.scremingfrog{
  animation: scremingfrog 1s linear forwards;
  background: #128190;
}
.scremingfrog span{
  border: 1px solid #128190;
}

.accuranker{
  animation: accuranker 1s linear forwards;
  background: #128190;
}
.accuranker span{
  border: 1px solid #128190;
}

.semrush{
  animation: semrush 1s linear forwards;
  background: #128190;
}
.semrush span{
  border: 1px solid #128190;
}

.keywordplanner{
  animation: keywordplanner 1s linear forwards;
  background: #128190;
}
.keywordplanner span{
  border: 1px solid #128190;
}

.googletagmanager{
  animation: googletagmanager 1s linear forwards;
  background: #128190;
}
.googletagmanager span{
  border: 1px solid #128190;
}

.googleanalytics{
  animation: googleanalytics 1s linear forwards;
  background: #128190;
}
.googleanalytics span{
  border: 1px solid #128190;
}



@keyframes html{
  100%{
    width: 90%;
  }
}

@keyframes css{
  100%{
    width: 90%;
  }
}

@keyframes scss{
  100%{
    width: 75%;
  }
}

@keyframes javascript{
  100%{
    width: 25%;
  }
}

@keyframes php{
  100%{
    width: 25%;
  }
}

@keyframes json{
  100%{
    width: 20%;
  }
}

@keyframes photoshop{
  100%{
    width: 70%;
  }
}

@keyframes illustrator{
  100%{
    width: 32%;
  }
}

@keyframes xd{
  100%{
    width: 75%;
  }
}

@keyframes figma{
  100%{
    width: 82%;
  }
}

@keyframes miro{
  100%{
    width: 95%;
  }
}

@keyframes trello{
  100%{
    width: 97%;
  }
}

@keyframes ahrefs{
  100%{
    width: 87%;
  }
}

@keyframes scremingfrog{
  100%{
    width: 90%;
  }
}

@keyframes accuranker{
  100%{
    width: 77%;
  }
}

@keyframes semrush{
  100%{
    width: 68%;
  }
}

@keyframes keywordplanner{
  100%{
    width: 93%;
  }
}

@keyframes googletagmanager{
  100%{
    width: 64%;
  }
}

@keyframes googleanalytics{
  100%{
    width: 53%;
  }
}

/*-----*/
/*---------- PROGAMS --------- */

.backend_programs_section {
  background-color: #F5F5F4;
  padding: 25px 40px;
}

.backend-wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tools_img{ 
  width: 2.5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.h2_backend_programs{
  text-align: center;
}

.h3_backend_programs{
  font-size: 13px;
  font-weight: lighter;
  text-align: center;
}

.p_backend_programs{
  padding: 25px 0;
  text-align: center;
}

.wrap_backend_img_tekst{
  padding: 8px;
  width: 30%;
}

.dandomain_img{
  width: 4.5em ;
}


/*-----*/
/*---------- PROGRESS BAR--------- */

.skills {
  padding: 0 40px 30px 40px;
}

.skills h3{
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 40px;
  margin-bottom: 5px;
}

.progress-bar{
  background: #959595;
  width: 308px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div{
  height: 10px;
  border-radius: 5px;
  width: 0%;
  /*background-color: #5BB613; sets all baground colors to one color */
}

.progress-bar div span{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #F5F5F4;
  float: right;
  margin-top: -15px;
  margin-right: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*border: 1px solid #5BB613; sets all circkls borders to one color */
}

.frontend{
  animation: frontend 1s linear forwards;
  background-color: #5BB613;
}
.frontend span{
  border: 1px solid #5BB613;
}


.design{
  animation: design 1s linear forwards;
  background-color: #5BB613;
}
.design span{
  border: 1px solid #5BB613;
}

.seo{
  animation: seo 1s linear forwards;
  background-color: #5BB613;
}
.seo span{
  border: 1px solid #5BB613;
}

@keyframes frontend{
  100%{
    width: 86%;
  }
}

@keyframes design{
  100%{
    width: 90%;
  }
}

@keyframes seo{
  100%{
    width: 75%;
  }
}

/*-- CV--*/

.cv_cover_section{
  background-color: #F5F5F4;
  padding: 25px 40px;
}

.h1_cv_cover{
  padding-bottom: 20px;
}

.all_file-wrap{
  display: flex;
  margin: 30px 0;
  justify-content: space-between;
  flex-wrap: wrap;
}

.file-wrap{
  width: 40%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.file_img{
  width: 3.5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.p_file_tekst{
  text-align: center;
}

.cv_more{
  background-color: #f5f5f4;
  padding: 25px 40px;
}

.h2_cv_more{
  padding-bottom: 10px;
  text-align: center;
}

.blue_img{
  width: 15.5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/*-----*/
/*---------- fotter --------- */

.footer-warp-all{
  margin: 20px 30px;
}

.footer-wrap{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.p_footer{
  padding-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
}

.copyright{
  margin: 20px 0 10px 0px;
  text-align: center;
  font-size: 9px;
}

.footer_img{
  width: 2.5em;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------- mediaquery tablet ------------------------ */
@media screen and (min-width: 672px) and (max-width: 950px) {
  /* ------------------------------------------------- */
  /*--Generalt---*/
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 23px;
  }
  h3 {
    font-size: 18px;
  }
  p {
    font-size: 17px;
  }
  #myBtn {
    display: none;
    position: fixed;
    height: 30px /**/;
    width: 30px; /**/
    bottom: 158px;
    right: 10px;
    z-index: 99;
    font-size: 18px; /*15px*/
    border: none;
    outline: none;
    background-color: #181830;
    color: #ffffff;
    cursor: pointer;
    padding: 9px; /*15px*/
    border-radius: 50px; /*4px*/
  }
  /*--heder info ---*/
  .nav-link {
    font-size: 20px;
  }

  /*--FRONTPAGE -- */
  .col_right{
    padding-top: 2%;
  }

  .img_front_info{
    width: 65%;
  }

 /*A LITTLE ABOUT ME*/
  .about_me_tekst {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "left_text_about_me right_text_about_me";
    width: 100%;
    height: 100%;
    padding: 0px 65px 20px 65px;
  }

  .left_text_about_me { grid-area: left_text_about_me; }

  .right_text_about_me { grid-area: right_text_about_me; }

  /*A LITTLE ABOUT ME*/
  .skills{
    padding: 0px 40px 30px 90px ;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    /*min-width: 65%;*/
  }

  .p_overall_skills{
    padding: 0;
    text-align: center;
  }

  /*PROGRESS-BAR*/
  .progress-bar{
    width: 470px;
  }

  /* -- PORTFOLIO-- */
  .p_portfolio {
    padding: 0px 70px;
  }

  .portfolio-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .project , .column{
    max-width: calc(100% / 3 - 2em/3);
  }

  /* -- NOW WHAT -- */

  .p_now_what{
    padding: 0px 70px;
  }

  .columns_now_what{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  /*-- CV--*/
  .cv_cover_section {
    padding: 30px 90px;
  }

  .cv_more {
    padding: 30px 90px;
  }

  .h2_cv_more {
    padding-bottom: 20px
  }

  .wrap_backend_img_tekst {
    width: 26%;
  }

  .tools_img {
    width: 3.5em;
  }
  
  .dandomain_img{
    width: 6.5em ;
  }

  .hostedshop_img{
    width: 4em;
  }
 


  /*--footer---*/
  .footer-warp-all {
    margin: 20px 0px;
    padding: 0 35%;
  }

  .p_footer{
    padding-bottom: 20px;
  }

  
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------- mediaquery ipad pro ----------------------- */
@media screen and (min-width: 951px) and (max-width: 1366px) {
  /*--Generalt---*/
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 20px;
  }
  p {
    font-size: 18px;
  }
  #myBtn {
    display: none;
    position: fixed;
    bottom: 170px;
    height: 30px /**/;
    width: 30px; /**/
    right: 10px;
    z-index: 99;
    font-size: 22px;
    border: none;
    outline: none;
    background-color: #181830;
    color: #ffffff;
    cursor: pointer;
    padding: 7px; /*12px*/
    border-radius: 50%; /*4px*/
  }

  /*--Burgermenu---*/
  .nav-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 60px;
    position: inherit;
    padding-left: 40%; /*52*/
  }
  .navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: unset;
    -webkit-box-direction: unset;
        -ms-flex-direction: unset;
            flex-direction: unset;
    font-size: 25px;
  }
  .nav-link {
    /*Hover effect*/
    -webkit-transition: 0.7s ease;
    transition: 0.7s ease;
    font-size: 20px;
  }
  .nav-link:hover {
    /*Hover effect*/
    color: blue;
  }
  .nav-item{
    margin: 16px 0px;
  }
  .hamburger {
    display: none;
  }
  .logo {
    width: 80px;
  }
  /*----------  FRONT PAGE --------- */
  .front_info {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1.1fr 0.9fr;
        grid-template-columns: 1.1fr 0.9fr;
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
        grid-template-areas: "col_left col_right";
    width: 100%;
    height: 100%;
  }
  .col_left {
   /* -ms-grid-row: 1;
    -ms-grid-column: 1;*/
    grid-area: col_left;
    padding-top: 150px;
  }
  .col_right {
    /*-ms-grid-row: 1;
    -ms-grid-column: 2;*/
    grid-area: col_right;
  }
  .h2_front_page {
    font-size: 30px;
    padding-top: 2em;
  }
  .p_front_page_cover{
    padding: 20px 0px 0px 0px;
    text-align: center;
  }
  .img_front_info {
    width: 90%;
    padding-top: 50px;
    padding-bottom: 100px;
  }


  /*A LITTLE ABOUT ME*/
  .about_me_tekst {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "left_text_about_me right_text_about_me";
    width: 100%;
    height: 100%;
    padding: 0px 40px 20px 40px;
  }

  .left_text_about_me { 
    grid-area: left_text_about_me; 
    padding: 0 12px;
  }

  .right_text_about_me { 
    grid-area: right_text_about_me; 
    padding: 0 12px;
  }

  /*A LITTLE ABOUT ME*/
  .skills{
    padding: 0px 40px 30px 90px ;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 75%;
    /*min-width: 65%;*/
  }

  .p_overall_skills{
    padding: 0;
    text-align: center;
  }

  /*PROGRESS-BAR*/
  .progress-bar{
    width: 600px;
  }

  /* -- PORTFOLIO-- */
  .p_portfolio {
    padding: 0px 70px;
  }

  .portfolio-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 65px;
  }

  .project , .column{
    max-width: calc(100% / 3 - 2em/3);
  }

  /* -- NOW WHAT -- */

  .p_now_what{
    padding: 0px 70px;
  }

  .columns_now_what{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 65px;
  }

  /*-- ALL SKILLS*/
  .skills_grid {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "left_skills right_skills";
    width: 100%;
    height: 100%;
  }
  
  .left_skills { grid-area: left_skills; }
  
  .right_skills { grid-area: right_skills; }
  
  /*all skills*/
  .p_all_skills_heder {
    padding: 0px 90px 25px 90px;
  }

  .h2_all_skills {
    padding-top: 40px;
  }

  .progress-bar-all-skill{
    width: 400px;
  }

  .all_skills_section{
    max-width: none;
  }

  /*backend*/
  .wrap_backend_img_tekst {
    width: 20%;
    padding: 12px;
  }

  .tools_img {
    width: 4.5em;
  }

  .dandomain_img {
    width: 7.5em;
  }


  /*-- CV--*/
  .cv_cover_section {
    padding: 40px 150px;
  }

  .all_file-wrap {
    margin: 40px 0;
  }

  .cv_more {
    padding: 40px 120px;
  }

  .h2_cv_more {
    padding-bottom: 20px
  }

  .cv_more-wrap {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "cv_more_left cv_more_right";
    width: 100%;
    height: 100%;
  }
  
  .cv_more_left { grid-area: cv_more_left; }
  
  .cv_more_right { grid-area: cv_more_right; }
  
  .p_cv_more{
    padding-top: 30%;
    padding-left: 25px;
    padding-right: 50px;
  }

  .blue_img{
    width: 21.5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }




  /*--footer---*/

  .footer-warp-all{
    margin: 20px 450px;
  }
  
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------- mediaquery desktop ----------------------- */
@media screen and (min-width: 1367px) {
  /*--Generalt---*/
  h1 {
    font-size: 50px;
  }
  h2 {
    font-size: 27px;
  }
  h3 {
    font-size: 26px;
  }
  p {
    font-size: 23px;
  }
  #myBtn {
    display: none;
    position: fixed;
    bottom: 170px;
    height: 40px /**/;
    width: 40px; /**/
    right: 10px;
    z-index: 99;
    font-size: 38px;
    border: none;
    outline: none;
    background-color: #181830;
    color: #ffffff;
    cursor: pointer;
    padding: 7px; /*12px*/
    border-radius: 50%; /*4px*/
  }




  /*--Burgermenu---*/
  .nav-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 60px;
    position: inherit;
    padding-left: 50%;
  }
  .navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: unset;
    -webkit-box-direction: unset;
        -ms-flex-direction: unset;
            flex-direction: unset;
    font-size: 27px;
  }
  .nav-link {
    /*Hover effect*/
    -webkit-transition: 0.7s ease;
    transition: 0.7s ease;
    font-size: 25px;
  }
  .nav-link:hover {
    /*Hover effect*/
    color: blue;
  }
  .hamburger {
    display: none;
  }
  .logo {
    width: 100px;
  }
  /*---------- FRONT PAGE --------- */
  .front_info {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1.2fr 0.8fr;
        grid-template-columns: 1.2fr 0.8fr;
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
        grid-template-areas: "col_left col_right";
    width: 100%;
    height: 100%;
  }
  .col_left {
    /*-ms-grid-row: 1;
    -ms-grid-column: 1;*/
    grid-area: col_left;
    padding-top: 210px;
  }
  .col_right {
    /*-ms-grid-row: 1;
    -ms-grid-column: 2;*/
    grid-area: col_right;
    padding-top: 0;
  }

  .h1_front_page{
    font-size: 25px;
  }
  .h2_front_page {
    font-size: 32px;
  }
  .img_front_info {
    width: 90%;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-right: 22px;
  }

  /*A LITTLE ABOUT ME*/
  .about_me_tekst {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "left_text_about_me right_text_about_me";
    width: 100%;
    height: 100%;
    padding: 0px 40px 20px 40px;
  }

  .left_text_about_me { 
    grid-area: left_text_about_me; 
    padding: 0 12px;
  }

  .right_text_about_me { 
    grid-area: right_text_about_me; 
    padding: 0 12px;
  }

  /*A LITTLE ABOUT ME*/
  .a_little_about_me{
    padding: 10px 0 20px 0;
  }
  
  .overall_skills{
    padding: 10px 0 20px 0;
  }

  .skills{
    padding: 0px 40px 30px 90px ;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 65%;
  }

  .p_overall_skills{
    padding: 0;
    text-align: center;
  }

  /*PROGRESS-BAR*/
  .progress-bar{
    width: 750px;
  }

  /* -- PORTFOLIO-- */
  
  .portfolio{
    padding: 10px 0 20px 0;
  }
  
  .p_portfolio {
    padding: 0px 70px;
  }

  .portfolio-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 65px;
  }

  .project , .column{
    max-width: calc(100% / 3 - 2em/3);
  }

  /* -- NOW WHAT -- */
  .now_what{
    padding: 10px 0 20px 0;
  }
  
  .p_now_what{
  padding: 0px 70px;
  }

  .columns_now_what{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 65px;
  }

  /*all skills*/
  .h1_all_skills{
    font-size: 30px;
    padding-top: 40px;
  }
  .p_all_skills_heder {
    padding: 0px 90px 25px 90px;
  }

  .h2_all_skills {
    padding-top: 40px;
  }

  .progress-bar-all-skill{
    width: 600px;
  }

  .all_skills_section{
    max-width: none;
  }

  .grouped_skills{
    padding-bottom: 75px;
  }

  .backend_programs_section {
    padding: 50px 90px;
  }

  .tools_img{
    width: 6.5em;
  }

  .h3_backend_programs{
    font-size: 16px;
  }

  .wrap_backend_img_tekst {
    width: 20%;
  }

  .skills_grid {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "left_skills right_skills";
    width: 100%;
    height: 100%;
  }
  
  .left_skills { grid-area: left_skills; }
  
  .right_skills { grid-area: right_skills; }


  /*backend*/
  .wrap_backend_img_tekst {
    width: 20%;
    padding: 12px;
  }

  .tools_img {
    width: 6.5em;
  }

  .dandomain_img {
    width: 9.5em;
    padding-top: 10px;
  }

  .hostedshop_img{
    width: 7.5em;
  }
  
  /*-- CV--*/
  .cv_cover_section {
    padding: 40px 150px;
  }

  .all_file-wrap {
    margin: 80px 0;
  }

  .cv_more {
    padding: 50px 120px;
  }

  .h2_cv_more {
    padding-bottom: 20px
  }

  .cv_more-wrap {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "cv_more_left cv_more_right";
    width: 100%;
    height: 100%;
  }
  
  .cv_more_left { grid-area: cv_more_left; }
  
  .cv_more_right { grid-area: cv_more_right; }
  
  .p_cv_more{
    padding-top: 15%;
    padding-left: 50px;
    padding-right: 50px;
  }

  .blue_img{
    width: 20.5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }




  /*--footer---*/

  .footer-warp-all {
    margin: 30px 0px;
    padding: 0 40%;
  }

  .p_footer{
    padding-bottom: 30px;
  }

  .footer_img {
    width: 3.5em;
  }

  .copyright {
    margin: 30px 0 20px 0px;
    text-align: center;
    font-size: 18px;
  }
  
}
/*# sourceMappingURL=style.css.map */