body {
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(6,100,160,1) 100%);
  transition: background 1s ease-in-out; /* transición suave */
}

body.fade {
  background: linear-gradient(180deg, rgba(250,250,255,1) 0%, rgba(220,220,220,1) 100%);
  border: 30px solid white;
  border-collapse: collapse;
}

.btn{ background-color:#000; 
    font-weight:bold; 
    color:#DDD; 
    border:1px solid #333; 
    height:26px; 
    border-radius:10px; 
    font-size:14pt; 
}
pre{
    color:#222;
    margin:8px;
    border-radius:10px; border: 1px solid #BBBBBB;
    background: url('img/bg4.png') repeat scroll left 0px transparent; 
    padding: 5px;
    text-shadow: 3px -2px 3px rgb(250, 250, 250);
    /*font-family:Verdana;*/
}

A:link {text-decoration: none; color:#BDF }
A:visited {text-decoration: none; color:#CEF}
A:active {text-decoration: none; color:#9CC}
A:hover {text-decoration: none; color: #BDF;	cursor:pointer}

.titulo{text-shadow: 3px 2px 3px rgb(140, 170, 200);font-family:Verdana;color:rgb(80,130,170);}
.titulo1{text-shadow: 3px 2px 3px white, -1px -1px #FFF;font-family:Verdana;color:#3ba6f7;}
.titulo2{text-shadow: 3px -2px 3px rgb(60, 60, 60);font-family:Verdana;color:#E0E0E5;}
.titulo3{text-shadow: 3px -2px 3px rgb(120, 150, 250);font-family:Verdana;color:rgb(40,120,170);}

.glass1{ background-image: linear-gradient(0deg, transparent 0%, rgba(200, 200, 255, .3) 10%, rgba(255, 255, 255, .9) 90%, transparent 100%); border-radius:10px;border: 1px solid #AAA; }
.glass2{ background-image: linear-gradient(0deg, transparent 0%, rgba(200, 200, 255, .3) 30%, rgba(230, 230, 250, .1) 70%, transparent 100%);}

.efecto1{ text-shadow: 1px 1px #666, 2px 2px #86D6D3, 3px 3px #666, 4px 4px #86D6D3; color: #ccc;}
.efecto2{ text-shadow: 1px 1px white, -1px -1px #333; color: #ddd; }
.efecto3{ text-shadow: -1px 0 #06F, 1px 0 #06F, 0 1px #06F, 0 -1px #06F; color: #BDF;}

#conte div{ float:left; 
            margin: 8px;
            padding: 4px;
            text-align:center;
            }