/* starting variables for the site */
:root {
  --white: #f9faff;
  --platinum: #e3e4e8;
  --windsurfing: #32779b;
  --marina: #5a91c7;
  --gray: #9a9a9a;
  --onyx: #3c3d44;
  --charcoal: #343c47;
  --corners: 24px 0;
  --base-font-size: 1rem;
}
/* set the box sizing to border-box for layouts */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
/* Basic page set to our font size and font family. */
body {
  font-size: var(--base-font-size);
  font-family: "Inter", sans-serif;
  background-color: var(--platinum);
  color: var(--onyx);
}
/* make sure images don't exceed the width of the window */
img {
  max-width: 100%;
}

h1 {
  font-size: calc(var(--base-font-size) * 2.9);
  margin: 0;
}
h2 {
  font-size: var(--base-font-size);
  color: var(--windsurfing);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}
p {
  line-height: 1.5;
}

.social-icons {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  gap: 2rem;
}

.svg-icon {
  fill: var(--windsurfing);
  width: 36px;
  height: 36px;
}

.svg-icon:hover {
  fill: var(--marina);
}
.profile {
  border-radius: var(--corners);
}

.wrapper {
  display: grid;

  grid-template-columns: 1fr;

  @media (min-width: 760px) {
    grid-template-columns: 1fr 1fr;
  }
}