* {
   box-sizing: border-box;
 }
 
 :root {
   --background: #cccccc;
   --primary: #eb2426;
   --secondary: #cccccc;
   --card-size: 350px;
   --card-small-size: 300px;
 }
 
 body {
   height: 100vh;
   margin: 0;
   display: grid;
   place-items: center;
   padding: 1rem;
   background: var(--background);
   font-family: 'Source Code Pro', monospace;
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 .card {
   width: calc(var(--card-size) * 1.586);
   height: var(--card-size);
   border-radius: 0.75rem;
   box-shadow: 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
   background: black;
   display: grid;
   grid-template-columns: 40% auto;
   color: white;
   align-items: center;
   will-change: transform;
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 @media only screen and (max-width: 420px) {
  .card {
    width: var(--card-small-size);
    height: calc(var(--card-small-size) * 1.586);
    border-radius: 0.75rem;
    box-shadow: 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
    background: black;
    display: grid;
    grid-template-columns: auto;
    color: white;
    align-items: center;
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
 }
 .card:hover {
   transform: scale(1.1);
   box-shadow: 0 32px 80px 14px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(0, 0, 0, 0.3);
 }
 
 .card-details {
   padding: 1rem;
 }
 
 .name {
   font-size: 1.25rem;
 }
 
 .occupation {
   font-weight: 600;
   color: var(--primary);
 }
 
 .card-avatar {
   display: grid;
   place-items: center;
 }
 
 .logo {
   width: 65%;
 }
 @media only screen and (max-width: 420px) {
  .logo {
    width: 35%;
    padding-top: 2em;
  }
 }
 
 .card-about {
   margin-top: 1rem;
   display: grid;
   grid-auto-flow: column;
 }

 .item {
   display: flex;
   flex-direction: column;
   margin-bottom: 0.5rem;
 }
 .item .value {
   font-size: 1rem;
 }
 .item .label {
   margin-top: 0.15rem;
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--primary);
 }
 
 .skills {
   display: flex;
   flex-direction: column;
   margin-top: 0.75rem;
 }
 .skills .label {
   font-size: 1rem;
   font-weight: 600;
   color: var(--primary);
 }
 .skills .value {
   margin-top: 0.15rem;
   font-size: 0.75rem;
   line-height: 1.25rem;
 }

 a {
   color: var(--primary);
 }
 a:hover {
   color: var(--secondary);
 }
 
 #content a {
   color: #444;
 }
 #content a:hover {
    color: var(--primary);
 }

 table {
  border-collapse: collapse;
 }

 table thead tr {
  border-bottom: 1px solid #444;
 }

 table tbody tr {
  border-bottom: 1px solid #777;
 }

 table tbody tr:nth-last-child(1) {
  border: none;
 }

 table thead th {
  text-align: left;
  font-weight: bold;
 }

 table th:nth-child(1) {
  min-width: 7rem;
 }

 table th {
  padding: 0.8rem 0.8rem 0.4rem 0;
  vertical-align: top;
 }

 table td {
  padding: 0.8rem 0.8rem 0.8rem 0;
  vertical-align: top;
 }

 table + h3 {
  margin-top: 1.25rem;
 }

 .error {
  width: 250px;
  height: 100px;
  box-shadow: 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
  background: #444;
  display: grid;
  grid-template-columns: 40% auto;
  color: white;
  align-items: center;
 }

 .error-icon {
  display: grid;
  place-items: center;
 } 

 .error-img {
  filter: grayscale(100%) invert(48%);
  width: 65%;
}

.error-caption {
  display: grid;
}