responsive2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block5</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              clifford: 'rgb(69, 86, 100)',
              reel: '#292b2f',
              lyric: 'rgb(236, 250, 255)',
              reel2: '#2f3136',
              reel3: '#ffb400',
              lyric2: 'rgb(183, 199, 208)',
              lyric3: '#00000080',
              gradi: '#ffb400',
              gradi2: '#f17341',
              lift: 'rgb(69, 86, 100)',
              activi: 'rgb(44, 58, 68)',
              activi2: 'rgb(183, 199, 208)',
              adventure: 'rgb(184, 233, 134)',
              gradi3: 'rgb(69, 86, 100)',
              gradi4: 'rgb(63, 81, 93)',
              gradi5: 'rgb(184, 233, 134)',
              gradi6: 'rgb(162, 204, 129)',
              back: '#26292b',
              back2: '#25272A',
              back3: '#323639',
              yellow: '#fefb39',
              yellow2: '#fffb1a',
              background: '#202225',
              background2: '#2f3136',
              background3: '#26282c',
              background4: '#1E2124',
              background5: '#2E3136',
              background6: '#36393E',
              background7: '#282b30',
              bate: '#949BA4',
              bottom: '#232428',
              bottom2: '#24272b',
              tope: '#323639',
              left2: '#7289DA',
              aside: 'rgba(255, 255, 255, 0.3)',
              left3: '#00e197',
              gris: '#8A8E94',
              gris2: '#8a93a1',
              border2: '#2c2f32',
              wt: '#F2F3F4',
              wt2: '#E3E5E8',
              wt3: '#2c2f32',
            },
            screens: {
              'xs': '320px',
            }
          },  
        }
      }
    </script>




    <style>
 
.progress {
  width: 36px;
  height: 36px;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 0%;
  border: 1px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 2px;
  border-style: solid;
  border-radius: 0%;
  position: absolute;
  top: 0;
  border-color: #fafe3f;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* This for loop creates the necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="1"] .progress-right .progress-bar {
  animation: loading-1 0.5s linear forwards;
}
.progress[data-percentage="1"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="2"] .progress-right .progress-bar {
  animation: loading-2 0.5s linear forwards;
}
.progress[data-percentage="2"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="3"] .progress-right .progress-bar {
  animation: loading-3 0.5s linear forwards;
}
.progress[data-percentage="3"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="4"] .progress-right .progress-bar {
  animation: loading-4 0.5s linear forwards;
}
.progress[data-percentage="4"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="5"] .progress-right .progress-bar {
  animation: loading-5 0.5s linear forwards;
}
.progress[data-percentage="5"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="6"] .progress-right .progress-bar {
  animation: loading-6 0.5s linear forwards;
}
.progress[data-percentage="6"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="7"] .progress-right .progress-bar {
  animation: loading-7 0.5s linear forwards;
}
.progress[data-percentage="7"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="8"] .progress-right .progress-bar {
  animation: loading-8 0.5s linear forwards;
}
.progress[data-percentage="8"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="9"] .progress-right .progress-bar {
  animation: loading-9 0.5s linear forwards;
}
.progress[data-percentage="9"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-10 0.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="11"] .progress-right .progress-bar {
  animation: loading-11 0.5s linear forwards;
}
.progress[data-percentage="11"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="12"] .progress-right .progress-bar {
  animation: loading-12 0.5s linear forwards;
}
.progress[data-percentage="12"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="13"] .progress-right .progress-bar {
  animation: loading-13 0.5s linear forwards;
}
.progress[data-percentage="13"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="14"] .progress-right .progress-bar {
  animation: loading-14 0.5s linear forwards;
}
.progress[data-percentage="14"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="15"] .progress-right .progress-bar {
  animation: loading-15 0.5s linear forwards;
}
.progress[data-percentage="15"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="16"] .progress-right .progress-bar {
  animation: loading-16 0.5s linear forwards;
}
.progress[data-percentage="16"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="17"] .progress-right .progress-bar {
  animation: loading-17 0.5s linear forwards;
}
.progress[data-percentage="17"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="18"] .progress-right .progress-bar {
  animation: loading-18 0.5s linear forwards;
}
.progress[data-percentage="18"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="19"] .progress-right .progress-bar {
  animation: loading-19 0.5s linear forwards;
}
.progress[data-percentage="19"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-20 0.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="21"] .progress-right .progress-bar {
  animation: loading-21 0.5s linear forwards;
}
.progress[data-percentage="21"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="22"] .progress-right .progress-bar {
  animation: loading-22 0.5s linear forwards;
}
.progress[data-percentage="22"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="23"] .progress-right .progress-bar {
  animation: loading-23 0.5s linear forwards;
}
.progress[data-percentage="23"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="24"] .progress-right .progress-bar {
  animation: loading-24 0.5s linear forwards;
}
.progress[data-percentage="24"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="25"] .progress-right .progress-bar {
  animation: loading-25 0.5s linear forwards;
}
.progress[data-percentage="25"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="26"] .progress-right .progress-bar {
  animation: loading-26 0.5s linear forwards;
}
.progress[data-percentage="26"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="27"] .progress-right .progress-bar {
  animation: loading-27 0.5s linear forwards;
}
.progress[data-percentage="27"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="28"] .progress-right .progress-bar {
  animation: loading-28 0.5s linear forwards;
}
.progress[data-percentage="28"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="29"] .progress-right .progress-bar {
  animation: loading-29 0.5s linear forwards;
}
.progress[data-percentage="29"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-30 0.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="31"] .progress-right .progress-bar {
  animation: loading-31 0.5s linear forwards;
}
.progress[data-percentage="31"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="32"] .progress-right .progress-bar {
  animation: loading-32 0.5s linear forwards;
}
.progress[data-percentage="32"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="33"] .progress-right .progress-bar {
  animation: loading-33 0.5s linear forwards;
}
.progress[data-percentage="33"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="34"] .progress-right .progress-bar {
  animation: loading-34 0.5s linear forwards;
}
.progress[data-percentage="34"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="35"] .progress-right .progress-bar {
  animation: loading-35 0.5s linear forwards;
}
.progress[data-percentage="35"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="36"] .progress-right .progress-bar {
  animation: loading-36 0.5s linear forwards;
}
.progress[data-percentage="36"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="37"] .progress-right .progress-bar {
  animation: loading-37 0.5s linear forwards;
}
.progress[data-percentage="37"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="38"] .progress-right .progress-bar {
  animation: loading-38 0.5s linear forwards;
}
.progress[data-percentage="38"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="39"] .progress-right .progress-bar {
  animation: loading-39 0.5s linear forwards;
}
.progress[data-percentage="39"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-40 0.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="41"] .progress-right .progress-bar {
  animation: loading-41 0.5s linear forwards;
}
.progress[data-percentage="41"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="42"] .progress-right .progress-bar {
  animation: loading-42 0.5s linear forwards;
}
.progress[data-percentage="42"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="43"] .progress-right .progress-bar {
  animation: loading-43 0.5s linear forwards;
}
.progress[data-percentage="43"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="44"] .progress-right .progress-bar {
  animation: loading-44 0.5s linear forwards;
}
.progress[data-percentage="44"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="45"] .progress-right .progress-bar {
  animation: loading-45 0.5s linear forwards;
}
.progress[data-percentage="45"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="46"] .progress-right .progress-bar {
  animation: loading-46 0.5s linear forwards;
}
.progress[data-percentage="46"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="47"] .progress-right .progress-bar {
  animation: loading-47 0.5s linear forwards;
}
.progress[data-percentage="47"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="48"] .progress-right .progress-bar {
  animation: loading-48 0.5s linear forwards;
}
.progress[data-percentage="48"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="49"] .progress-right .progress-bar {
  animation: loading-49 0.5s linear forwards;
}
.progress[data-percentage="49"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="51"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="51"] .progress-left .progress-bar {
  animation: loading-1 0.5s linear forwards 0.5s;
}

.progress[data-percentage="52"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="52"] .progress-left .progress-bar {
  animation: loading-2 0.5s linear forwards 0.5s;
}

.progress[data-percentage="53"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="53"] .progress-left .progress-bar {
  animation: loading-3 0.5s linear forwards 0.5s;
}

.progress[data-percentage="54"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="54"] .progress-left .progress-bar {
  animation: loading-4 0.5s linear forwards 0.5s;
}

.progress[data-percentage="55"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="55"] .progress-left .progress-bar {
  animation: loading-5 0.5s linear forwards 0.5s;
}

.progress[data-percentage="56"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="56"] .progress-left .progress-bar {
  animation: loading-6 0.5s linear forwards 0.5s;
}

.progress[data-percentage="57"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="57"] .progress-left .progress-bar {
  animation: loading-7 0.5s linear forwards 0.5s;
}

.progress[data-percentage="58"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="58"] .progress-left .progress-bar {
  animation: loading-8 0.5s linear forwards 0.5s;
}

.progress[data-percentage="59"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="59"] .progress-left .progress-bar {
  animation: loading-9 0.5s linear forwards 0.5s;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-10 0.5s linear forwards 0.5s;
}

.progress[data-percentage="61"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="61"] .progress-left .progress-bar {
  animation: loading-11 0.5s linear forwards 0.5s;
}

.progress[data-percentage="62"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="62"] .progress-left .progress-bar {
  animation: loading-12 0.5s linear forwards 0.5s;
}

.progress[data-percentage="63"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="63"] .progress-left .progress-bar {
  animation: loading-13 0.5s linear forwards 0.5s;
}

.progress[data-percentage="64"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="64"] .progress-left .progress-bar {
  animation: loading-14 0.5s linear forwards 0.5s;
}

.progress[data-percentage="65"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="65"] .progress-left .progress-bar {
  animation: loading-15 0.5s linear forwards 0.5s;
}

.progress[data-percentage="66"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="66"] .progress-left .progress-bar {
  animation: loading-16 0.5s linear forwards 0.5s;
}

.progress[data-percentage="67"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="67"] .progress-left .progress-bar {
  animation: loading-17 0.5s linear forwards 0.5s;
}

.progress[data-percentage="68"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="68"] .progress-left .progress-bar {
  animation: loading-18 0.5s linear forwards 0.5s;
}

.progress[data-percentage="69"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="69"] .progress-left .progress-bar {
  animation: loading-19 0.5s linear forwards 0.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-20 0.5s linear forwards 0.5s;
}

.progress[data-percentage="71"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="71"] .progress-left .progress-bar {
  animation: loading-21 0.5s linear forwards 0.5s;
}

.progress[data-percentage="72"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="72"] .progress-left .progress-bar {
  animation: loading-22 0.5s linear forwards 0.5s;
}

.progress[data-percentage="73"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="73"] .progress-left .progress-bar {
  animation: loading-23 0.5s linear forwards 0.5s;
}

.progress[data-percentage="74"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="74"] .progress-left .progress-bar {
  animation: loading-24 0.5s linear forwards 0.5s;
}

.progress[data-percentage="75"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="75"] .progress-left .progress-bar {
  animation: loading-25 0.5s linear forwards 0.5s;
}

.progress[data-percentage="76"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="76"] .progress-left .progress-bar {
  animation: loading-26 0.5s linear forwards 0.5s;
}

.progress[data-percentage="77"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="77"] .progress-left .progress-bar {
  animation: loading-27 0.5s linear forwards 0.5s;
}

.progress[data-percentage="78"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="78"] .progress-left .progress-bar {
  animation: loading-28 0.5s linear forwards 0.5s;
}

.progress[data-percentage="79"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="79"] .progress-left .progress-bar {
  animation: loading-29 0.5s linear forwards 0.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-30 0.5s linear forwards 0.5s;
}

.progress[data-percentage="81"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="81"] .progress-left .progress-bar {
  animation: loading-31 0.5s linear forwards 0.5s;
}

.progress[data-percentage="82"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="82"] .progress-left .progress-bar {
  animation: loading-32 0.5s linear forwards 0.5s;
}

.progress[data-percentage="83"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="83"] .progress-left .progress-bar {
  animation: loading-33 0.5s linear forwards 0.5s;
}

.progress[data-percentage="84"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="84"] .progress-left .progress-bar {
  animation: loading-34 0.5s linear forwards 0.5s;
}

.progress[data-percentage="85"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="85"] .progress-left .progress-bar {
  animation: loading-35 0.5s linear forwards 0.5s;
}

.progress[data-percentage="86"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="86"] .progress-left .progress-bar {
  animation: loading-36 0.5s linear forwards 0.5s;
}

.progress[data-percentage="87"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="87"] .progress-left .progress-bar {
  animation: loading-37 0.5s linear forwards 0.5s;
}

.progress[data-percentage="88"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="88"] .progress-left .progress-bar {
  animation: loading-38 0.5s linear forwards 0.5s;
}

.progress[data-percentage="89"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="89"] .progress-left .progress-bar {
  animation: loading-39 0.5s linear forwards 0.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-40 0.5s linear forwards 0.5s;
}

.progress[data-percentage="91"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="91"] .progress-left .progress-bar {
  animation: loading-41 0.5s linear forwards 0.5s;
}

.progress[data-percentage="92"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="92"] .progress-left .progress-bar {
  animation: loading-42 0.5s linear forwards 0.5s;
}

.progress[data-percentage="93"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="93"] .progress-left .progress-bar {
  animation: loading-43 0.5s linear forwards 0.5s;
}

.progress[data-percentage="94"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="94"] .progress-left .progress-bar {
  animation: loading-44 0.5s linear forwards 0.5s;
}

.progress[data-percentage="95"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="95"] .progress-left .progress-bar {
  animation: loading-45 0.5s linear forwards 0.5s;
}

.progress[data-percentage="96"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="96"] .progress-left .progress-bar {
  animation: loading-46 0.5s linear forwards 0.5s;
}

.progress[data-percentage="97"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="97"] .progress-left .progress-bar {
  animation: loading-47 0.5s linear forwards 0.5s;
}

.progress[data-percentage="98"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="98"] .progress-left .progress-bar {
  animation: loading-48 0.5s linear forwards 0.5s;
}

.progress[data-percentage="99"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="99"] .progress-left .progress-bar {
  animation: loading-49 0.5s linear forwards 0.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-50 0.5s linear forwards 0.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(3.6);
    transform: rotate(3.6deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(7.2);
    transform: rotate(7.2deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(10.8);
    transform: rotate(10.8deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(14.4);
    transform: rotate(14.4deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(18);
    transform: rotate(18deg);
  }
}
@keyframes loading-6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(21.6);
    transform: rotate(21.6deg);
  }
}
@keyframes loading-7 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(25.2);
    transform: rotate(25.2deg);
  }
}
@keyframes loading-8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(28.8);
    transform: rotate(28.8deg);
  }
}
@keyframes loading-9 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(32.4);
    transform: rotate(32.4deg);
  }
}
@keyframes loading-10 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-11 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(39.6);
    transform: rotate(39.6deg);
  }
}
@keyframes loading-12 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(43.2);
    transform: rotate(43.2deg);
  }
}
@keyframes loading-13 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(46.8);
    transform: rotate(46.8deg);
  }
}
@keyframes loading-14 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(50.4);
    transform: rotate(50.4deg);
  }
}
@keyframes loading-15 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(54);
    transform: rotate(54deg);
  }
}
@keyframes loading-16 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(57.6);
    transform: rotate(57.6deg);
  }
}
@keyframes loading-17 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(61.2);
    transform: rotate(61.2deg);
  }
}
@keyframes loading-18 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(64.8);
    transform: rotate(64.8deg);
  }
}
@keyframes loading-19 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(68.4);
    transform: rotate(68.4deg);
  }
}
@keyframes loading-20 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-21 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(75.6);
    transform: rotate(75.6deg);
  }
}
@keyframes loading-22 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(79.2);
    transform: rotate(79.2deg);
  }
}
@keyframes loading-23 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(82.8);
    transform: rotate(82.8deg);
  }
}
@keyframes loading-24 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(86.4);
    transform: rotate(86.4deg);
  }
}
@keyframes loading-25 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90);
    transform: rotate(90deg);
  }
}
@keyframes loading-26 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(93.6);
    transform: rotate(93.6deg);
  }
}
@keyframes loading-27 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(97.2);
    transform: rotate(97.2deg);
  }
}
@keyframes loading-28 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(100.8);
    transform: rotate(100.8deg);
  }
}
@keyframes loading-29 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(104.4);
    transform: rotate(104.4deg);
  }
}
@keyframes loading-30 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-31 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(111.6);
    transform: rotate(111.6deg);
  }
}
@keyframes loading-32 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(115.2);
    transform: rotate(115.2deg);
  }
}
@keyframes loading-33 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(118.8);
    transform: rotate(118.8deg);
  }
}
@keyframes loading-34 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(122.4);
    transform: rotate(122.4deg);
  }
}
@keyframes loading-35 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(126);
    transform: rotate(126deg);
  }
}
@keyframes loading-36 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(129.6);
    transform: rotate(129.6deg);
  }
}
@keyframes loading-37 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(133.2);
    transform: rotate(133.2deg);
  }
}
@keyframes loading-38 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(136.8);
    transform: rotate(136.8deg);
  }
}
@keyframes loading-39 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(140.4);
    transform: rotate(140.4deg);
  }
}
@keyframes loading-40 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-41 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(147.6);
    transform: rotate(147.6deg);
  }
}
@keyframes loading-42 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(151.2);
    transform: rotate(151.2deg);
  }
}
@keyframes loading-43 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(154.8);
    transform: rotate(154.8deg);
  }
}
@keyframes loading-44 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(158.4);
    transform: rotate(158.4deg);
  }
}
@keyframes loading-45 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(162);
    transform: rotate(162deg);
  }
}
@keyframes loading-46 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(165.6);
    transform: rotate(165.6deg);
  }
}
@keyframes loading-47 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(169.2);
    transform: rotate(169.2deg);
  }
}
@keyframes loading-48 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(172.8);
    transform: rotate(172.8deg);
  }
}
@keyframes loading-49 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(176.4);
    transform: rotate(176.4deg);
  }
}
@keyframes loading-50 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}


    </style>
</head>
<body class="lg:bg-background6 md:bg-white">
<div id="app">
<div>
  <div :class="clasesDivu" class="lg:visible lg:w-[30%] lg:h-full absolute flex md:invisible md:w-[0%] md:h-full">

    <aside :class="clasesDivute"  class="lg:w-1/4 md:w-0 h-full relative inset-x-0 z-100 md:z-0 p-3 pt-2 flex flex-col space-y-5 bg-background4 text-lyric2">
      <div class="rounded-full w-12 h-12 border border-lift flex space-x-1 mt-2 mb-2 relative">
        <img src="" class="">
      </div>
  
      <div class="bg-white w-8 h-0.5 mx-auto relative">
  
      </div>
      <div class="rounded-full w-12 h-12 border border-lift flex space-x-1 mt-6 relative" @click="toggleEstilasho">
        <img src="" class="">{{ estiloAplica ? 'vlye' : 'verde' }}
      </div>
  
      <div class="rounded-full w-12 h-12 border border-lift relative" @click="toggleEstilashe">
        <img src="" class="">{{ estiloAplica2 ? 'vlye' : 'verde' }}
      </div>
  
      <div class="rounded-full w-12 h-12 border border-lift relative" @click="toggleEstilashio">
        <img src="" class="">{{ estiloAplica3 ? 'vlye' : 'verde' }}
      </div>
  
      <div class="rounded-full w-12 h-12 border border-lift relative">
        <img src="" class="">
      </div>
  
      
    </aside>
  <aside :class="clasesDivuto" class="lg:w-3/4 bg-background5 md:w-0 absolute right-0 h-full z-100">
    <div class="relative border-b border-b-bottom2 h-14 w-full text-white p-4 pl-7 font-bold flex">
      <h3 class="relative">My Server</h3>
      <img class="w-5 h-5 absolute right-6 pt-1" src="/angle-small-down (1).png" alt="">
    </div>
  <div class="w-full h-6 relative">

  </div>
  <div class="w-full h-10 relative pt-2 pl-4 uppercase font-bold text-aside text-xs flex">
    <p class="">Project</p>
    <img class="w-5 h-5 absolute right-4" src="/angle-small-down (1).png" alt="">
  </div>
  <div class="w-full h-full relative">
    <div class="w-10/12 h-10 flex mt-0 left-6 relative bg-background7 rounded">
      <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
      <p class="ml-7 text-white pt-2.5 text-sm font-light">Boxes</p>
      <img src="/angle-small-right.svg" class="w-4 h-4 absolute right-3 top-3">
    </div>
    <div class="w-10/12 h-10 flex mt-0 left-6 relative hover:bg-background7 active:bg-gray-200 cursor-pointer rounded">
      <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
      <p class="ml-7 text-bate pt-2.5 text-sm font-light">Rocket</p>
    </div>
    <div class="w-10/12 h-10 flex mt-0 left-6 relative hover:bg-background7 active:bg-gray-200 cursor-pointer rounded">
      <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
      <p class="ml-7 text-bate pt-2.5 text-sm font-light">JackPot</p>
    </div>
    
  
  </div>

</aside>






<aside :class="clasesDivutotwo" class="lg:w-3/4 bg-background5 md:w-0 absolute right-0  md:absolute md:right-0 h-full z-100">
  <div class="relative border-b border-b-bottom2 h-14 w-full text-white p-4 pl-7 font-bold flex">
    <h3 class="relative">My Server2</h3>
    <img class="w-5 h-5 absolute right-6 pt-1" src="/angle-small-down (1).png" alt="">
  </div>
<div class="w-full h-6 relative">

</div>
<div class="w-full h-10 relative pt-2 pl-4 uppercase font-bold text-aside text-xs flex">
  <p class="">Project</p>
  <img class="w-5 h-5 absolute right-4" src="/angle-small-down (1).png" alt="">
</div>
<div class="w-full h-full relative">
  <div class="w-10/12 h-10 flex mt-0 left-6 relative bg-background7 rounded">
    <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
    <p class="ml-7 text-white pt-2.5 text-sm font-light">Boxes</p>
    <img src="/angle-small-right.svg" class="w-4 h-4 absolute right-3 top-3">
  </div>
  <div class="w-10/12 h-10 flex mt-0 left-6 relative hover:bg-background7 active:bg-gray-200 cursor-pointer rounded">
    <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
    <p class="ml-7 text-bate pt-2.5 text-sm font-light">Rocket</p>
  </div>
  <div class="w-10/12 h-10 flex mt-0 left-6 relative hover:bg-background7 active:bg-gray-200 cursor-pointer rounded">
    <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
    <p class="ml-7 text-bate pt-2.5 text-sm font-light">JackPot</p>
  </div>
  

</div>

</aside>







<aside :class="clasesDivutothree" class="lg:w-3/4 bg-background5 md:w-0 absolute right-0 h-full z-100">
  <div class="relative border-b border-b-bottom2 h-14 w-full text-white p-4 pl-7 font-bold flex">
    <h3 class="relative">My Server3</h3>
    <img class="w-5 h-5 absolute right-6 pt-1" src="/angle-small-down (1).png" alt="">
  </div>
<div class="w-full h-6 relative">

</div>
<div class="w-full h-10 relative pt-2 pl-4 uppercase font-bold text-aside text-xs flex">
  <p class="">Project</p>
  <img class="w-5 h-5 absolute right-4" src="/angle-small-down (1).png" alt="">
</div>
<div class="w-full h-full relative">
  <div class="w-10/12 h-10 flex mt-0 left-6 relative bg-background7 rounded">
    <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
    <p class="ml-7 text-white pt-2.5 text-sm font-light">Boxes</p>
    <img src="/angle-small-right.svg" class="w-4 h-4 absolute right-3 top-3">
  </div>
  <div class="w-10/12 h-10 flex mt-0 left-6 relative hover:bg-background7 active:bg-gray-200 cursor-pointer rounded">
    <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
    <p class="ml-7 text-bate pt-2.5 text-sm font-light">Rocket</p>
  </div>
  <div class="w-10/12 h-10 flex mt-0 left-6 relative hover:bg-background7 active:bg-gray-200 cursor-pointer rounded">
    <img src="/hashtag (3).png" class="w-3 h-3 top-3.5 relative left-4">
    <p class="ml-7 text-bate pt-2.5 text-sm font-light">JackPot</p>
  </div>
  

</div>

</aside>





</div>
</div>
  <div class="lg:w-[70%] md:w-[100%] absolute inset-y-0 right-0">
      <nav class="relative h-14 flex z-40 bg-reel border-b border-background2
">
    <div class="lg:w-0 lg:h-0 md:basis-1/6 md:h-full bg-white">
      <img src="" alt="" class="rounded-full w-10 h-10 bg-black lg:invisible md:visible" @click="toggleEstilo">
      {{ estiloAplicado ? 'vlye' : 'verde' }}
    </div>
    <div class="lg:basis-4/6 md:basis-3/6 relative">
      <div class="inset-y-0 right-0 flex space-x-3 p-1 justify-center">
        <div class="relative h-10 lg:w-72 xs:w-52 bg-reel2 rounded flex flex-row p-2">
        <div class="relative rounded-full lg:w-6 lg:h-6 xs:w-4 xs:h-4 xs:pt-1 md:pt-0">
          <img src="/base-BTC.png" alt="">
        </div>
        <div class="basis-1/2">
          <p class="font-bold text-lyric basis-1/4 pl-2 font-primary xs:text-xs xs:pt-1">0.00000128</p>
        </div>
        <div class="lg:w-16 lg:h-6 xs:w-auto xs:h-auto xs:p-1 xs:px-2 bg-background3 rounded flex justify-center font-bold absolute right-10">
          <span class="lg:text-md text-white uppercase xs:text-xs">HTR</span>
        </div>
        <button id="dropdown-button" class="w-4 h-4 absolute right-3 top-3">
          <img src="/angle-small-down (1).png" alt="">
        </button>
      </div>
      <div class="bg-yellow relative md:h-10 md:w-24 xs:h-8 xs:w-14 md:top-0 xs:top-1 rounded-full"></div>
      </div>
      
    </div>
    <div class="lg:basis-2/6 md:basis-2/6 bg-reel relative flex flex-row-reverse space-x-2 space-x-reverse p-1 pr-4">
      <div class="progress md:w-9 md:h-9 xs:w-7 xs:h-7 rounded-full" data-percentage="50">
        <span class="progress-left">
          <span class="progress-bar"></span>
        </span>
        <span class="progress-right">
          <span class="progress-bar"></span>
        </span>
        <div class="progress-value bg-background2 p-1">
          <img src="/MrDegen.png" class="rounded-full">
        </div>
      </div>
      <div class="md:w-9 md:h-9 relative rounded-full bg-white xs:w-7 xs:h-7 md:top-0 xs:top-1">
        <img src="/descarga.svg" alt="">
      </div>
      <div class="md:w-9 md:h-9 relative rounded-full bg-white xs:w-7 xs:h-7 md:top-0 xs:top-1">
        <img src="/descarga (1).svg" alt="">
      </div>
    </div>
  </nav>

  <nav class="w-full h-6 bg-background5 flex">
    <div class="relative w-2/3 h-2 left-6 flex">
      <div class="relative">
        <span class="uppercase text-[9px] font-bold pr-2 -top-1 text-left3 relative left-4 mr-3">stage 1<span class="text-aside">/10</span></span>
      </div>
      <div class="w-80 relative flex items-center justify-center top-2">
        <div class="absolute top-0 bottom-0 left-0 rounded-lg w-[90%] bg-reel"></div>
        <div class="relative text-orange-900 font-medium text-sm"></div>
      </div>
    </div>
    <div class="relative w-1/3 flex flex-row-reverse pr-4">
      <button class="relative text-xs pl-2 pr-2">></button>
    </div>
  </nav>

  <div id="dropdown-menu" class="z-0 origin-top-right absolute left-20 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
    <div class="py-2 p-2" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-button">
        <a class="flex block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-gray-200 cursor-pointer" role="menuitem">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" id="light" width="18px" class="mr-2"><path d="M19 9.199h-.98c-.553 0-1 .359-1 .801 0 .441.447.799 1 .799H19c.552 0 1-.357 1-.799 0-.441-.449-.801-1-.801zM10 4.5A5.483 5.483 0 0 0 4.5 10c0 3.051 2.449 5.5 5.5 5.5 3.05 0 5.5-2.449 5.5-5.5S13.049 4.5 10 4.5zm0 9.5c-2.211 0-4-1.791-4-4 0-2.211 1.789-4 4-4a4 4 0 0 1 0 8zm-7-4c0-.441-.449-.801-1-.801H1c-.553 0-1 .359-1 .801 0 .441.447.799 1 .799h1c.551 0 1-.358 1-.799zm7-7c.441 0 .799-.447.799-1V1c0-.553-.358-1-.799-1-.442 0-.801.447-.801 1v1c0 .553.359 1 .801 1zm0 14c-.442 0-.801.447-.801 1v1c0 .553.359 1 .801 1 .441 0 .799-.447.799-1v-1c0-.553-.358-1-.799-1zm7.365-13.234c.391-.391.454-.961.142-1.273s-.883-.248-1.272.143l-.7.699c-.391.391-.454.961-.142 1.273s.883.248 1.273-.143l.699-.699zM3.334 15.533l-.7.701c-.391.391-.454.959-.142 1.271s.883.25 1.272-.141l.7-.699c.391-.391.454-.961.142-1.274s-.883-.247-1.272.142zm.431-12.898c-.39-.391-.961-.455-1.273-.143s-.248.883.141 1.274l.7.699c.391.391.96.455 1.272.143s.249-.883-.141-1.273l-.699-.7zm11.769 14.031l.7.699c.391.391.96.453 1.272.143.312-.312.249-.883-.142-1.273l-.699-.699c-.391-.391-.961-.455-1.274-.143s-.248.882.143 1.273z"></path></svg> Light
          <span class="relative left-16 text-bate">BTC</span>
          </a>
        <a class="flex block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-blue-100 cursor-pointer" role="menuitem">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="moon" width="18px" class="mr-2"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"></path></svg> Dark
          </a>
        <a class="flex block rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-blue-100 cursor-pointer" role="menuitem">
          <svg xmlns="http://www.w3.org/2000/svg" width="16px" class="mr-2" viewBox="0 0 32 32" id="desktop"><path d="M30 2H2a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h9.998c-.004 1.446-.062 3.324-.61 4h-.404A.992.992 0 0 0 10 29c0 .552.44 1 .984 1h10.03A.992.992 0 0 0 22 29c0-.552-.44-1-.984-1h-.404c-.55-.676-.606-2.554-.61-4H30a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM14 24l-.002.004L14 24zm4.002.004L18 24h.002v.004zM30 20H2V4h28v16z"></path></svg> System
          </a>
    </div>
</div>



<div class="relative w-full flex h-full">
    <div class="w-11/12 h-full relative bg-back mx-auto top-4 rounded flex flex-col">
        <h1>{{ message }}</h1>
        <h1 v-if="!isHidden">Hola Mundo!</h1>
        <button v-on:click="isHidden = !isHidden">mostrar/ocultar</button>
        <div class="w-full h-64 bg-back relative flex flex-col">
            <div class="w-44 h-44 relative mx-auto bg-background7 mt-4">

            </div>
            <h1 class="relative mx-auto mt-4 font-bold">Sabias que?</h1>
        </div>
        <div class="w-full h-32 lg:bg-white relative flex md:bg-black">
            <p class="relative mx-auto">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit fugit, veniam amet deserunt saepe cupiditate voluptatem possimus illum. Enim incidunt assumenda sapiente obcaecati, laborum soluta illum sed quis quas quaerat.</p>
        </div>
    </div>
</div>







  <br>
  <br>





<div class="w-full h-10 bg-reel flex justify-center relative mt-40 pt-3 text-xs text-gris2">
  <div class="relative">Home</div>
  <div class="relative ml-6 ">About</div>
  <div class="relative ml-6">Help Center</div>
  <div class="relative ml-6">Bonuses</div>
  <div class="relative ml-6">Game</div>
  <div class="relative ml-6">Deposit</div>
</div>



<div class="w-full h-28 bg-back flex space-x-4">
  <div class="w-44 h-20 bg-white top-4 relative"></div>
  <div class="w-44 h-20 bg-blue-100 top-4 relative"></div>
  <div class="w-20 h-10 bg-black mt-8 right-4 absolute"></div>
</div>


<div class="w-full h-14 bg-reel flex space-x-4">
  <div class="w-32 h-10 bg-white top-2 relative"></div>
  <div class="w-32 h-10 bg-blue-100 top-2 relative"></div>
  <div class="w-80 h-10 mt-2 right-4 absolute flex flex-row-reverse space-x-2">
    
    <div class="h-8 w-8 bg-back relative rounded-full top-1">

    </div>
    <div class="h-8 w-8 bg-back relative rounded-full top-1">
      
    </div>
    <div class="h-8 w-8 bg-back relative rounded-full top-1">
      
    </div>
    <div class="relative top-2.5 text-sm text-gris2">Term of condition</div>
  </div>
</div>
  </div>
</div>

  



    
    
<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const clasesDivu = ref('');
      const clasesDivute = ref('');
      const clasesDivuto = ref('');
      const clasesDivutotwo = ref('');
      const clasesDivutothree = ref('');
    const estiloAplicado = ref(false);
    

    const toggleEstilo = () => {
      estiloAplicado.value = !estiloAplicado.value;
      if (estiloAplicado.value) {
        clasesDivu.value = 'bg-black md:w-[307px] md:h-full md:z-50 md:absolute';
        clasesDivute.value = 'md:w-[77px] md:h-full';
        clasesDivuto.value = 'md:w-[230px] md:h-full md:absolute md:right-0';
        clasesDivutotwo.value = 'md:w-[230px] md:h-full md:absolute md:right-0';
        clasesDivutothree.value = 'md:w-[230px] md:h-full md:absolute md:right-0';
      } else {
        clasesDivu.value = '';
        clasesDivute.value = '';
        clasesDivuto.value = '';
        clasesDivutotwo.value = '';
        clasesDivutothree.value = '';
      }
    };

    const estiloAplica = ref(false);
    const toggleEstilasho = () => {
      estiloAplica.value = !estiloAplica.value;
      if (estiloAplica.value) {
        clasesDivuto.value = 'z-50 md:w-[230px] md:h-full md:absolute md:right-0 md:z-50';
        clasesDivutotwo.value = 'z-0 md:w-[230px] md:h-full md:absolute md:right-0';
        clasesDivutothree.value = 'z-0 md:w-[230px] md:h-full md:absolute md:right-0';

      } else {
        clasesDivuto.value = '';
        clasesDivutotwo.value = '';
        clasesDivutothree.value = '';
      }
    };

    const estiloAplica2 = ref(false);
    const toggleEstilashe = () => {
      estiloAplica2.value = !estiloAplica2.value;
      if (estiloAplica2.value) {
        clasesDivuto.value = 'z-0 md:w-[230px] md:h-full md:absolute md:right-0';
        clasesDivutotwo.value = 'z-50 md:w-[230px] md:h-full md:absolute md:right-0 md:z-50';
        clasesDivutothree.value = 'z-0 md:w-[230px] md:h-full md:absolute md:right-0';

      } else {
        clasesDivuto.value = '';
        clasesDivutotwo.value = '';
        clasesDivutothree.value = '';
      }
    };

    const estiloAplica3 = ref(false);
    const toggleEstilashio = () => {
      estiloAplica3.value = !estiloAplica3.value;
      if (estiloAplica3.value) {
        clasesDivuto.value = 'z-0 md:w-[230px] md:h-full md:absolute md:right-0';
        clasesDivutotwo.value = 'z-0 md:w-[230px] md:h-full md:absolute md:right-0';
        clasesDivutothree.value = 'z-50 md:w-[230px] md:h-full md:absolute md:right-0 md:z-50';

      } else {
        clasesDivuto.value = '';
        clasesDivutotwo.value = '';
        clasesDivutothree.value = '';
      }
    };

      const isHidden = ref (true);
      const modal = ref (false);
      const pos = ref (false);
      const isHiddenSide = ref (true);
      const message = ref('Hello vue 2!')
      return {
        message,
        isHidden,
        isHiddenSide,
        modal,
        pos,
        clasesDivu,
        clasesDivute,
        clasesDivuto,
        clasesDivutotwo,
        clasesDivutothree,
      estiloAplicado,
      estiloAplica,
      estiloAplica2,
      estiloAplica3,
      toggleEstilo,   
      toggleEstilasho,
      toggleEstilashe,
      toggleEstilashio
      }
    }
  }).mount('#app')
</script>


</body>
</html>