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

h1 {
  font-size: 20px;
  align-content: center;
}

h2 {
  text-align: center;
}

header {
  background-color: #6AFFEA;
  display: flex;
  grid-area: hd;
  border-bottom: solid 8px black;
  justify-content: space-around;
  padding: 4px;
}

.pib {
  display: flex;
}

.pib span {
  align-content: end;
}

header img {
  height: 55px;
  aspect-ratio: 1/1;
}

main {
  grid-area: mn;
  background-color: #69D486;
  padding: 20px;
}

aside {
  grid-area: aside;
  background-color: #6ECDCB;
  padding: 10px;
}

.aside {
  text-align: center;
  display: flex;
  justify-content: space-around;
}

.languages {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 0;
  gap: 4px
}

.lang {
  background-color: #17A5E1;
  padding: 4px;
  padding-right: 12px;
  padding-left: 12px;
  gap: 4px;
  display: flex;
  border-radius: 20px;
  box-sizing: content-box;
  align-items: center;
}

.lang img {
  width: 30px;
  aspect-ratio: 1/1;
}

.utilities {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 0;
  gap: 4px
}

.utility {
  background-color: #25A242;
  padding: 4px;
  padding-right: 12px;
  padding-left: 12px;
  gap: 4px;
  display: flex;
  border-radius: 20px;
  box-sizing: content-box;
  align-items: center;
}

.utility img {
  width: 30px;
  aspect-ratio: 1/1;
}

footer {
  grid-area: ft;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  align-items: center;
  width: 100%;
  border-top: solid 5px black;
  background-color: #008D79;
}

.sotialy {
  display: flex;
  align-items: center;
}

.sotialy a {
  color: black;
  text-decoration: none;
  width: 100%;
}

footer img {
  height: 20px;
  aspect-ratio: 1 / 1;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #69D486;
}

@media (width > 512px) {
  body {
    display: grid;
    grid-template:
      "hd hd hd hd" auto
      "aside mn mn mn" 1fr
      "aside mn mn mn" 1fr
      "ft ft ft ft" auto / 1fr 1fr 1fr 1fr;
  }

  .aside {
    display: block;
  }
}