@import url("https://fonts.googleapis.com/css2?family=Bad+Script&display=swap");  :root {  --trueno: #505160;  --cascada: #68829E;  --acero: #080706;  --papel: #efefef;  --indigo: #191D32;  --oro: #d1b280;  --tabique: #6D3B47;  font-size: 1.2rem; } * {  margin: 0;  padding: 0;  box-sizing: border-box; } body {  background: var(--trueno);  font-family: "Bad Script", cursive;  overflow: hidden; } h1 {  font-size: 2rem;  letter-spacing: 0.30rem;  text-align: center;  color: var(--papel);  margin: 3vh auto; } h2 {  color: var(--tabique);  margin-top: 1.5rem;  margin-bottom: 1rem; } .fondo {  height: 100vh;  width: 100vw; overflow: hidden; } .vector {  border: solid 1px rgba(239,239,239,0.0625);  background: transparent; }   .v0  {  position: absolute; top: 0vh;  left: 0vw;  height: 100vh;  width: 100vw;  transform: rotate(0deg);  z-index: 1;  }  .v1  {  position: absolute; top: 1vh;  left: 1vw;  height: 98vh;  width: 98vw;  transform: rotate(1.8deg);  z-index: 1;  }  .v2  {  position: absolute; top: 2vh;  left: 2vw;  height: 96vh;  width: 96vw;  transform: rotate(3.6deg);  z-index: 1;  }  .v3  {  position: absolute; top: 3vh;  left: 3vw;  height: 94vh;  width: 94vw;  transform: rotate(5.4deg);  z-index: 1;  }  .v4  {  position: absolute; top: 4vh;  left: 4vw;  height: 92vh;  width: 92vw;  transform: rotate(7.2deg);  z-index: 1;  }  .v5  {  position: absolute; top: 5vh;  left: 5vw;  height: 90vh;  width: 90vw;  transform: rotate(9deg);  z-index: 1;  }  .v6  {  position: absolute; top: 6vh;  left: 6vw;  height: 88vh;  width: 88vw;  transform: rotate(10.8deg);  z-index: 1;  }  .v7  {  position: absolute; top: 7vh;  left: 7vw;  height: 86vh;  width: 86vw;  transform: rotate(12.6deg);  z-index: 1;  }  .v8  {  position: absolute; top: 8vh;  left: 8vw;  height: 84vh;  width: 84vw;  transform: rotate(14.4deg);  z-index: 1;  }  .v9  {  position: absolute; top: 9vh;  left: 9vw;  height: 82vh;  width: 82vw;  transform: rotate(16.2deg);  z-index: 1;  }  .v10  {  position: absolute; top: 10vh;  left: 10vw;  height: 80vh;  width: 80vw;  transform: rotate(18deg);  z-index: 1;  }  .v11  {  position: absolute; top: 11vh;  left: 11vw;  height: 78vh;  width: 78vw;  transform: rotate(19.8deg);  z-index: 1;  }  .v12  {  position: absolute; top: 12vh;  left: 12vw;  height: 76vh;  width: 76vw;  transform: rotate(21.6deg);  z-index: 1;  }  .v13  {  position: absolute; top: 13vh;  left: 13vw;  height: 74vh;  width: 74vw;  transform: rotate(23.4deg);  z-index: 1;  }  .v14  {  position: absolute; top: 14vh;  left: 14vw;  height: 72vh;  width: 72vw;  transform: rotate(25.2deg);  z-index: 1;  }  .v15  {  position: absolute; top: 15vh;  left: 15vw;  height: 70vh;  width: 70vw;  transform: rotate(27deg);  z-index: 1;  }  .v16  {  position: absolute; top: 16vh;  left: 16vw;  height: 68vh;  width: 68vw;  transform: rotate(28.8deg);  z-index: 1;  }  .v17  {  position: absolute; top: 17vh;  left: 17vw;  height: 66vh;  width: 66vw;  transform: rotate(30.6deg);  z-index: 1;  }  .v18  {  position: absolute; top: 18vh;  left: 18vw;  height: 64vh;  width: 64vw;  transform: rotate(32.4deg);  z-index: 1;  }  .v19  {  position: absolute; top: 19vh;  left: 19vw;  height: 62vh;  width: 62vw;  transform: rotate(34.2deg);  z-index: 1;  }  .v20  {  position: absolute; top: 20vh;  left: 20vw;  height: 60vh;  width: 60vw;  transform: rotate(36deg);  z-index: 1;  }  .v21  {  position: absolute; top: 21vh;  left: 21vw;  height: 58vh;  width: 58vw;  transform: rotate(37.8deg);  z-index: 1;  }  .v22  {  position: absolute; top: 22vh;  left: 22vw;  height: 56vh;  width: 56vw;  transform: rotate(39.6deg);  z-index: 1;  }  .v23  {  position: absolute; top: 23vh;  left: 23vw;  height: 54vh;  width: 54vw;  transform: rotate(41.4deg);  z-index: 1;  }  .v24  {  position: absolute; top: 24vh;  left: 24vw;  height: 52vh;  width: 52vw;  transform: rotate(43.2deg);  z-index: 1;  }  .v25  {  position: absolute; top: 25vh;  left: 25vw;  height: 50vh;  width: 50vw;  transform: rotate(45deg);  z-index: 1;  }  .v26  {  position: absolute; top: 26vh;  left: 26vw;  height: 48vh;  width: 48vw;  transform: rotate(46.8deg);  z-index: 1;  }  .v27  {  position: absolute; top: 27vh;  left: 27vw;  height: 46vh;  width: 46vw;  transform: rotate(48.6deg);  z-index: 1;  }  .v28  {  position: absolute; top: 28vh;  left: 28vw;  height: 44vh;  width: 44vw;  transform: rotate(50.4deg);  z-index: 1;  }  .v29  {  position: absolute; top: 29vh;  left: 29vw;  height: 42vh;  width: 42vw;  transform: rotate(52.2deg);  z-index: 1;  }  .v30  {  position: absolute; top: 30vh;  left: 30vw;  height: 40vh;  width: 40vw;  transform: rotate(54deg);  z-index: 1;  }  .v31  {  position: absolute; top: 31vh;  left: 31vw;  height: 38vh;  width: 38vw;  transform: rotate(55.8deg);  z-index: 1;  }  .v32  {  position: absolute; top: 32vh;  left: 32vw;  height: 36vh;  width: 36vw;  transform: rotate(57.6deg);  z-index: 1;  }  .v33  {  position: absolute; top: 33vh;  left: 33vw;  height: 34vh;  width: 34vw;  transform: rotate(59.4deg);  z-index: 1;  }  .v34  {  position: absolute; top: 34vh;  left: 34vw;  height: 32vh;  width: 32vw;  transform: rotate(61.2deg);  z-index: 1;  }  .v35  {  position: absolute; top: 35vh;  left: 35vw;  height: 30vh;  width: 30vw;  transform: rotate(63deg);  z-index: 1;  }  .v36  {  position: absolute; top: 36vh;  left: 36vw;  height: 28vh;  width: 28vw;  transform: rotate(64.8deg);  z-index: 1;  }  .v37  {  position: absolute; top: 37vh;  left: 37vw;  height: 26vh;  width: 26vw;  transform: rotate(66.6deg);  z-index: 1;  }  .v38  {  position: absolute; top: 38vh;  left: 38vw;  height: 24vh;  width: 24vw;  transform: rotate(68.4deg);  z-index: 1;  }  .v39  {  position: absolute; top: 39vh;  left: 39vw;  height: 22vh;  width: 22vw;  transform: rotate(70.2deg);  z-index: 1;  }  .v40  {  position: absolute; top: 40vh;  left: 40vw;  height: 20vh;  width: 20vw;  transform: rotate(72deg);  z-index: 1;  }  .v41  {  position: absolute; top: 41vh;  left: 41vw;  height: 18vh;  width: 18vw;  transform: rotate(73.8deg);  z-index: 1;  }  .v42  {  position: absolute; top: 42vh;  left: 42vw;  height: 16vh;  width: 16vw;  transform: rotate(75.6deg);  z-index: 1;  }  .v43  {  position: absolute; top: 43vh;  left: 43vw;  height: 14vh;  width: 14vw;  transform: rotate(77.4deg);  z-index: 1;  }  .v44  {  position: absolute; top: 44vh;  left: 44vw;  height: 12vh;  width: 12vw;  transform: rotate(79.2deg);  z-index: 1;  }  .v45  {  position: absolute; top: 45vh;  left: 45vw;  height: 10vh;  width: 10vw;  transform: rotate(81deg);  z-index: 1;  }  .v46  {  position: absolute; top: 46vh;  left: 46vw;  height: 8vh;  width: 8vw;  transform: rotate(82.8deg);  z-index: 1;  }  .v47  {  position: absolute; top: 47vh;  left: 47vw;  height: 6vh;  width: 6vw;  transform: rotate(84.6deg);  z-index: 1;  }  .v48  {  position: absolute; top: 48vh;  left: 48vw;  height: 4vh;  width: 4vw;  transform: rotate(86.4deg);  z-index: 1;  }  .v49  {  position: absolute; top: 49vh;  left: 49vw;  height: 2vh;  width: 2vw;  transform: rotate(88.2deg);  z-index: 1;  }  .v50  {  position: absolute; top: 50vh;  left: 50vw;  height: 0vh;  width: 0vw;  transform: rotate(90deg);  z-index: 1;  }  main {  display: grid;  grid-template-columns: 1fr;  width: 900px;  max-width: 90vw;  height: 90vh;  position: absolute;  top: 5vh;  left: calc((100vw - 90vw) / 2);  z-index: 2;  box-shadow: 3vw 3vw 2vw rgba(0,0,0, 0.25);  border-radius: 10px;  overflow: hidden;  }  .izq {  width: 90vw;  height: 21vh;  background: var(--indigo);  border-radius: 10px 10px 0 0;   }  .der {  width: 90vw;  height: 69vh;  background: var(--papel);  border-radius: 0 0 10px 10px;  }  .caja_texto {  width: 80vw;  max-height: 100%; margin: 2vh auto; overflow: auto;  }  svg {  fill:none;  stroke: var(--tabique);  width: 81%;  margin-left: 19%;  margin-bottom: 3rem;  }  p  {  text-align: justify;  margin: 0 1.75rem 2rem 1rem;  font-size: 1.2rem;  text-indent: 2rem;  line-height: 1.80rem;  color: var(--acero);  }   ::-webkit-scrollbar {  width: 0.45rem;  }  ::-webkit-scrollbar-track {  background: var(--cascada);  }  ::-webkit-scrollbar-thumb {  background: var(--trueno);  }  ::-webkit-scrollbar-thumb:hover {  background: var(--tabique);  }     /* DESK */  @media (min-width: 992px) {  :root {  font-size: 1rem;  }  h1 {  font-size: 2rem;  margin-top: 6vh;  }  h2  {  margin-top: 0rem;  margin-bottom: 1rem;  }  main {  display: grid;  grid-template-columns: 1fr 1fr;  width: 900px;  max-width: 90vw;  height: 90vh;  position: absolute;  top: 5vh;  left: calc((100vw - 900px) / 2);  border-radius: 10px;  }  .izq {  width: 270px;  max-width: 90vw;  height: 100%;  border-radius: 10px 0 0 10px;   }  .der {  width: 630px;  max-width: 90vw;  height: 100%;  border-radius: 0 10px 10px 0;  }  .caja_texto {  width: 90%;  max-height: 75vh; margin: 7vh auto 5vh; }  svg {  width: 69%;  margin-left: 31%;  margin-bottom: 1rem;  }   }