html {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
  
html body {
    margin: 0;
    background: #2980b9;
    background: linear-gradient(to right, #2980b9, #2c3e50);
    font-family: 'Montserrat', sans-serif;
}

.heading {
    color: #fff;
    text-align: center;
}

.heading h1 {
    margin-bottom: 3rem;
    font-weight: 300;
    position: relative;
}

.heading h1:after {
    content: '';
    height: 2px;
    width: 2rem;
    position: absolute;
    left: 50%;
    bottom: -1rem;
    transform: translateX(-50%);
    background-color: #fff;
}

.container {
    background-color: #fff;
    padding: 2rem;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.1);
}

.container .nav {
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 0 -3rem 2rem;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    position: relative;
}

.container .nav:before,
.container .nav:after {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    top: 0;
    border: 0.75rem solid transparent;
    border-bottom: 0.75rem solid #f2f0f0;
    transform-origin: center;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    z-index: -1;
}

.container .nav:before {
    left: 0;
    transform: translateY(-0.45rem) rotate(135deg) translateX(-0.4rem);
}

.container .nav:after {
    right: 0;
    transform: translateY(-0.45rem) rotate(-135deg) translateX(0.4rem);
}

.container .nav a {
    display: inline-block;
    margin: 0 3rem;
    font-size: 2rem;
    color: #2980b9;
    opacity: 0.7;
    transition: 0.25s;
}

.container .nav a:hover {
    opacity: 1;
}

.container .list .num {
    padding: 0.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: 0.25s;
}

.container .list .num:nth-child(0):before {
    content: '0';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(1):before {
    content: '1';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(2):before {
    content: '2';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(3):before {
    content: '3';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(4):before {
    content: '4';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(5):before {
    content: '5';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(6):before {
    content: '6';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(7):before {
    content: '7';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(8):before {
    content: '8';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num:nth-child(9):before {
    content: '9';
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    width: 2rem;
    opacity: 0.05;
    transition: 0.25s;
}

.container .list .num h3 {
    position: relative;
    left: -1.5rem;
    color: #3d3d3d;
    font-size: 0.85rem;
    transition: 0.25s;
}

.container .list .num:hover {
    background-color: #fafafa;
    cursor: pointer;
}

.container .list .num:hover:before {
    opacity: 0.2;
}

.container .list .num:hover h3 {
    left: 1rem;
}

.message {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin-top: 2rem;
}