:root {
  --color-link-green: #2E6144;
  --link-img: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABmJLR0QA/wD/AP+gvaeTAAABF0lEQVQ4jdXUsS5EQRTG8d8iRKMgCqql0IjCC8gmSrUHoJBtdIpFJDoSL7A0XsI7qJQSDZpNlAoaEUuxU4zN3Ltzb7dfcjK595zzP19mJsO4qVGjZx1LBbkHvNc1c4vfgmjVhcIiVqO4ToGnEo3b2MRkItfHDV7CdwcH6KJd5uYqTO7hORH7UW0n1HbQHHYcazk4OiybnIAaBd4KyZWK0JHgVkg2K0LnsWBwiGt1wEchfxr928NZiZGR4BQUXnGegqWu27DaBrflGJcZ9dngu7B2c6EwkVHTqwrNBddSDP4K63SF/pmo75/iPX7EJ05wge8SYAM7Bs/nfY6DXXwofhbj6AcDhZOHNYcNzJYY+MET3nLcjof+ALOGTHZ5Dcx5AAAAAElFTkSuQmCC);
  --link-img-green: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABmJLR0QA/wD/AP+gvaeTAAABwklEQVQ4jdXUsWsTYRjH8e/z3nlFEQe3ioNQt5LETs7BBBVnJ4cmKdROLgYxUlykRMnoUg6JxUH8A+ogXqGbU4Y0FJw6tXUUUbDh7t7HQRKidzF3bn3gXe593g8/Ht734LSV5D1QWi4vWseZT908mesN3r7/CuDmj2KaotTStow3LAO7ACava8R7pMLCaAn4aX2JxMXl6g2MLqmKkwyr1rihP/CDA4BSo/JYYRVlE2FtKlysVzqgTeBIRIcJ2LLR84NvY1Rpi9ASdd9ZonR4qVG9FKs+FOVBfyt4+a9xTKL9bvD8Wu3Wlb97xjOORK4Coq7ZzoNO6xvDTmwNgImM5kEXV25ePLHhdwFfrR6PejNft2K90lSlDayP0EK9UjcaXd5/s/MMuJ+aeBYKdID1vdfBxui7oE+V5O3JBJca1TWgI0JrEp1VM0ehJtwWe4Z+9+NmVjQTvPdq9xDIhcJ/POnccGx+vzS1oZf1sKrMockXChOjODf09n964Q91zJNio9xWnHAqGFsxRu4A80blU1rPH//jQq16V0S7wPlMgZUXg62gNRMGuH7v9oWhGxViR89OEw0au677ued/+JIhwCmpX8Jlsi/3clWpAAAAAElFTkSuQmCC);
  --link-img-white: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABmJLR0QA/wD/AP+gvaeTAAABL0lEQVQ4jdWUsS4EURSGv4MQjYIoqJZCIwovIJso1R6AQrbRbTGIREeyL7A0XsI7qJQSDZpNlAoaEfMr9kQGd+7eO93+yc1k7jn/d86cmTswbrJcg6R1YKkmfGdmr406kXSterUbQR28KGm1si5D4KmAcRvYBCYD3BK4MrMnzy2AA6APdGLd9LzyQNJjYO1XcgvPLSS1akchaVlSKekwYRw/UL+Pgrc8uJIDTQG3PdjKhM5LWvCXuJYNltT1+Ullb0/SaewJo+AQ1PefJZ2FeP8+twC0A/SAIzO7GJWfDAZuAMysnwpNApvZgOEByNJErqEJ+MOv0xn+mYrvl6qjuAfegWNJ58BnBGjADsPf5+3I8pJ2Jb0pTaU3UFv5L3wO2ABmIz18AQ9m9jKy27HRN4tZZX+tY4KHAAAAAElFTkSuQmCC);
}

a:focus {
  outline: 2px solid #000000;
  border-radius: 0.2rem;
}

.desc {
  max-width: 49rem;
  white-space: pre-line;
}

.desc,
.contact {
  padding-bottom: 2.5rem;
}

.contact {
  flex: 1 1 auto;
  flex-direction: column;
  display: flex;
  width: 100%;
  max-width: 70rem;
  align-items: center;
}

.contact__list {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}

.contact__item {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  list-style: none;
  padding-left: 1rem;
}

.contact__item-label {
  padding-right: 0.5rem;
}

.contact__item-link {
  margin-top: 1rem;
}

.contact__item-link,
.social__item-link {
  color: #ffffff;
  text-decoration: none;
}

.contact__item-link,
.contact__item-link:visited {
  color: #000000;
}

.contact__item-link:hover,
.contact__item-link:focus {
  color: var(--color-link-green);
  text-decoration: underline;
}

.contact__item-link[target="_blank"] .text::after,
.social__item-link[target="_blank"] .text::after {
  content: var(--link-img);
  vertical-align: middle;
}

.contact__item-link[target="_blank"]:hover .text::after,
.contact__item-link[target="_blank"]:focus .text::after {
  content: var(--link-img-green);
}

.social__item-link[target="_blank"]:hover .text::after,
.social__item-link[target="_blank"]:focus .text::after {
  content: var(--link-img-white);
  vertical-align: middle;
}

footer {
  flex: 0 1 6rem;
  align-items: center;
  background-color: #4a9c6f;
  padding: 1rem;
  box-shadow: rgba(60, 64, 67, 0.3) 0px -1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px -2px 6px 2px;
}

.social {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  max-width: 32rem;
}

.social__item {
  display: flex;
  justify-content: center;
}

.social__item-link {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.social__item img {
  height: 2rem;
  width: 2rem;
  padding: 0.75rem;
  background-color: #eeeeee;
  border-radius: 50%;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.social__item:hover img,
.social__item-link:focus img {
  background-color: #ffffff;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.social__item-link:hover .text,
.social__item-link:focus .text {
  color: #ffffff;
}

.social__item-link,
.social__item-link:visited {
  color: #000000;
}

@media (max-width: 768px) {
  .desc,
  .contact {
    padding-bottom: 1.5rem;
  }

  .contact__list {
    flex-direction: column;
  }

  .contact__item {
    flex: 1 0 auto;
    padding-bottom: 1rem;
  }
}