/* css styles */

:root {
  --shadow-color: 209deg 43% 25%;
  --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

body {
  --rstudio-purple: #9a4665;
  --rstudio-orange: #ee6331;
  --rstudio-green: #72994e;
  --rstudio-blue: #447099;
  --rstudio-teal: #419599;
  --rstudio-grey: #404041;

  background-color: var(--rstudio-blue);
  color: white;
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  justify-content: center;
  /* grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); */
}

header {
  grid-column: -1/1;
  /* grid-area: header; */
}

section {
  outline: 1px solid silver;
  padding: 10px;
}

section > h2 {
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
}

.link-card {
  display: grid;
  grid-template-areas: "logo right";
  grid-template-columns: 150px 185px;
  grid-template-rows: 175px;
  gap: 15px;
  padding: 10px;
  border-radius: 5px;
  align-items: center;
  justify-items: center;
  box-shadow: var(--shadow-elevation-medium);
  background-color: white;
  color: var(--rstudio-grey);
  font-size: 1.5rem;
}

.link-card > .right {
  /* outline: 1px solid salmon; */
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.link-card > img {
  width: 100%;
  display: block;
  grid-area: logo;
  filter: drop-shadow(2px 4px 8px hsl(0deg 0% 0% / 0.25));
  border-radius: 5px;
}
/* 
.link-card > .name {
  align-self: end;
}
.link-card > .links {
  align-self: start;
} */

.link-card * {
  padding: 0;
  margin: 0;
}

.link-card > .links a {
  margin-inline: 5px;
}

.link-card > * {
  flex-shrink: 0;
}

.links > p {
  display: contents;
}

.links {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}