@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100&display=swap');
html {
  font-size: 12px;
}
body {
  margin:0;
	background: linear-gradient(#fafafa, #636262 70%);
}
body > * {
    padding: 1rem;
}
body {
  grid-template-columns: auto;
  grid-template-rows: 2px 70px 20px auto auto auto auto auto auto auto auto;
  display: grid;
  grid-template-areas:
  'nav2'
  'nav'
  'header'
  'header2'
  'service'
  'service2'

   'portfolio'
  'portfolio2'
  'web'
  'web2'
  'about'
  'footer';
}
/* tablet */
@media only screen and (min-width: 768px) {
  html {
    font-size: 18px;
  }
  body > * {
    padding: 1.7rem;
}
  body {  
      grid-template-columns: auto auto;
      grid-template-rows: 10px 120px 50px auto 100px auto auto auto auto auto auto auto;
      display: grid;
      grid-template-areas:
      'nav2 nav2'
      'nav nav'
      'header header'
      'header2 header2'
      'service service'
      'service2 service2'
       'portfolio portfolio'
      'portfolio2 portfolio2'
      'web web'
      'web2 web2'
      'about about'
      'footer footer';
  }
}               /* forgot to add this bracket*/
/* desktop */
@media only screen and (min-width: 992px) {
html {
    font-size: 25px;
}
  body > * {
    padding: 3rem;
}
  body {  
      grid-template-columns: auto auto auto;
      grid-template-rows: 30vh 70vh 130vh auto auto auto auto;
      display: grid;
      grid-template-areas:
      'nav2 nav2 nav'
      'header2 header2 header'
      'service service2 service2'
      'portfolio portfolio2 portfolio2'
      'web web2 web2'
      'about about about'
      'footer footer footer';
  }
}
/* area - logo */
.item00 {
  grid-area: nav2;
  background-color: #565ACD;
  padding:0; 
}
/* area - nav*/
.item0 {
  grid-area: nav;
  font-family: 'roboto';
}
      .item0 > .menu
      {margin: 1rem;
        display: flex;
        font-size: .7rem;
        text-transform: uppercase;
        font-weight: 600;
        justify-content: space-around;
}
/* area - where marketing meets development */
.item1 {
  grid-area: header;
  font-size: 4vw;
  font-family: 'roboto';
  font-weight: 100;
  color:#5E62D1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom:.5rem; /*declared padding in body, changed this*/
  
}
/* area - intros */
.item1b {
  grid-area: header2;
  background-color: #565ACD;
  font-family: 'roboto';
  color:#5FECC8;
  display: flex;
  flex-direction: column;
}
      .item1b > .intro
      {  font-size: 2.3rem;
      font-weight: 700;
      border-bottom: 1px #5FECC8 solid;
      }
      .item1b > .subintro
      {color: #fff;
        font-size: .8rem;
        font-weight: 300;
        margin-top:1%;
}
/* area - service title */
.item2 {
  grid-area: service;
  background-color: #5E62D1;
    text-transform: uppercase;
  font-size: 2.3rem;
  font-family: 'roboto';
  font-weight: 700;
  color:#5FECC8;
  display: flex;
justify-content: center;
  flex-direction: column;
} 
/* area - service items */
.item3 {
  grid-area: service2;
  background-color: #5E62D1;
  font-family: 'roboto';
  color:#FFFFFF;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
      .item3 > .servicesmain
      {
        border-top: #fff solid 1px;
        font-size: 1.5rem;
        font-weight: 600;
        text-transform: uppercase;
      }
      .item3 > .servicescontent
      {
        font-size: .8rem;
}
/* area - port title */
.item4b {
  grid-area: portfolio;
      background-color: #5FECC8;
  font-family: 'roboto';
  color:#5E62D1;
  text-transform: uppercase;
  font-size: 2.3rem;
  font-family: 'roboto';
  font-weight: 700;
  display:flex;
  justify-content: center;
  flex-direction: column;
}
/* area - port items */
.item4 {
  grid-area: portfolio2;
      background-color: #5FECC8;
      font-family: 'roboto';
      color:#565ACD;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
      .item4 > .portmain
      {
        border-top: #474DC1 solid 1px;
        font-size: 1.5rem;
        font-weight: 600;
        text-transform: uppercase;

      }
      .item4 > .portcontent
      {
        font-size: .8rem;
}

/* area - web title */
.item8 {
  grid-area: web;
  background-color: #5E62D1;
    text-transform: uppercase;
  font-size: 2.3rem;
  font-family: 'roboto';
  font-weight: 700;
  color:#5FECC8;
  display: flex;
justify-content: center;
  flex-direction: column;
} 
/* area - web items */
.item9 {
  grid-area: web2;
    background-color: #5E62D1;
  font-family: 'roboto';
  color:#FFFFFF;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
      .item3 > .servicesmain
      {
        border-top: #fff solid 1px;
        font-size: 1.5rem;
        font-weight: 600;
        text-transform: uppercase;
      }
      .item3 > .servicescontent
      {
        font-size: .8rem;
}

/* area - about */
.item5 {
  grid-area: about;
  background-color: #E0E2EE;
  font-family: 'roboto';
  color:#5E62D1;
  display: flex;
  flex-direction: column;
  justify-content: center;
align-items: center;
padding-bottom: 0; /*declared padding in body so make this 0*/

}
      .item5 > .about_header
      {
        font-size: 2.3rem;
        font-weight: 700;
        text-transform: uppercase;
      }
    .item5 > .about_intro
      {
        border-top: #474DC1 solid 1px;
        font-size: 2rem;
        font-weight: 100;
        text-transform: uppercase;
      
      }
      .item5 > .about_text
      {
        font-size: .8rem;
        max-width:40em; /*kainis this line*/
      }  
      .item5 > .about_image
      {
        display:flex;
        justify-content: center;
        align-items: center;     
      }
/* area - footer */
.item6 {
  grid-area: footer;
  background-color:#5FECC8;
  font-family: 'roboto';
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
      .item6 > .footer_header
      {
        font-size: 2.3rem;
        font-weight: 700;
        text-transform: uppercase;
      margin-bottom: 8%;
      color:#5E62D1;
      border-bottom: 1px #5E62D1 solid;
      }
      .item6 > .footer_action
      {
        display: flex;
      align-items: flex-start;
      justify-content:flex-start;
      width: 60%;
      text-transform: uppercase;
      font-size: 3.8vw;
      font-weight: 700;
    }
      .footer_action > .skype
      {border: 1px solid #5E62D1;
        padding:.9em;
      }
      .footer_action > .cv
      {border: 1px solid #5E62D1;
      padding: .9em;
        }
        .cv:hover{
          background-color:#E0E2EE;
       }
       .skype:hover{
        background-color:#E0E2EE;
     }
     .item6 > .footerdetails
     {
      margin: 2%;
      font-size: .6rem;
      color:#565ACD;
   }

/*links*/

a:link, a:visited {
  color: #565ACD;
  text-align: center;
  text-decoration: none;
  }

/* images */
.logo
{width: 4rem;}
.emoji
{width: 5%;}
.self
{width:10rem;} /*to test test*/
.image_proj {
  width: 5rem;
  margin: 2%;
  height: 5rem;
  border-radius: 50%;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  border: 2px #46404E solid;
}

/*...........................................................................*/

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 15px;
}
.container img {
  width: 100%;
  display: block;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  transition: all 100ms ease-out;
  
}
.container img:hover {
  transform: scale(1.04);
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
.item img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  
}