@viewport { width: device-width; zoom: 1; } html { background: rgb(0,0,0); color: rgb(160,160,160); font-family: sans; } .tabs { position: relative; } .tab { float: left; } .tab input { display: none; } .tab label { background: linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); border-color: rgb(128,128,128); border-radius: .5em; border-style: solid; border-width: 1px 1px 0 1px; color: rgb(128,128,0); cursor: pointer; display: flex; font-weight: bold; padding: .5em 1em; text-decoration: underline; transition: all .5s; } .tab label:hover { font-size: 1.1em; } .tab_content { display: none; left: 0; position: absolute; } input:checked ~ label { background: linear-gradient(rgba(128,128,128,1), rgba(128,128,128,0)); } input:checked ~ label ~ .tab_content { display: block; } a { color: rgb(0,192,192); } a:hover { color: rgb(192,0,0); } a:visited { color: rgb(0,160,160); } table { empty-cells: hide; } th,td { border-radius: .2em; } th { background: rgb(64,64,64); color: rgb(128,128,0); } td { background: rgb(48,48,48); border: 1px solid; border-color: rgb(192,192,192); text-align: center; }