@font-face {
  font-family: "Inter";
  src: url(./assets/fonts/Inter-Regular.ttf);
}

* {
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Inter";
}

body {
  margin: 60px 90px;
  background-color: #222;
}

@media (max-width: 650px) {
  body {
    margin: 40px;
  }
}

@media (max-width: 450px) {
  body {
    margin: 50px 30px;
  }
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
}

@media (min-height: 540px) {
  main {
    height: calc(100vh - 120px);
  }
}

header {
  text-align: center;
}

header h1 {
  color: #aaa;
}

header p {
  max-width: 600px;
  margin: auto;
  color: #666;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 0px auto;
  gap: 15px;
}

.button {
  height: 40px;
  border: none;
  color: #aaa;
  background-color: #333;
  transition: all 0.15s;
  border-radius: 40px;
  padding: 0px 18px 0px 0px;
  display: flex;
  cursor: pointer;
  align-items: center;
  outline: 2px solid transparent;
  text-decoration: none;
  gap: 10px;
}

.button::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #444;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px auto;
  transition: all 0.15s;
}

[data-icon="deshan"] {
  --color-primary: #0066cc;
  --color-secondary: #2e3a45;
}

[data-icon="deshan"]::before {
  background-image: url(./assets/icons/deshan.png);
}

[data-icon="github"] {
  --color-primary: #000000;
  --color-secondary: #1e1d1d;
}

[data-icon="github"]::before {
  background-image: url(./assets/icons/github.png);
}

[data-icon="facebook"] {
  --color-primary: #1877F2;
  --color-secondary: #283343;
}

[data-icon="facebook"]::before {
  background-image: url(./assets/icons/facebook.png);
}

[data-icon="linkedin"] {
  --color-primary: #0077B5;
  --color-secondary: #34424a;
}

[data-icon="linkedin"]::before {
  background-image: url(./assets/icons/linkedin.png);
}

[data-icon="youtube"] {
  --color-primary: #FF0000;
  --color-secondary: #543030;
}

[data-icon="youtube"]::before {
  background-image: url(./assets/icons/youtube.png);
}

[data-icon="x"] {
  --color-primary: #000000;
  --color-secondary: #1e1d1d;
}

[data-icon="x"]::before {
  background-image: url(./assets/icons/x.png);
}

[data-icon="instagram"] {
  --color-primary: #E1306C;
  --color-secondary: #502936;
}

[data-icon="instagram"]::before {
  background-image: url(./assets/icons/instagram.png);
}

[data-icon="reddit"] {
  --color-primary: #FF4500;
  --color-secondary: #573f36;
}

[data-icon="reddit"]::before {
  background-image: url(./assets/icons/reddit.png);
}

.button:hover {
  background-color: var(--color-secondary);
  outline: 2px solid var(--color-primary);
  color: #eee;
}

.button:hover::before {
  background-color: var(--color-primary);
  box-shadow: 0px 0px 0px 1px var(--color-primary);
}

footer {
  display: flex;
  justify-content: center;
  gap: 20px;
}

footer a {
  color: #06c;
  font-size: 15px;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}