@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i');

:root {
  --columnFour: calc(100% / 4);
  --columnThree: calc(100% / 3);
  --columnTwo: calc(100% / 2);
  --columnOne: calc(100% / 1);
  --flexFlowLarge: row;
  --spaceXSmall: 1%;
  --spaceSmall: 2.5%;
  --spaceMedium: 5%;
  --spaceLarge: 10%;
  --font-size-xx-small: xx-small;
  --font-size-x-small: x-small;
  --font-size-small: small;
  --font-size-medium: medium;
  --font-size-large: large;
  --font-size-x-large: x-large;
  --font-size-xx-large: x-large;
  --fontWeightLight: 200;
  --fontWeightRegular: 400;
  --fontWeightMedium: 400;
  --fontWeightBold: 700;
  --colorWhite: #ffffff;
  --colorBlack: #000000;
  --colorMain: 5, 100%, 62%;
  --colorPrimary: hsl(5, 100%, 69%);
  --colorSecondary: hsl(228, 39%, 24%);
  --colorTertiary: hsl(212, 70%, 33%);
  --colorQuaternary: hsla(7, 24%, 86%, 0.1);
  --colorQuinary: #ff7e72;
  --colorSenary: #ff8e83;
  --colorSeptenary: #ff9d94;
  --colorOctonary: #ffada5;
  --colorNonary: #ffbcb6;
  --colorDenary: #ffccc7;
  --colorDuodenary: #ff6050;
  --colorVigenary: hsl(5, 100%, 62%);
}

::selection {
  background: var(--colorVigenary);
  color: var(--colorWhite);
}

a:focus {
  color: white;
  background: black;
  border-radius: 6px;
  -webkit-transition: color 0.2s ease-in, text-shadow 0.2s ease-in;
  transition: color 0.2s ease-in, text-shadow 0.2s ease-in;
  visibility: visible;
}

* {
 
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-position: inside;
  text-decoration: none;
  scroll-behavior: smooth;
  font-display: auto;
}

html {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--font-size-small);
  line-height: 1.2;
  color: var(--colorSecondary);
  font-weight: var(--fontWeightLight);
}

body {
  width: 100vw;
  margin: auto;
  display: grid;
  grid-template-rows: repeat(4, 4)
    /* row height*/
  ;
  grid-template-columns: repeat(4, 4)
    /* column */
  ;
  grid-gap: 0px;
  -ms-flex-line-pack: center;
  align-content: center;
}

h1 {
  font-size: 100%;
  font-weight: var(--fontWeightMedium);
  color: var(--colorWhite);
  padding: var(--spaceLarge);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  flex-flow: column;
}

h1 strong {
  font-weight: var(--fontWeightBold);
  color: var(--colorSecondary);
}

h1 small {
  font-size: 250%;
  color: var(--colorSecondary);
  font-weight: var(--fontWeightBold);
  margin-bottom: 1%;
}

h1 span {
  font-family: 'IBM Plex Sans', sans-serif;
  display: block;
  font-size: 500%;
  margin-bottom: var(--spaceMedium);
}

h1 em {
  font-size: 170%;
  font-style: normal;
}

.fa-arrow-down {
  display: inline-block;
  margin-top: var(--spaceMedium);
}

h2 {
  font-size: var(--font-size-x-large);
  font-weight: var(--fontWeightMedium);
  color: var(--colorVigenary);
}

h3 {
  font-size: var(--font-size-large);
  font-weight: var(--fontWeightMedium);
  color: var(--colorPrimary);
  margin-bottom: var(--spaceMedium);
}

h4 {
  font-size: var(--font-size-small);
  font-weight: var(--fontWeightBold);
  margin: var(--spaceMedium) 0 var(--spaceXSmall);
}

h5 {
  font-size: var(--font-size-small);
  font-weight: var(--fontWeightRegular);
  color: var(--colorTertiary);
}

h6 {
  font-size: var(--font-size-x-small);
  font-weight: var(--fontWeightMedium);
  margin-top: var(--spaceMedium);
  margin-bottom: var(--spaceMedium);
  color: var(--colorPrimary);
}

p {
  line-height: 1.5;
  font-weight: var(--fontWeightRegular);
  margin-bottom: 1rem;
}

ol li {
  list-style: decimal inside;
}

ul li {
  list-style: circle inside;
}

footer ul li {
  list-style: none;
}

li {
  font-weight: var(--fontWeightMedium);
  font-size: var(--font-size-x-small);
  color: var(--colorTertiary);
  line-height: 1.5;
}

time {
  font-size: var(--font-size-x-small);
}

header ul li {
  font-size: var(--font-size-small);
  list-style: none;
  width: 100%;
  text-align: center;
}

address {
  font-style: normal;
}

a {
  color: var(--colorWhite);
}

a:hover {
  text-decoration: line-through;
  color: var(--colorTertiary);
}

:hover {
  transition: .1s;
}

a span {
  display: none;
}

hr {
  border-top: 1px;
  margin: var(--spaceMedium);
  border-color: var(--colorPrimary);
  width: 100%;
}

.fas {
  font-size: var(--font-size-small);
}

.fa-arrow-up {
  display: none;
}

aside nav a {
  display: block;
  color: var(--colorTertiary) !important;
  line-height: 1.5;
  font-weight: var(--fontWeightMedium);
}

header {
  grid-column: 1 / 5;
  grid-row: 1;
  height: 90vh;
  display: grid;
  grid-template: repeat(4, calc(100% / 4))
    /* row height*/
    / repeat(4, calc(100vw /4))
    /* column */
  ;
  grid-gap: 0px;
  -ms-flex-line-pack: center;
  align-content: center;
  align-items: center;
  background-image: linear-gradient(to left bottom, hsla(5, 100%, 69%, 0.1), rgba(255, 80, 63, 0.5)), url(img/povilas-mecys.jpg);
  background-position: center;
  background-size: cover;
}

header ul {
  grid-column: 1 / 5;
  grid-row: 1;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: var(--spaceSmall);
  align-self: flex-start;
}

header h1 {
  grid-column: 1 / 5;
  grid-row: 2 / 4;
}

header nav {
  grid-column: 1 / 5;
  grid-row: 4;
  padding: var(--spaceSmall);
  display: flex;
  justify-content: space-between;
  align-self: flex-end;
  font-weight: var(--fontWeightMedium);
}

header div:nth-child(1) {
  grid-column: 2 / 3;
  grid-row: 4;
  width: 100%;
  height: 100%;
  background: hsla(5, 100%, 62%, 0.5);
}

header div:nth-child(2) {
  grid-column: 4 / 5;
  grid-row: 3;
  width: 100%;
  height: 100%;
  background: hsla(5, 100%, 62%, 0.25);
}

header div:nth-child(3) {
  grid-column: 1 / 2;
  grid-row: 2;
  width: 100%;
  height: 100%;
  background: hsla(5, 100%, 62%, .25);
}

main {
  grid-column: 1/ 5;
  grid-row: 2;
}

main section, aside div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

main figure {
  padding: calc(var(--spaceLarge)/3);
  margin: 0;
  width: var(--columnFour);
  display: flex;
}

main figure figcaption {
  color: var(--colorWhite);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  font-size: var(--font-size-x-small);
  font-weight: var(--fontWeightMedium);
}

main figure {
  background: var(--colorVigenary);
}

main figure figcaption strong {
  font-size: var(--font-size-medium);
}

main figure:nth-child(1) {
  background: var(--colorTertiary);
}

main figure:nth-child(2) {
  background: var(--colorSecondary);
}

main figure:nth-child(3) {
  background: var(--colorSecondary);
}

main figure:nth-child(4) {
  background: var(--colorSecondary);
}

main figure:nth-child(5) {
  background: hsla(var(--colorMain), 1);
}

main figure:nth-child(6) {
  background: hsla(var(--colorMain), 0.95);
}

main figure:nth-child(7) {
  background: hsla(var(--colorMain), 0.9);
}

main figure:nth-child(8) {
  background: hsla(var(--colorMain), 0.85);
}

main figure:nth-child(9) {
  background: hsla(var(--colorMain), 0.8);
}

main figure:nth-child(10) {
  background: hsla(var(--colorMain), 0.75);
}

main figure:nth-child(11) {
  background: hsla(var(--colorMain), 0.7);
}

main figure:nth-child(12) {
  background: hsla(var(--colorMain), 0.65);
}

main figure:nth-child(13) {
  background: hsla(var(--colorMain), 0.6);
}

main figure:nth-child(14) {
  background: hsla(var(--colorMain), 0.55);
}

main figure:nth-child(15) {
  background: hsla(var(--colorMain), 0.5);
}

main figure:nth-child(16) {
  background: hsla(var(--colorMain), 0.45);
}

main figure:hover {
  background: var(--colorTertiary);
}

main article {
  column-count: 3;
  column-rule: 1px dotted var(--colorTertiary);
  column-fill: balance;
  column-gap: var(--spaceMedium);
  padding: var(--spaceMedium);
}

main article a {
  color: var(--colorTertiary);
  display: block;
  margin-bottom: var(--spaceSmall);
  line-height: 1;
}

a[href="#Main"] {
  position: absolute;
  top: 0;
  display: block;
  background: hsla(0, 100%, 50%, 0.25);
  background-image: linear-gradient(to right, #9C4F96, #FF6355, #FBA949, #FAE442, #8BD448, #2AA8F2);
  text-align: center;
  width: 100%;
  color: var(--colorQuaternary);
  line-height: 1.5;
  font-size: var(--font-size-xx-small);
  text-transform: uppercase;
}

a[href="#Main"]:focus {
  color: white;
  background: black;
  display: block;
}

aside div:nth-child(odd) {
  background: var(--colorQuaternary);
}

aside {
  grid-column: 1/ 5;
  grid-row: 3;
}

aside div section.summary {
  width: var(--columnTwo);
}

footer section, aside div section {
  width: var(--columnFour);
  padding: var(--spaceMedium) var(--spaceSmall);
}

footer {
  grid-column: 1 / 5;
  grid-row: 4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(to left bottom, hsla(5, 100%, 69%, 1), rgba(255, 80, 63, 1));
  color: var(--colorWhite);
}

footer a {
  color: var(--colorWhite);
}

footer h2, footer h3, footer h5 {
  color: var(--colorSecondary);
}

footer h5 {
  margin: var(--spaceSmall) 0;
}

a .fa-arrow-up {
  position: fixed;
  bottom: var(--spaceSmall);
  right: var(--spaceSmall);
  background: var(--colorWhite);
  color: var(--colorPrimery);
  padding: var(--spaceXSmall);
}

span.ie {
  display: none;
}

@media only screen and (max-width: 850px) {
  #Experience section:first-child, #Responsibilities section:first-child, #Education section:first-child, #Awards section:first-child {
    width: var(--columnOne);
  }

  #Arts section {
    width: var(--columnTwo);
  }

  #Experience section, #Responsibilities section, #Education section, #Awards section {
    width: var(--columnThree);
  }

  aside div section {
    padding: var(--spaceSmall);
  }

  aside div {
    padding: var(--spaceLarge) var(--spaceSmall);
  }

  h1 {
    padding: var(--spaceLarge) var(--spaceSmall);
  }

  h2 {
    margin-bottom: 0;
    font-size: var(--font-size-xx-large);
  }

  h3 {
    font-size: var(--font-size-large);
  }

  main figure {
    width: var(--columnTwo) !important;
    ;
  }

  a[href="#Main"] {
    display: none;
  }

  header nav {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  #Experience section:first-child, #Responsibilities section:first-child, #Education section:first-child, #Awards section:first-child, #Arts section, #Experience section, #Responsibilities section, #Education section, #Awards section, #Main section {
    width: var(--columnOne);
  }

  h1 {
    font-size: 70%;
    margin: 0 var(--spaceLarge);
  }

  footer section {
    width: var(--columnTwo);
  }

  footer section:nth-child(3) ul {
    width: var(--columnOne);
    text-align: center;
    display: flex;
    justify-content: space-around;
  }

  footer section:nth-child(3), footer section:nth-child(4) {
    width: var(--columnOne);
    text-align: center;
    padding: var(--spaceSmall)
  }

  main figure {
    width: var(--columnOne) !important;
  }

  main article {
    column-count: 1;
    column-rule: 0px dotted var(--colorTertiary);
    column-fill: balance;
    column-gap: var(--spaceMedium);
    padding: var(--spaceMedium);
  }

  .fa-arrow-up {
    font-size: var(--font-size-small);
    color: black;
    position: fixed;
    bottom: 0;
    right: 0;
    background: white;
    padding: 2.5%;
    text-decoration: none;
    display: block;
  }
}