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;
}