@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');

html, body: { margin: 0; padding: 0; }

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

input { border: none }

.text-primary { color: #8EBD38 }
.text-primary::placeholder { color: #8EBD38 }

.hidden { display: none }
.text-xl { font-size: 2rem }

.container {
    width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.font-display {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.link-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: .25rem 1rem;
    margin: .25rem -1rem;
    transition: box-shadow ease .1s, background ease .15s;
}

.link-row:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    background: rgba(0.05,0.1,0,.02);
}

.link-target {
    width: 40ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-key {
    width: 12ch;
}

.link-actions button {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    transition: background ease .3s;
}

.link-actions button:hover {
    background: rgba(0,0,0,.1);
}

.link-actions button:active {
    background: rgba(0,0,0,.2);
}