@viewport { width: device-width; zoom: 1; } /* * { border: 1px solid; } /* header { background: #800000; } nav { background: #008000; } section { background: #000080; } /**/ * { box-sizing: border-box; //margin: 0; //padding: 0; } html { background: rgb(0,0,0); color: rgb(160,160,160); font-family: sans; } body { margin: 0 auto; position: relative; } section { display: none; min-height: 100vh; padding: 1em 1vw 1vh 1vw; position: absolute; top: 0; width: 100%; } #home,section:target { display: block; } nav { display: flex; flex-wrap: wrap; } a { text-decoration: none; } nav a { 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); font-weight: bold; padding: .25em .5em; //transition: all .5s; } nav a.active { background: linear-gradient(rgba(128,128,128,1), rgba(128,128,128,0)); } a { color: rgb(0,192,192); } a:hover { color: rgb(192,0,0); } a:visited { color: rgb(0,160,160); } .cards { display: flex; flex-wrap: wrap; } .card { background-color: #101010; border: 1px solid; border-radius: .5em; color: #404040; margin: .1em; padding: .5em .6em .5 em .25em; vertical-align: top; }