body {
    background-color: #223442;
    color: #d5e9f9;
    font-family: 'Inconsolata', Arial, Helvetica, sans-serif;
    font-size: 24px;
    max-width: 600px;
    margin: 20vh auto;
    text-align: center;
}

h1 {
    font-size: 2.4rem;
}

h1, p, .icon-row {
    line-height: 1.0;
    margin: 1.0rem; 
}

a, a:visited {
    color: #7ec2f6;
}

a:hover {
    color: #ababf4;
}

.icon-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

i {
    padding: 1.0rem;
}

.wiggly {
    animation: shake 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
  
@keyframes shake {
  0% { transform:  rotate(0deg); }
  12% { transform:  rotate(-25deg); }
  27% { transform: rotate(25deg); }
  37% { transform: rotate(-15deg); }
  44% { transform: rotate(10deg); }
  47% { transform: rotate(0deg); }
}

.visually-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.visually-hidden:focus {
    clip: auto;
    height: auto;
    overflow: auto;
    position: absolute;
    width: auto;
}