.boxborder-svg:hover {
  box-shadow: 0 0 0 3px black;
  outline: dashed 3px gold;
  cursor: pointer;
}

#iAmHere {
  outline:none;
  border:0px;
  width:60%;
  margin:0px auto;
}


.example_b {
color: #fff !important;
text-transform: uppercase;
background: #60a3bc;
padding: 20px;
border-radius: 50px;
display: inline-block;
border: none;
}
.example_b:hover {
color: #232323 !important;
font-weight: 700 !important;
letter-spacing: 3px;
background: rgba(200,200,200,0.87);
-webkit-box-shadow: 0px 5px 40px -10px rgba(200,100,200,0.87);
-moz-box-shadow: 0px 5px 40px -10px rgba(200,200,200,0.87);
transition: all 0.3s ease 0s;
}

.blur {
  position: relative;
  display: inline-block; /* make the div not 100% */
}
/* the 'blur' effect */
.blur:before {
  content: '';
  background-color: white;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.blur img {
  display: block; /* remove bottom space */
}

.text{
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 3px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
}
.text-1{
stroke: #3498db;
text-shadow: 0 0 5px #3498db;
animation-delay: -1.5s;
}
.text-2{
stroke: #f39c12;
text-shadow: 0 0 5px #f39c12;
animation-delay: -3s;
}
.text-3{
stroke: #e74c3c;
text-shadow: 0 0 5px #e74c3c;
animation-delay: -4.5s;
}
.text-4{
stroke: #9b59b6;
text-shadow: 0 0 5px #9b59b6;
animation-delay: -6s;
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}

.fileslistbutton:hover {
  box-shadow: 3 3 3 10px black;
  outline: dashed 3px gold;  
}


rect:hover {
  box-shadow: 3 3 3 10px black;
  outline: dashed 3px gold;  
}

text:hover {
  box-shadow: 3 3 3 10px black;
  outline: dashed 3px gold;  
}

pre {
    font-family: 'Menlo', monospace;
    font-size: 15px;
    background-color: #f0f0f0;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #666;
}

blockquote {
    display: block;
    padding-left: 20px;
    border-left: 6px solid #df0d32;
    margin-left: -15px;
    padding-left: 15px;
    font-style: italic;
    color: #555;
}


/*paper style*/


/* https://coderwall.com/p/fw_b4q/notebook-paper-css
*/

.notebook-paper {

  padding: 37px 55px 27px;
  position: relative;
  border: 1px solid #B5B5B5;
  background: white;
  background: -webkit-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
  background: -moz-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
  background: linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -ms-background-size: 100% 30px;
  background-size: 100% 30px;
}


.notebook-paper::before {content:""; z-index:-1; margin:0 1px; width:706px; height:10px; position:absolute; bottom:-3px; left:0; background:white; border:1px solid #B5B5B5;}
.notebook-paper::after {content:''; position:absolute; width:0px; top:0; left:39px; bottom:0; border-left:1px solid #F8D3D3;}



/*https://codepen.io/bookcasey/pen/Finbf*/
/** {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*/
.printer-paper {
  width: 30em;
  height: auto;
  background: gray;
  margin: -3em auto;
  position: relative;
  line-height: 2em;
  /*font-family: monospace;*/
  padding: 2em 1em 0;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2JmZGJlYSIvPjxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYmZkYmVhIi8+PHN0b3Agb2Zmc2V0PSI1MiUiIHN0b3AtY29sb3I9IiNkMmU2ZjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #bfdbea), color-stop(1%, #ffffff), color-stop(50%, #ffffff), color-stop(50%, #bfdbea), color-stop(52%, #d2e6f0));
  background: -moz-linear-gradient(#bfdbea 1%, #ffffff 1%, #ffffff 50%, #bfdbea 50%, #d2e6f0 52%);
  background: -webkit-linear-gradient(#bfdbea 1%, #ffffff 1%, #ffffff 50%, #bfdbea 50%, #d2e6f0 52%);
  background: linear-gradient(#bfdbea 1%, #ffffff 1%, #ffffff 50%, #bfdbea 50%, #d2e6f0 52%);
  color: #141432;
  background-size: 100% 4em;
  -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.25));
  /*z-index: 10;*/
  /*-webkit-animation: print 3s cubic-bezier(0.75, 0.8, 0, -0.5);*/
}
.printer-paper::before, .printer-paper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2em;
  height: 100%;
  background: salmon;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMjQlIj48c3RvcCBvZmZzZXQ9IjI0JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjI0JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0 0;
  background: -moz-radial-gradient(rgba(0, 0, 0, 0) 24%, #ffffff 24%) 0 0;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0) 24%, #ffffff 24%) 0 0;
  background: radial-gradient(rgba(0, 0, 0, 0) 24%, #ffffff 24%) 0 0;
  background-size: 2em 2em;
  z-index: -1;
}
.printer-paper::before {
  left: 100%;
  border-right: 1px dashed rgba(210, 230, 240, 0.7);
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.printer-paper::after {
  left: -2em;
  border-left: 1px dashed rgba(210, 230, 240, 0.7);
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  padding: initial;
}

/*radio button for paper style switch*/


input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

label {
  color: #9a929e;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 20px 20px;
}

input[type=radio]:checked + label {
  color: #ccc8ce;
  background: #675f6b;
}

label + input[type=radio] + label {
  border-left: solid 3px #675f6b;
}

.radio-group {
  border: solid 3px #675f6b;
  display: inline-block;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
}

button {
  background-color: Transparent;
  background-repeat:no-repeat;  
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  color: white;
}
button:hover {
  color: #ccc8ce !important;
  font-weight: 700 !important;
  /*letter-spacing: 3px;*/
  background: rgba(150,150,150,0.87);
  /*-webkit-box-shadow: 0px 5px 40px -10px rgba(200,100,200,0.87);*/
  /*-moz-box-shadow: 0px 5px 40px -10px rgba(200,200,200,0.87);*/
  transition: all 0.3s ease 0s;
}

.stamp {
  transform: rotate(12deg);
  color: #D23;
  font-size: 3rem;
  font-weight: 700;
  border: 0.25rem solid #555;
  display: inline-block;
  padding: 0.25rem 1rem;
  text-transform: uppercase;
  border-radius: 1rem;
  font-family: 'Courier';
  /*-webkit-mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');*/
  -webkit-mask-size: 944px 604px;
  mix-blend-mode: multiply;
}
.is-shared {
  color: #D23;
  border: 0.5rem solid #D23;
  -webkit-mask-position: 13rem 6rem;
  transform: rotate(-14deg);
  border-radius: 0;
}