* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Rubik', Arial, sans-serif;
      font-weight: normal;
      color: #0d0d0d;
    }

    .div4 {
      width: 100vw;
      display: grid;
      background-color: #FFFFFF;
    }

    .header {
      background-color: #b5a69a;
      position: fixed;
      width: 100%;
      z-index: 3;
    }

    .header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      background-color: #aaa;
    }

    .header ul a {
      display: block;
      padding: 20px;
      text-decoration: none;
      border-right: 1px solid #aaa;
      color: #0d0d0d;
      font-weight: normal;
      font-size: 1em;
      text-align: center;
    }

    ul.menu {
      display: flex;
      flex-direction: column;
    }

    .header ul a:hover {
      background-color: #b5a69a;
    }

    .header img.logo {
      float: left;
      display: block;
    }

    .header .menu {
      clear: both;
      max-height: 0;
      transition: max-height 0.2s ease-out;
    }

    .header .menu-icon {
      padding: 28px 20px;
      position: relative;
      float: right;
      cursor: pointer;
    }

    .header .menu-icon .nav-icon {
      background: #333;
      display: block;
      position: relative;
      transition: background 0.2s ease-out;
    }

    .header .menu-icon .nav-icon:before {
      background: #333;
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      transition: all 0.2s ease-out;
    }

    .header .menu-icon .nav-icon:after {
      background: #333;
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      transition: all 0.2s ease-out;
    }

    .header .menu-btn {
      display: none;
    }

    .header .menu-btn:checked~.menu {
      max-height: 240px;
    }

    .header .menu-btn:checked~.menu-icon .nav-icon {
      background: transparent;
    }

    .header .menu-btn:checked~.menu-icon .nav-icon:before {
      transform: rotate(-45deg);
      top: 0;
    }

    .header .menu-btn:checked~.menu-icon .nav-icon:after {
      transform: rotate(45deg);
      top: 0;
    }

    /*-----------------------------------------*/

    .div4 .header {
      grid-area: 1 / 1 / 1 / span 4;
      width: 100vw;
    }

    /*-----------------------------------------*/

    .div4 .resume {
      grid-area: 1 / 1 / 1 / span 4;
      background: #b5a69a;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .div4 .resume .i {
      grid-area: 1 / 3 / 1 / span 2;
    }

    .div4 .b0 {         /*logo*/
      grid-area: 1 / 1 / 1 / span 1;
      margin-left: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
    }

    ul {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-weight: lighter;
    }

    ul li {
      display: block;
      cursor: pointer;
      margin-right: 10%;
    }

    .resume .i .navy {        /*nav*/
      text-decoration: none;
      font-weight: bolder;
      color: #3c3c3c;
    }

    .i li {
      list-style: none;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      cursor: pointer;
    }

    .i li a:hover {
      color: cadetblue;
    }

    .i li a:active {
      color: white;
    }

    .active,
    .a:hover {
      color: white;
    }

    /*------------------------------------------------------*/

    .div4 .b1 {       /*MIRA MARKUSFELD*/
      grid-area: 3 / 2 / 3 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #0d0d0d;
    }

    .b1 h1.name-info {
      color: #FF9900;
      font-weight: bolder;
    }

    /*------------------------------------------------------*/

    .div4 .b2 {       /*marku0012...*/
      grid-area: 4 / 2 / 4 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .b2 h3#info1 {
      font-weight: normal;
      color: #3c3c3c;
      font-weight: normal;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b3 {       /*www.linkedin*/
      grid-area: 5 / 2 / 5 / span 2;
      margin-left: 10%;
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .b3 a {
      font-weight: normal;
      color: red;
      font-weight: normal;
      margin-bottom: 10px;
      text-decoration: none;
    }

    .b3 a:hover {
      color: cadetblue;
    }

    /*------------------------------------------------------*/

    .div4 .b6 {       /*LANGUAGES*/
      grid-area: 6 / 2 / 6 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .b6 #nameInfo {
      color: #FF9900;
      font-weight: bolder;
    }

    /*------------------------------------------------------*/

    .div4 .b7 {       /*hebrew*/
      grid-area: 7 / 2 / 7 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .b7 .dot {
      display: flex;
      align-items: baseline;
      justify-content: space-around;
    }

    .b7 h4.lang1 {
      font-weight: normal;
      color: #0d0d0d;
    }

    /*------------------------------------------------------*/
    .div4 .b8 {       /*english*/
      grid-area: 8 / 2 / 8 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .b8 .dot {
      display: flex;
      align-items: baseline;
      justify-content: space-around;
    }

    .b8 h4.lang2 {
      font-weight: normal;
      color: #0d0d0d;
    }

    /*------------------------------------------------------*/
    .div4 .b9 {       /*italian*/
      grid-area: 9 / 2 / 9 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .b9 .dot {
      display: flex;
      align-items: baseline;
      justify-content: space-around;
    }

    .b9 h4.lang3 {
      font-weight: normal;
      color: #0d0d0d;
    }

    /*------------------------------------------------------*/

    .div4 .b10 {        /*french*/
      grid-area: 10 / 2 / 10 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .b10 .dot {
      display: flex;
      align-items: baseline;
      justify-content: space-around;
    }

    .b10 h4.lang4 {
      font-weight: normal;
      color: #0d0d0d;
    }

    /*------------------------------------------------------*/

    .div4 .b11 {        /*arabic*/
      grid-area: 11 / 2 / 11 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .b11 .dot {
      display: flex;
      align-items: baseline;
      justify-content: space-around;
    }

    .b11 h4.lang5 {
      font-weight: normal;
      color: #0d0d0d;
    }

    /*------------------------------------------------------*/

    .div4 .b12 {        /*view certificate*/
      grid-area: 12 / 2 / 12 / span 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .b12 .view {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ff9900;
      border-style: none;
      border-radius: 50px;
      border: none;
      margin: 5%;
    }

    .b12 #cert {
      text-align: center;
      margin-bottom: 50%;
      margin-top: 50%;
      text-decoration: none;
      padding: 10px;
      color: #0d0d0d;
      font-weight: bolder;
    }

    /*------------------------------------------------------*/

    .div4 .b13 {        /*EDUCATION*/
      grid-area: 13 / 2 / 13 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .b13 h2#nameInfo {
      color: #FF9900;
      font-weight: bolder;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    /*------------------------------------------------------*/
    .div4 .b14 {        /*UX/UI-labour*/
      grid-area: 14 / 2 / 14 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b14 h3#headline {
      font-size: 1.75em;
      line-height: 1.75em;
      color: #595959;
      font-weight: bolder;
      align-self: self-start;
    }

    .b14 h4#UI {
      font-size: 1.5em;
      line-height: 1.5;
      color: #5a5a5a;
      font-weight: normal;
      align-self: self-start;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/
    
    .div4 .b15 {        /*graphic - hasifa*/
      grid-area: 15 / 2 / 15 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b15 h3#headline {
      color: #595959;
      font-weight: bolder;
      align-self: self-start;
    }

    .b15 h4#GR {
      color: #5a5a5a;
      font-weight: normal;
      align-self: self-start;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b16 {        /*front - she codes*/
      grid-area: 16 / 2 / 16 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b16 h3#headline {
      color: #595959;
      font-weight: bolder;
      align-self: self-start;
    }

    .b16 h4#FE {
      color: rgb(90, 90, 90);
      font-weight: normal;
      align-self: self-start;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b17 {        /*EXPERIENCE*/
      grid-area: 17 / 2 / 17 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b17 h2#nameInfo {
      color: #FF9900;
      font-weight: bolder;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    /*------------------------------------------------------*/
    .div4 .b18 {        /*self employeed - */
      grid-area: 18 / 2 / 18 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b18 h3#headline {
      color: #595959;
      font-weight: bolder;
      align-self: self-start;
    }

    .b18 a {
      color: red;
      font-weight: normal;
      align-self: self-start;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .b18 a:hover {
      color: cadetblue;
    }

    /*------------------------------------------------------*/

    .div4 .b19 {        /*SKILLS*/
      grid-area: 19 / 2 / 19 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b19 #nameInfo {
      color: #FF9900;
      font-weight: bolder;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b20 {        /*UX/UI*/
      grid-area: 20 / 2 / 20 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b20 #UX {
      color: rgb(90, 90, 90);
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/
    .div4 .b21 {        /*grap*/
      grid-area: 21 / 2 / 21 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b21 #GD {
      color: rgb(90, 90, 90);
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/

    .div4 .b22 {        /*web*/
      grid-area: 22 / 2 / 22 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b22 #WE {
      color: rgb(90, 90, 90);
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/
    .div4 .b23 {        /*TOOLS*/
      grid-area: 23 / 2 / 23 / span 2;
      margin-left: 10%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b23 #nameInfo {
      color: #FF9900;
      font-weight: bold;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b24 {        /*photoshop*/
      grid-area: 24 / 2 / 24 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b24 h4#photoshop {
      color: #5a5a5a;
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/
    
    .div4 .b25 {        /*photoshop*/
      grid-area: 25 / 2 / 25 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b25 #skill-bar {
      width: 50%;
      border-radius: 10px;
      background-color: #595959;
      margin-top: 6px;
      margin-bottom: 10px;
    }

    .b25 #skill-per-PS {
      height: 100%;
      width: 70%;
      position: relative;
      display: block;
      background-color: #FF3C3C;
      border-radius: 10px;
    }

    /*------------------------------------------------------*/
    .div4 .b26 {        /*illustrator*/
      grid-area: 26 / 2 / 26 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b26 h4#illustrator {
      color: #5a5a5a;
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/
    .div4 .b27 {        /*illustrator*/
      grid-area: 27 / 2 / 27 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b27 #skill-per-ILL {
      height: 100%;
      width: 90%;
      position: relative;
      display: block;
      background-color: #FF3C3C;
      border-radius: 10px;
    }

    .b27 #skill-bar {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      background-color: #595959;
      margin-top: 6px;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/
    .div4 .b28 {        /*Indesign*/
      grid-area: 28 / 2 / 28 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b28 h4#indesign {
      font-size: 1.75em;
      color: #5a5a5a;
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/

    .div4 .b29 {        /*Indesign*/
      grid-area: 29 / 2 / 29 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b29 #skill-per-1-IN {
      height: 100%;
      width: 80%;
      position: relative;
      display: block;
      background-color: #FF3C3C;
      border-radius: 10px;
    }

    .b29 #skill-bar {
      width: 50%;
      border-radius: 10px;
      background-color: #595959;
      margin-top: 6px;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b30 {        /*figma*/
      grid-area: 30 / 2 / 30 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b30 h4#figma {
      font-size: 1.75em;
      color: #5a5a5a;
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/

    .div4 .b31 {        /*figma*/
      grid-area: 31 / 2 / 31 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b31 #skill-per-1-FI {
      height: 100%;
      width: 95%;
      position: relative;
      display: block;
      background-color: #FF3C3C;
      border-radius: 10px;
    }

    .b31 #skill-bar {
      width: 50%;
      border-radius: 10px;
      background-color: #595959;
      margin-top: 6px;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/
    .div4 .b32 {        /*html*/
      grid-area: 32 / 2 / 32 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b32 h4#html {
      font-size: 1.75em;
      color: #5a5a5a;
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/
    .div4 .b33 {        /*html*/
      grid-area: 33 / 2 / 33 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b33 #skill-per-2-HTML {
      height: 100%;
      width: 90%;
      position: relative;
      display: block;
      background-color: #FF3C3C;
      border-radius: 10px;
    }

    .b33 #skill-bar {
      width: 50%;
      border-radius: 10px;
      background-color: #595959;
      margin-top: 6px;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b34 {        /*css*/
      grid-area: 34 / 2 / 34 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b34 h4#css {
      font-size: 1.75em;
      color: #5a5a5a;
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/

    .div4 .b35 {        /*css*/
      grid-area: 35 / 2 / 35 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b35 #skill-per-2-CSS {
      height: 100%;
      width: 80%;
      position: relative;
      display: block;
      background-color: #FF3C3C;
      border-radius: 10px;
    }

    .b35 #skill-bar {
      width: 50%;
      border-radius: 10px;
      background-color: #595959;
      margin-top: 6px;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b36 {        /*js*/
      grid-area: 36 / 2 / 36 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b36 h4#js {
      font-size: 1.75em;
      color: #5a5a5a;
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/

    .div4 .b37 {        /*js*/
      grid-area: 37 / 2 / 37 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b37 #skill-per-3-JS {
      height: 100%;
      width: 50%;
      position: relative;
      display: block;
      background-color: #FF3C3C;
      border-radius: 10px;
    }

    .b37 #skill-bar {
      height: 100%;
      width: 50%;
      border-radius: 10px;
      background-color: #595959;
      margin-top: 6px;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/

    .div4 .b38 {        /*python*/
      grid-area: 38 / 2 / 38 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .b38 h4#python {
      font-size: 1.75em;
      color: #5a5a5a;
      font-weight: bolder;
      align-self: self-start;
    }

    /*------------------------------------------------------*/

    .div4 .b39 {        /*python*/
      grid-area: 39 / 2 / 39 / span 2;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    .b39 #skill-per-3-PY {
      height: 100%;
      width: 30%;
      position: relative;
      display: block;
      background-color: #FF3C3C;
      border-radius: 10px;
    }

    .b39 #skill-bar {
      width: 50%;
      border-radius: 10px;
      background-color: #595959;
      margin-top: 6px;
      margin-bottom: 10px;
    }

    /*------------------------------------------------------*/