:root {
  --col-blue: rgba(1, 148, 226);
  --col-red: rgba(238, 0, 94);
  --col-yellow: rgba(255, 199, 0);  
}

*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --main-padding: 15px;
  --base-font-size: 16px;
}

.container > div {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0.5em;
}
header,main,footer {
    width: 100%;
    padding: 1em;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-align: center;
  color: dimgray;
}

header {
    background-color: white;
}
main {
    background-color: wheat;
    flex: 1;
}
footer {
    background-color: black;
    color: white;
}

footer > div {
    display: flex;
    justify-content: center;
}
section {
    margin: 0 auto;
}

section > div {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0.5em;
}

.col-2 {
    display: grid;
    grid-auto-flow: column;
    justify-content: stretch;
    justify-items: center;
    column-gap: 1em;
}
.social-item {
    transition: transform 180ms ease, filter 180ms ease;
    filter: drop-shadow(2px 2px 2px #000000);
}
.social-item:hover{
  transform: scale(1.08);
  filter: drop-shadow(5px 5px 15px #000000);
}

.contacts {    
    display: flex;
    justify-content: space-evenly;
    gap: 1em;
    flex-wrap: wrap;
}

.contacts > div {
    display: flex;
    align-items: center;
    gap: 1em;
}

.contact-item {
    width: 2em;
}

h1 {
    color: var(--col-red);
}
h2 {
    color: var(--col-blue);
}