@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* { border:0px; list-style:none; margin:0px; padding:0px;outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html { font-size: 100%; height:100%; }

html, body { margin:0px; font-family: "Roboto", sans-serif; font-size:14px; font-weight:400; }
a { text-decoration:none; color: #000; font-weight:700; }
ul { padding:0px; margin:0px; }
.image { padding: 80px 40px 40px 40px; }
.images { position:fixed; top:0; bottom:80px; left:0; right:0; align-content:center; padding:40px; }
.scale { width: 100%; height:auto; }
.tab { position:fixed; left:0; right:0; top:0; }
.tab ul { list-style:none; display:grid; grid-template-columns:70px 1fr 1fr; gap:1px; padding:0; margin:0; }
.tab li a { display:block; padding:20px 2px; background:#f19cbd; text-align:center; text-transform:uppercase; }
.tab li a.selected { background:#000; color:#FFF; }
.number { font-size:28px; text-align:center; align-content: center; position:absolute; top:100px; right:100px; background:#000; color:#FFF; border-radius:200px;width:50px; height:50px; }
.list { overflow-y:scroll; font-size:20px;  }
.list li {  border-bottom:1px solid #DDD; display:block;  position:relative; padding:15px 60px 15px 60px; }
.list li a { display:block;  }
.list li span { position:absolute; top:15px; left:20px; font-weight:normal; }
.list li i { position:absolute; top:15px; right:20px; font-weight:normal; }

.content { padding:20px 20px 100px 20px; font-size:18px; line-height:26px; }
.credits { font-size:15px; line-height:20px; color:#999; padding:10px; text-align:center;  }

.controls {  position:fixed; bottom:0px; right:0px; left:0px; display:grid; grid-template-columns:1fr; padding:20px; background:#FFF; }
.controls i { margin-right:10px; }
.controls button { width:100%; height:50px; font-size:20px; background:#f19cbd; color:#000; border-radius:20px; }
.controls button i { font-size:20px; }

.cover { height:500px; position:relative; background-size:cover; }
.text { position:absolute; bottom:0; left:0; right:0; padding:80px 20px 20px 20px; text-align:center; background: rgb(0,0,0); background: linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(246,246,246,0) 100%); }
.details { font-size:16px; line-height:normal; color:#CCC; margin-bottom:20px; }
h1 { font-size: 35px; margin: 0 0 20px 0; line-height: 40px;  color:#FFF;}
h5 { color:#FFF; font-size:20px; margin-bottom:10px; }
h4 { position:relative; border-top:1px solid #CCC; }
h4 button { position:absolute; top:8px; left:0px; background:#f19cbd; color:#000; border-radius:200px; width:40px; height:40px; }

.logo { width:100px; height:auto; margin:40px auto; display:inline; text-align:center; }
.acc-content { padding:20px 0; }
.acc-title { padding:15px 10px 15px 60px; display:block; cursor:pointer; }
.acc-title i { position:absolute; top:18px; right:0px; }