/* Style Settings */
@import url("https://fonts.googleapis.com/css?family=Karla:400,700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css");
:root {
  --bgColor: #fff;
  --GNCgrey: #485959;
  --GNCred: #d54222;
  --accentColor: #d54222;
  --font: "Karla", sans-serif;
  --firstName: "Great Northern";
  --lastName: "Classics";
}

body {
background:
  radial-gradient(circle farthest-side at 0% 50%,#ffffff 23.5%,#0000 0)42px 60px,
  radial-gradient(circle farthest-side at 0% 50%,rgba(84, 84, 84, 0.02) 24%,#0000 0)38px 60px,
  linear-gradient(#ffffff 14%,#0000 0, #0000 85%,#ffffff 0)0 0,
  linear-gradient(150deg,#ffffff 24%,rgba(84, 84, 84, 0.02) 0,rgba(84, 84, 84, 0.02) 26%,#0000 0,#0000 74%,rgba(84, 84, 84, 0.02) 0,rgba(84, 84, 84, 0.02) 76%,#ffffff 0)0 0,
  linear-gradient(30deg,#ffffff 24%,rgba(84, 84, 84, 0.02) 0,rgba(84, 84, 84, 0.02) 26%,#0000 0,#0000 74%,rgba(84, 84, 84, 0.02) 0,rgba(84, 84, 84, 0.02) 76%,#ffffff 0)0 0,
  linear-gradient(90deg,rgba(84, 84, 84, 0.02) 2%,#ffffff 0,#ffffff 98%,rgba(84, 84, 84, 0.02) 0%)0 0 #ffffff;
background-size: 80px 120px;
background-color: var(--bgColor);
}

#userPhoto {
  width: 250px;
  /*height: 175px;*/
  display: block;
  margin: 35px auto 20px;
  /*border-radius: 50%;*/
}

#tagline {
  margin-bottom: 15px;
}

#tagline,
#contact {
  color: var(--GNCgrey);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  display: block;
  font-family: var(--font);
  width: 100%;
  text-align: center;
  text-decoration: none;
}

#contact a {
  color: var(--GNCgrey);
  text-align: center;
  text-decoration: none;
}

#links {
  max-width: 675px;
  width: auto;
  display: block;
  margin: 27px auto;
}
.link {
  display: block;
  border-radius: 25px;
  font-family: var(--font);
  text-align: center;
  margin-bottom: 20px;
  padding: 17px;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99);
}
.link:nth-child(even) {
  background-color: var(--GNCred);
  color: var(--bgColor);
  border: solid var(--GNCred) 2px;
}

.link:hover:nth-child(even) {
  background-color: var(--bgColor);
  color: var(--accentColor);
}
.link:nth-child(odd) {
  background-color: var(--GNCgrey);
  color: var(--bgColor);
  border: solid var(--GNCgrey) 2px;
}

.link:hover:nth-child(odd) {
  background-color: var(--bgColor);
  color: var(--GNCgrey);
}
h5 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--GNCgrey);
  font-family: var(--font);
  font-style: italic;
}
h1 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--GNCgrey);
  font-family: var(--font);
}
h6 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--GNCgrey);
  font-family: var(--font);
}
.atrib {
  text-align: center;
  display: block;
  font-size: 12px;
  margin-bottom: 20px;
  color: var(--GNCgrey);
  font-family: var(--font);
  margin-bottom: 20px;
  padding: 17px;
}

main {
  display: flex;
  align-content: center;
  justify-content: center;
}

svg {
  fill: white;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  width: min(500px, 100%);
  margin: 0 4vw;
}

#socialLinks {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
}

.socialLink {
  display: none;
  justify-content: center;
  align-items: center;

  padding: 10px;
  height: 28px;
  width: 28px;
  border-radius: 100%;
}

.socialLink svg,
.socialLink a {
  width: 1.5em;
  height: 1.5em;
  fill: white;
}

#Instagram {
  background-color: #e4405f;
}

#Facebook {
  background-color: #1877f2;
}

#Twitter {
  background-color: #1da1f2;
}

#YouTube {
  background-color: #ff0000;
}

#TikTok {
  background-color: #000000;
}

#LinkedIn {
  background-color: #0e76a8;
}

#WhatsApp {
  background-color: #25d366;
}

#Pinterest {
    background-color: #E60023;
}