Sirius Application (CSS)

.sirius{
  --bckg-1: #f3f3f3;
  --bckg-2: #f1f1f1;
  --border: #ccc;
  --accent-1: #651911;
  --accent-2: #48170f;
  --txt: #555;
}
.sirius{
  background:var(--bckg-1);
  width:450px;
  height:500px;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
.sirius>br, .scajas>br, .sdatos2>br{
  display:none;
}
.simg1{
  position:absolute;
  top:0px;
  left:0px;
  width:400px;
  height:500px;
  z-index:0;
}
.simg2{
  position:absolute;
  width:150px;
  height:500px;
  top:0px;
  left:-150px;
  z-index:2;
  transition:1s ease;
  filter: brightness(100%);
-webkit-filter: brightness(100%);
}
.sdatos:hover ~ .simg2{
filter: brightness(50%);
-webkit-filter: brightness(50%);
}
.sdatos{
  position:absolute;
  top:0px;
  left:-150px;
  width:150px;
  height:500px;
  text-align:center;
  font:9px calibri;
  font-weight:bold;
  text-transform:uppercase;
  z-index:3;
  opacity:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.sdatos:hover span {
  transform:scale(1);
}
.sdatos span{
  color:white;
  display:block;
  margin:0 10px;
  transition:1s ease;
  transform:scale(0);
  padding:4px 0;
  line-height:12px;
  height:11px;
  border-bottom:1px solid rgba(255,255,255,0.5);
}
.sdatos span:last-child{
  border-bottom:0px;
}
.scajas{
  background:var(--bckg-1);
  width:250px;
  height:500px;
  position:absolute;
  top:0px;
  left:-250px;
  z-index:3;
}
.scaja h6{
  background:#e4e4e4;
  margin:-10px -10px 10px;
  height:25px;
  text-transform:uppercase;
  font:9px calibri;
  font-weight:bold;
  text-align:left;
  color:var(--txt);
  line-height:25px;
  border-bottom:1px solid var(--border);
}
.scaja h6 i{
  background:var(--accent-1);
  height:27px;
  width:27px;
  position:relative;
  margin:-1px 10px -1px -1px;
  display:inline-block;
  color:white;
  vertical-align:top;
  font-size:10px;
  float:left;
  text-align:center;
  line-height:25px;
}
.scaja{
  background:var(--bckg-2);
  border:10px solid var(--bckg-2);
  outline:1px solid var(--border);
  margin:10px 10px 0;
  text-align:justify;
  color:var(--txt);
}
.scaja p{
  padding-right:5px;
  overflow:auto;
  margin:0 auto;
  font:11px calibri;
  line-height:12px;
}
.scaja1 p{
  height:115px;
}
.scaja2 p{
  height:265px;
}
.scaja b, .scaja strong, .scaja a{
  color:var(--accent-1);
}
.scaja a{
  text-decoration:underline;
}
.scaja1{
  height:140px;
}
.scaja2{
  height:290px;
}
.sirius div::selection, .sirius p::selection, .sirius b::selection, .sirius strong::selection, .sirius a::selection{
  background:var(--accent-2);
  color:white;
}
.simg1{
  transition:ease 1s;
}
.simg2, .sdatos{
  transition:ease 1s;
}
.scajas{
  transition:ease 1s;
  transition-delay:0s;
}
.stitulo {
  background:var(--accent-1);
  height:500px;
  width:50px;
  position:absolute;
  top:0px;
  right:0px;
  cursor:pointer;
}
.stitulo span{
  width:20px;
  display:block;
  font-size:28px;
  word-wrap: break-word;
  font-family:raleway;
  font-weight:bold;
  color:white;
  text-align:center;
  line-height:25px;
  position:absolute;
  left:15px;
  top:500px;
  transition:ease 1s;
}
.stitulo em{
  width:20px;
  display:block;
  font-size:28px;
  word-wrap: break-word;
  font-family:raleway;
  font-weight:bold;
  font-style:normal;
  color:white;
  text-align:center;
  line-height:25px;
  position:absolute;
  left:15px;
  bottom:15px;
  margin:0 auto;
  transition:ease 1s;
  transition-delay:0.5s;
}
.sirius p::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.sirius p::-webkit-scrollbar-thumb {
  background: var(--accent-1);
  border:1px solid var(--bckg-2);
}
.sirius p::-webkit-scrollbar-track {
  background: var(--accent-2);
  border:2px solid var(--bckg-2);
}
.sirius input{
  display:none;
}
.sirius input:checked ~ .simg1{
  left:400px;
}
.sirius input:checked ~ .simg2, .sirius input:checked ~ .sdatos{
  left:0px;
}
.sirius input:checked ~ .sdatos{
  opacity:1;
}
.sirius input:checked ~ .scajas{
  left:150px;
}
.sirius input:checked ~ label .stitulo span{
  top:15px;
  transition-delay:0.5s;
}
.sirius input:checked ~ label .stitulo em{
  bottom:500px;
  transition-delay:0s;
}
.ncredit{
  width:450px;
  text-align:right;
  margin:0 auto;
  display:block;
  font-size:10px;
  text-decoration:none;
  font:8px verdana;
}
.sirius+br+.ncredit{
  margin-top:-20px;
}
.ncredit:before{
  content:"©";
}