body{ padding-top:30px; padding-left: 2px; padding-right: 2px; word-wrap: break-word; text-align:left; background-image: linear-gradient( to right,black, dimgrey, black); font-family: 'Cookie',cursive; color: white; font-size:22px; border: 1px white solid; border-radius: 10px }
a:link { color: deepskyblue; text-decoration: none; }
a:visited { color: mediumblue; text-decoration: none; }
a:hover { color: dodgerblue; text-decoration: none; }
a:active { color: blue; text-decoration: none; }
input:focus { }
p::first-letter { color: #ff0000; font-size: 45px; }
img { max-width: 100%;  height: auto; width: auto; transition: .5s ease;}
img:hover { opacity: 0.7; }
.frame { border: 1px solid #ddd;  border-radius: 4px; box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); }
ul {position: fixed; top: 0; width: 100%; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: red; float:left; }
li {float: left; }
li a {display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
li a:hover {background-color: #111;}
li { border-right: 1px solid #bbb;}
li:last-child { border-right: none;}
button {  display: inline-block;  padding: 15px 25px;  font-size: 24px;  cursor: pointer;  text-align: center;  text-decoration: none;  outline: none;  color: #fff;  background-color: #4CAF50;  border: none;  border-radius: 15px;  box-shadow: 0 9px #999; }​
button:hover {background-color: #3e8e41}​
button:active {  background-color: #3e8e41;  box-shadow: 0 5px #666;  transform: translateY(4px); }
.textborder {  color: yellow;  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
.redshadow {  text-shadow: 2px 2px 5px red;}
.div { border-radius:18px box-shadow: 10px 10px 5px grey;}
.boxshadow {  box-shadow: 10px 10px 5px grey;}
.tooltip {  position: relative;  display: inline-block;  border-bottom: 1px dotted black;}
.tooltip .tooltiptext {  visibility: hidden;  width: 120px;  background-color: black;  color: #fff;  text-align: center;  border-radius: 6px;  padding: 5px 0;  position: absolute;  z-index: 1;  bottom: 150%;  left: 50%;  margin-left: -60px; }
.tooltip .tooltiptext::after {  content: "";  position: absolute;  top: 100%;  left: 50%;  margin-left: -5px;  border-width: 5px;  border-style: solid;  border-color: black transparent transparent transparent; }
.tooltip:hover .tooltiptext {  visibility: visible; }
.container {  position: relative;  width: 50%; }
.image {  opacity: 1;  display: block;  width: 100%;  height: auto;  transition: .5s ease;  backface-visibility: hidden;}
.middle {  transition: .5s ease;  opacity: 0;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%) }
.container:hover .image {  opacity: 0.3;}
.container:hover .middle {  opacity: 1;}
.text {  background-color: #4CAF50;  color: white;  font-size: 16px;  padding: 16px 32px; }
.accordion {  background-color: #eee;  color: #444;  cursor: pointer;  padding: 18px;  width: 100%;  border: none;  text-align: left;  outline: none;  font-size: 15px;  transition: 0.4s;}
.active, .accordion:hover {  background-color: #ccc;}
.accordion:after {  content: '\002B';  color: #777;  font-weight: bold;  float: right;  margin-left: 5px;}
.active:after {  content: "\2212";}
.panel {  padding: 0 18px;  background-color: white;  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;}
.circlegrad {background-image: radial-gradient(black 30%, red 70%); }