body {
  display: flex;
  align-items: center;
  scroll-behavior: smooth;
  flex-flow: column;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-height: 100vh; }

.container {
  background: #fff;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  align-items: unset;
  flex-flow: row;
  flex-wrap: wrap;
  transition: 0.2s ease-in;
  opacity: 1; }
  .container .row {
    display: flex;
    align-items: center;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 50vh;
    width: 100%;
    gap: 2%;
    position: relative; }
    .container .row .box {
      width: clamp(300px, 400px, 90vw);
      height: clamp(300px, 400px, 90vw);
      transform: translateY(0);
      box-shadow: 0px 0 50px 0px rgba(0, 0, 0, 0.5);
      border-radius: 0.5rem;
      display: flex;
      overflow: hidden;
      transition: 0.2s ease-in;
      position: relative;
      margin-bottom: 1rem;
      margin-top: 1rem; }
      .container .row .box::after {
        transition: 0.2s ease-in;
        transform: scale(1) rotate(0);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat; }
      .container .row .box.bg1::after {
        background-image: url("https://xn--zabaaganionemiejsce-8fd.pl/cc-sjp.png"); }
      .container .row .box.bg2::after {
        background-image: url("https://xn--zabaaganionemiejsce-8fd.pl/sggw.png"); }
      .container .row .box.bg3::after {
        background-image: url("https://xn--zabaaganionemiejsce-8fd.pl/github.png"); }
      .container .row .box.bg4::after {
        background-image: url("https://xn--zabaaganionemiejsce-8fd.pl/linkedin.png"); }
      .container .row .box.bg5::after {
        background-image: url("https://xn--zabaaganionemiejsce-8fd.pl/wos.png"); }
      @media all and (min-width: 1000px) {
        .container .row .box:nth-of-type(odd) {
          transform: translateY(2rem); } }
      .container .row .box a {
        font-family: Lato, sans-serif;
        text-decoration: none;
        font-size: 1.3rem;
        letter-spacing: 0.1rem;
        line-height: 1.5rem;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        z-index: 1;
        color: transparent;
        transition: 0.5s ease-in-out transform, 0.5s ease-in-out 0.6s color, 0.5s ease-in-out 0.6s opacity;
        flex-flow: column;
        transform: translateX(-100%); }
        .container .row .box a * {
          opacity: 0; }
        .container .row .box a::before {
          background: #00390ad9;
          bottom: -50%;
          left: -50%;
          transition: 0.5s ease-in-out;
          width: 0%;
          height: 0%;
          border-radius: 50%;
          position: absolute;
          content: "";
          z-index: 1;
          overflow: hidden; }
        .container .row .box a b {
          color: transparent;
          transition: 0.5s ease-in-out transform, 0.5s ease-in-out 0.6s color; }
        .container .row .box a .content {
          font-size: 1.6rem;
          line-height: 1.8rem;
          text-align: center; }
    @media all and (min-width: 1228px) {
      .container .row .box a .content {
        font-size: 1.6vw;
        line-height: 1.8vw; }
      .container .row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 0.52vw;
        height: 0;
        background: #00390ad9;
        transition: 0.5s ease-in-out;
        transition-delay: 0.2s; }
      .container .row:hover::before {
        bottom: 0;
        top: unset;
        height: 100%; }
      .container .row > .box {
        width: clamp(300px, 26vw, 90vw);
        height: clamp(300px, 26vw, 90vw); }
      .container .row.smallBoxes > .box {
        width: clamp(16.9vw, 16.9vw, 90vw);
        height: clamp(16.9vw, 16.9vw, 90vw); }
      .container .row .box a b {
        font-size: 2vw; }
      .container .row.smallBoxes > .box .content {
        font-size: 0.9vw;
        line-height: 1.1vw;
        min-height: 50%;
        text-align: center; }
      .container .row.smallBoxes {
        gap: 1%;
        min-height: 20vh; }
        .container .row.smallBoxes .box a b {
          font-size: 1.5vw !important; }
      .container .row .box {
        transition-delay: 0.7s; }
      .container .row .box:hover {
        transition-delay: 0s; } }
    .container .row:hover .box, .container .row:focus-within .box {
      opacity: 1;
      filter: grayscale(0%) !important; }
  .container:hover .box, .container:focus-within .box {
    opacity: 0.6;
    transform: scale(0.9) !important;
    transition-delay: 0;
    filter: grayscale(100%); }
  .container .box:hover,
  .container .box:focus-within {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition-delay: 0 !important;
    filter: grayscale(0) !important; }
    .container .box:hover::after,
    .container .box:focus-within::after {
      transform: scale(1.3) rotate(5deg);
      filter: grayscale(0) !important; }
    .container .box:hover a,
    .container .box:focus-within a {
      color: #eee;
      transform: translateX(0);
      opacity: 1; }
      .container .box:hover a *,
      .container .box:focus-within a * {
        display: block;
        opacity: 1; }
      .container .box:hover a b,
      .container .box:focus-within a b {
        color: #fff; }
      .container .box:hover a .content,
      .container .box:focus-within a .content {
        width: 80%; }
      .container .box:hover a mark,
      .container .box:focus-within a mark {
        opacity: 1;
        color: #fff;
        min-height: 0.8vw; }
      .container .box:hover a::before,
      .container .box:focus-within a::before {
        z-index: -1;
        width: 200%;
        height: 200%; }

.row .box a mark {
  font-family: Lato, sans-serif;
  text-decoration: none;
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  line-height: 1.5rem;
  margin-top: 1.2vw;
  background: none;
  position: relative;
  color: transparent;
  transition: 0.2s ease-in opacity;
  transition-delay: 0.6s;
  text-align: center; }
  @media all and (min-width: 1024px) {
    .row .box a mark {
      font-size: 1vw; } }
  .row .box a mark::before {
    transition: 0.3s ease-in;
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #fff; }
  .row .box a mark:hover::before {
    width: 100%;
    left: 0;
    right: unset; }

.box:focus-within a mark::before {
  width: 100%;
  left: 0;
  right: unset;
  bottom: 0; }

.row.smallBoxes {
  padding: 2rem 0;
  background: #ededed; }
  .row.smallBoxes .box a b {
    font-size: 1.5rem; }
  .row.smallBoxes .box a .content {
    font-size: 1.2rem; }

.row .box a b {
  font-size: 2rem; }

.row.smallBoxes .box a mark {
  margin-top: -2rem; }

.box {
  animation: 1s ease-in start; }

@keyframes start {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.box:focus-within {
  border: 3px solid #ffe300; }

.box {
  outline: none;
  z-index: 3; }
  .box * {
    outline: none; }

footer {
  position: sticky;
  bottom: 0vh;
  left: 0;
  background: #222;
  color: #eee;
  padding: 2rem;
  width: 100%;
  z-index: -2;
  margin: 0;
  box-sizing: border-box; }
  footer::first-letter {
    color: #2196f0;
    font-weight: bold; }
  @media all and (min-width: 1024px) {
    footer {
      font-size: 1vw; } }