@font-face {
font-family: 'proclamate';
}

.goth{font-family:proclamate}

body {background-color:black;color:white;font-family:MS Gothic;font-size:10px}

.container {width:910px;height:600px;border:2px solid transparent;margin:auto;padding:3px;}
  
.container {  display: grid;
  grid-template-columns: 260px 250fr 400fr;
  grid-template-rows: 1fr;
  gap: 0px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "menu id fact";}

.menu { grid-area: menu;border:2px solid transparent}

.id { grid-area: id;border:1px solid white}

.fact { grid-area: fact;border:2px solid transparent}

.carnet {position: relative;
    background-image: repeating-linear-gradient(transparent 0px, transparent calc(1.5em - 1px), lightblue 1.5em, lightblue 1.5em), linear-gradient(to right, transparent 0px, transparent 2em, pink 2em, pink calc(2em + 1px), transparent 2em, transparent calc(2em + 2px), pink 2em, pink calc(2em + 3px), transparent 2em);
    line-height: 1.5;
    margin: 1em auto;
    padding: 1.5em 0.5em 1.5em 3em;
    width: 200px;
    border: 1px solid rgb(153, 153, 153);
    background-color:white;
    color:black}

.hover {
  margin:auto;
  border: 3px solid blue;
  width: 130px;
  height: 50px;
  text-align: center;
  border-radius: 5px;
  background-color:rgba(255,255,255,0.8)}
    
.hover:hover {border:4px solid blue;
  width:130px;
  height:52px;
  color:blue;
  text-align:center;
  border-radius: 5px;
  background-color:rgba(255,255,255,1)}

.act {font-size:20px;position:absolute;margin-top:-15px;padding:3px}  

.constellationBtn {
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    font-family: 'MS Sans Serif', sans-serif;
}

.constellationBtn:active {
    border: 2px inset #dfdfdf;
}

#planetButton:active {
    border: 2px inset #dfdfdf;
}

#closeBtn:active {
    border: 1px inset #dfdfdf;
}
  
  @media only screen and (max-width: 500px) {
.act {font-size:12px;position:absolute;margin-top:-15px;padding:3px}
}

/*webkits para las barras de win98*/
div::-webkit-scrollbar {
  width: 16px;
}

div::-webkit-scrollbar-track {
  background: #c0c0c0;
  border-left: 1px solid #808080;
  border-top: 1px solid #808080;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

div::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}

div::-webkit-scrollbar-thumb:hover {
  background: #d4d4d4;
}

div::-webkit-scrollbar-button {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  height: 16px;
}

div::-webkit-scrollbar-button:vertical:decrement {
  background: #c0c0c0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 6 L4 10 L12 10 Z" fill="black"/></svg>') center no-repeat;
}

div::-webkit-scrollbar-button:vertical:increment {
  background: #c0c0c0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 10 L4 6 L12 6 Z" fill="black"/></svg>') center no-repeat;
}

.cuaderno-hover {
  transition: transform 0.3s ease;
}

.cuaderno-hover:hover {
  transform: scale(1.1);
}