html {
    font-family: sans-serif;
}

h1 {
    text-align: center;
}

div.container {
    display: flex;
    flex-wrap: wrap;
}

div.center {
    margin: auto;
    max-width: 500px;
}

a.color {
    display: block;
    width: calc(100vw - 24px);
    height: 100px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    line-height:100px;
    font-size:18px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 16px;
    border-radius: 12px;
}

a.red {
    background-color: #FF0000;
}
a.green {
    background-color: #00FF00;
}
a.blue {
    background-color: #0000FF;
    color: #FFFFFF;
}
a.cyan {
    background-color: #00FFFF;
}
a.yellow {
    background-color: #FFFF00;
}
a.orange {
    background-color: #FF8000;
}
a.purple {
    background-color: #FF00FF;
}
a.white {
    background-color: #FFFFFF;
}
a.black {
    background-color: #000000;
    color: #FFFFFF;
}