@font-face {
  font-family: 'nudica';
  src: url('assets/nudica.otf');
}

:root {
  --background: #000;
  --foreground: #F5F5EF;
  --grey: #5B5B59;
  --accent: #3E619E;
}

::selection {
  background-color: var(--foreground);
  color: var(--background);
}

::-moz-selection {
  background-color: var(--foreground);
  color: var(--background);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  min-height: 0;
}

*::-webkit-scrollbar {
  display: none;
}

body {
  font-family: 'Nudica', system-ui, sans-serif;
  overflow: hidden;
  color: var(--foreground);
  background: var(--background);
}

p {
  pointer-events: none;
}

h1, h2, h3, h4 {
  pointer-events: none;
}

a {
  color: var(--foreground);
}

a.as {
  cursor: pointer;
  user-select: none;
  overflow: visible !important;
  text-overflow: clip !important;
  flex: none !important;
  display: inline-block !important;
  letter-spacing: 0;
}

a.as::selection {
  background: transparent;
}

.joblink {
  cursor: pointer;
  color: var(--accent);
  text-decoration: none;
}

.joblink .prefix {
  display: inline-block;
  text-align: right;
  opacity: 0;
  color: var(--foreground);
  user-select: none;
  color: var(--accent);
}

.joblink:hover .prefix {
  opacity: 1;
}

.container {
  display: flex;
  justify-content: center;
  padding: 1rem;
  width: 100%;
  min-height: 100vh;
}

.column {
  width: min(100%, 640px);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.job-title {
  pointer-events: none;
}

.label {
  background-color: var(--foreground);
  color: var(--background);
}

@media (max-width: 640px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

    .info-block + .info-block {
    margin-top: 1rem;
  }
}

.hidden-text {
  color: var(--grey);
  margin-top: 1rem;
  text-align: justify;
}

.hidden-text::selection {
  background-color: var(--grey);
  color: var(--background);
}

.scramble-text {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.tab-label {
  cursor: pointer;
  color: var(--grey) !important;
  pointer-events: all;
  user-select: none;
}

.tab-label.active {
  color: var(--accent) !important;
}

.tab-label:not(.active):hover {
  color: var(--foreground) !important;
}

.link-entry {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  color: var(--accent);
  text-decoration: none;
}

.link-entry .prefix {
  display: inline-block;
  text-align: right;
  opacity: 0;
  color: var(--foreground);
  user-select: none;
  color: var(--accent);
}

.link-entry:hover .prefix {
  opacity: 1;
}

.blog-entry {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  color: var(--foreground);
  text-decoration: none;
}

.blog-entry.archived {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  color: var(--grey);
  text-decoration: none;
  pointer-events: none;
}

.blog-entry .prefix {
  display: inline-block;
  text-align: right;
  opacity: 0;
  color: var(--foreground);
  user-select: none;
  color: var(--accent);
}

.blog-entry:hover .prefix {
  opacity: 1;
}

.blog-entry .title {
  flex: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-entry .date {
  flex-shrink: 0;
  text-align: right;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}

.blog-entry,
.blog-entry:hover,
.blog-entry:focus,
.blog-entry:active {
  text-decoration: none;
}