body { background-color: black; color: white; font-family: sans-serif; margin: 3%; line-height: 1.4; } body, div, p, h1, h2, h3, h4, h5, h6, ul, ol{ padding: 2px; } body:hover, div:hover, p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover { border: solid yellow 1px; } body:active, div:active, p:active, h1:active, h2:active, h3:active, h4:active, h5:active, h6:active, li:active { border: solid lime 1px; } h1 { text-align: center; } .wrapper { margin: auto; /* display: flex; */ /* flex-flow: row wrap; */ /* flex-flow: row wrap; */ /* justify-content: center; */ /* align-items: flex-start; */ /* align-content: flex-start; */ /* height: calc(100vh); */ /* gap: 3%; */ } .wrapper div { min-width: 30ex; max-width: 100ex; margin: auto; } #footer { line-height: 1.2; font-size: 80%; } a:link { color: cyan; text-decoration: none; border: solid cyan 1px; padding: 1px; } a:visited { color: violet; text-decoration: none; border: solid violet 1px; padding: 1px; } a:hover { color: yellow; text-decoration: none; border: solid yellow 1px; padding: 1px; } a:active { color: lime; text-decoration: none; border: solid lime 1px; padding: 1px; } #nav ul { list-style-type: none; padding: 1em 0; text-align: center; /*************************************/ /* border-top: 2px solid black; */ /* border-bottom: 2px solid back; */ /*************************************/ } #nav ul li { display: inline; padding: 0 1.5em; border: none; } #nav ul li a { font-weight: bold; } #campaign { color: red; display: block; border: 1px solid red; transition: padding 1s, font-size 1s; } #campaign:hover{ font-size: 300%; transition: padding 1s, font-size 1s; animation-name: shake; animation-iteration-count: 1; animation-duration: 3s; padding: 10ex; } .alarm { color: red; } .alert { color: orange; } .good { color: lime; } @keyframes shake { 0%, 100% {transform: rotate(0deg);} 10%, 30%, 50%, 70%, 90% {transform: rotate(-3deg);} 20%, 40%, 60%, 80% {transform: rotate(3deg);} }