/* rubik-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/rubik-v31-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/rubik-v31-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/rubik-v31-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-800 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/rubik-v31-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


  html {
    padding: 0;
    margin: 0;
    background: #344869;
  }

  body {
    font-family: Rubik;
    line-height: 25.6px;
    font-size: 16px;
    text-rendering: geometricPrecision;
    padding: 0;
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6, h7 {
    font-family: Rubik;
    font-weight: 400;
    text-rendering: geometricPrecision;
  }

  
  p {
  }
  
  header {
    h1 {
      font-size: 2vw;
      line-height: 125%;
      letter-spacing: 0.1vw;
    }
    
    h2 {
      font-size: 1.25vw;
      line-height: 125%;
      letter-spacing: 0.1vw;
    }
  }
  
  @media screen and (orientation:portrait) { 
    header {
      h1 {
        font-size: 2rem;
      }
      
      h2 {
        font-size: 2em;
      }
    }
    
  }
  
  
  
    ul {
      display: flex;
      padding:0;
      justify-content: space-between;
      align-items: stretch;
    }
    ul li {
      display: flex;
    }
    a {
      text-decoration: none;
      color: inherit;
      border-bottom: 1px solid red;
      &:hover {
         color: red;
      }
      &.inactive {
        border-bottom: 1px solid gray;
      }
    }
  
  section {
    margin-bottom: 100px;
  }

  .logo {
    height: 100%;
  }
  
  .w100 {
    width: 100%;
  }
  
  footer {
  }
  
  .grid1 {
    display: grid;
    grid-template-rows: 5.95vw 	auto 	auto	auto ;
    grid-template-columns: auto	10.49vw	 43.2vw  auto ; 
    grid-template-areas: 	".    .     .       ."
                          ". 		. 		header  . "
                          ". 		. 		nav    . "
                          ". 		. 		main . "
    ;
    
    .shape1 {
      text-decoration: none;
      grid-row-start: 1;
      grid-row-end: 4;
      grid-column-start: 1;
      grid-column-end: 5;
      /* background: yellow; */
      z-index: -1;
    }
    
    
    logo {
      grid-area: logo;
    }
    
    nav {
      grid-area: nav;
      /* background: pink; */
    }
    
    header {
      grid-area: header;
      /* background: green; */
      z-index: 10;
    }
    
    main {
      grid-area: main;
      /* background: navy; */
    }

    
    
  }
  
  
  @media screen and (orientation:portrait) { 
  
    .grid1 {
      display: grid;
      grid-template-rows: 5.95vw 	auto auto auto	auto ;
      grid-template-columns: 5vw auto 5vw  ; 
      grid-template-areas: 	".    .          ."
                            ". 		logo       . "
                            ". 		header  . "
                            ". 		nav    . "
                            ". 		main . "
      ;
    }
  
  
  }
  
  .white {
    background: white;
  }
  
  .portrait {
    border-radius: 500px;
    max-width: 150px;
    margin: 0;
    padding: 0;
    
    img {display: block;}
  }
  
  .person {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "portrait title"
        ". text";
    gap: 0px;
    column-gap: 50px;
    
    margin-bottom: 50px;
    margin-top: 50px;
    
      .portrait {
          grid-area: portrait;
      }

      h3 {
          grid-area: title;
          align-self: flex-end;
      }

      p {
          grid-area: text;
      }
  }
  
  @media screen and (orientation:portrait) { 
    .person {
      column-gap: 20px;
      grid-template-areas:
          "portrait title"
          "text text";
      
    }

}
  
  
  @media screen and (orientation:landscape) { 
    .mockup {
      border-radius: 30px;
      overflow: hidden;
      display: inline-block;
      max-width: 500px;
      max-width: 30%;
      border: 2px solid #fff;
    }
    
    center {
      margin-top: 50px;
      margin-bottom: 50px;
    }
  }
  
  @media screen and (orientation:portrait) { 
    .mockup {
      border-radius: 50px;
      width: 100%;
      margin-bottom: 150px;
    }
  }
  
  code {
    display: block;
    max-width: 400px;
    padding: 20px;
    margin: 0 auto;
    text-align: center;
  }
  
  .add-space {
    margin: 40px auto;
  }