User:Acme Gamer/common.css

display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ }
 * 1) myBtn {

background-color: #555; /* Add a dark-grey background on hover */ }
 * 1) myBtn:hover {

/* Style the Image Used to Trigger the Modal */ border-radius: 5px; cursor: pointer; transition: 0.3s; }
 * 1) myImg {


 * 1) myImg:hover {opacity: 0.7;}

/* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ }

/* Modal Content (Image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; }

/* Caption of Modal Image (Image Text) - Same Width as the Image */ margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; }
 * 1) caption {

/* Add Animation - Zoom in the Modal */ .modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; }

@keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} }

/* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }

.close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }

/* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } }