Dualidad - Búsqueda

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Playfair+Display&display=swap" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><div class="duabcont"><div class="duatab"><input type="checkbox" name="duatab" id="mduab1"/><input type="checkbox" name="duatab" id="mduab2"/> <div class="duabtabcont"> <label for="mduab1"><div id="dbu1"><span class="th th-bamboo"></span></div></label> <label for="mduab2"><div id="dbu2"><span class="th th-blossom"></span></div></label> </div><div class="duabcont0"> <div class="duabcont1"><div class="duab duab1"> <m>NOMBRE Y APELLIDO</m> <div id="dat1">- DATO</div><div id="dat1">- DATO</div><div id="dat1">- DATO</div><p>INFO AQUI </p></div></div><div class="duabcont2"><div class="duab duab2"> <m>NOMBRE Y APELLIDO</m> <div id="dat1">- DATO</div><div id="dat1">- DATO</div><div id="dat1">- DATO</div><p>INFO AQUI</p></div></div></div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>.duabcont{--color1: #000; --color2: #FFF; --color3: #111; --colorbus1: #395C78; --imgbusq1: url('https://i.imgur.com/N8Hv0iH.jpg');--colorbus2: #8E4242; --imgbusq2: url('https://i.imgur.com/aObEVdZ.jpg');}.duabcont{width: 500px; height: 250px; background: var(--color1); padding: 20px; margin: 0 auto;}.duatab input{display:none;}.duatab label{cursor:pointer; text-align: center;margin-left: 5px;}.duatab{overflow:hidden;}.duabtabcont{display: flex; flex-direction: column; background: var(--color3); width: 40px; height: 100px; margin-top: 70px; margin-left: -5px; align-items: center; justify-content: space-around; position: absolute;}#dbu1{width: 30px; height: 30px; background: var(--color2);transition:ease 1s;}#dbu2{width: 30px; height: 30px; background: var(--color2);transition:ease 1s;}#dbu1 .th, #dbu2 .th{font: 20px 'Honeybee'; text-align: center; padding: 5px;}.duabcont0{display: flex;}.duabcont1{width: 200px; height: 200px; background: var(--imgbusq1) center; background-size: cover; border: 10px solid var(--color2); margin-left: 45px; margin-top: 15px;}.duab1{width: 180px; height: 180px; padding:10px; background: var(--colorbus1); position: absolute; overflow: auto; display: flex; flex-direction: column;}.duab1 m, .duab2 m{font: 14px 'Playfair Display'; color: var(--color2); text-align: center; text-decoration: underline; text-transform: uppercase;}.duab1 #dat1, .duab2 #dat1{width: 150px; font: 12px 'Montserrat'; font-weight: 800; color: var(--color2); margin-top: 2px;}.duab1 p,.duab2 p{font: 10px 'Montserrat'; color: var(--color2); text-align: justify; margin-top: 3px;}.duabcont2{width: 200px; height: 200px; background: var(--imgbusq2) center; background-size: cover; border: 10px solid var(--color2); margin-left: 5px; margin-top: 15px;}.duab2{width: 180px; height: 180px; padding:10px; background: var(--colorbus2); position: absolute; overflow: auto;}.duatab .duab{opacity:0;transition:ease 1s;}.duatab input#mduab1:checked ~ .duabtabcont #dbu1{background: var(--colorbus1); color: var(--color2);transition:ease 1s;}.duatab input#mduab2:checked ~ .duabtabcont #dbu2{background: var(--colorbus2); color: var(--color2);transition:ease 1s;}.duatab input#mduab1:checked ~ .duabcont0 .duabcont1 .duab1, .duatab input#mduab2:checked ~ .duabcont0 .duabcont2 .duab2{opacity:0.8;}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; margin: 0px auto;}#myscr a{color: #000;text-decoration: none;}::-webkit-scrollbar{width: 5px;height: 5px;}::-webkit-scrollbar-button{width: 0px; height: 0px;}::-webkit-scrollbar-thumb{background: var(--color2);}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-corner{background: transparent;}</style>