key.min.css

body{max-width:700px;background-color:rgba(0,51,102,0.8);color:#fff}body div{margin:10px 20px;display:flex;flex-flow:column nowrap;gap:10px;border:1px solid darkgrey;width:680px;height:250px}body div nav{display:flex;flex-flow:row nowrap;gap:5px;justify-content:space-around;align-items:center}body textarea{width:680px;height:320px;margin:10px 20px;display:flex;flex-flow:row nowrap;border:1px dotted #cccccc;color:red;font-size:1.8em}body select{height:40px;font-size:1.1em;font-weight:600;color:red;border-radius:5px;box-shadow:0 0 2px white}body input [type="radio"]:checked{visibility:inherit;color:#38da38}button{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:2px;width:40px;height:40px;padding:2px;font-size:1em;color:black;background:#069;background:linear-gradient(to bottom, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.5));border:none;border-radius:5px;box-shadow:0 0 2px white;transition-property:box-shadow, background, transform;transition-timing-function:ease-in-out;transition-duration:.5s}button b{font-size:.7em}article{display:flex;flex-flow:row nowrap;width:680px;gap:40px;margin-left:20px}article .init{width:100px}.focus{background:linear-gradient(to bottom, rgba(0,102,153,0.5) 40%, rgba(255,255,255,0.5));box-shadow:inset 4px 4px rgba(10,10,10,0.1);transform:scale(1.5)}h2,p{margin:15px 25px}footer{color:#0c066c;height:250px;text-shadow:1px -1px 1px #65747e;display:inline-flexbox;position:static;background:#069;background:linear-gradient(to bottom, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.5));margin-left:20px}footer ul li{list-style:none;background-image:url(./images/bullet.png);background-repeat:no-repeat;padding-left:30px;margin-bottom:10px;background-position:10px 4px;margin-left:35px;margin-right:60px}footer ul li a{text-decoration:none;color:#0c066c}footer ul li a :link{color:#0c066c}footer ul li a :visited{color:#0c066c}footer ul li a :hover{color:#0c066c;text-shadow:1px -1px 1px #65747e}