
<template>
    <section>
             <!-- Dark mode switcher -->
      <!-- <button
        id="theme-toggle"
        type="button"
        class="w-16 relative flex bg-gray-200 dark:bg-gray-400 mx-auto lg:mx-0 justify-between  rounded-full text-sm py-1.5 px-2.5 focus:outline-none"
     @click="toDarkMode" >
        <div class="animate-go absolute top-1.5  w-5 h-5 bg-gray-900 rounded-full" :class="!darkMode ? 'move-left' : 'move-right'" style="transition:all .4s;transition-timing-function: ease; "></div>
        <svg
          
          id="theme-toggle-light-icon"
          class=" w-5 h-5" :class="darkMode ? '' : 'opacity-0'"
          fill="#FF9900"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
          ></path>
        </svg>
  
        <svg  
          id="theme-toggle-dark-icon"
          class=" w-5 h-5 " :class="!darkMode ? '' : 'opacity-0'"
          fill="#FFDE68"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
            fill-rule="evenodd"
            clip-rule="evenodd"
          ></path>
        </svg>

      </button> -->
      <!-- Dark mode switcher end -->
       
        <div
            class="birthdate   flex gap-2.5 justify-center lg:justify-start flex-wrap flex-col items-center lg:items-end md:flex-row mt-4">
            <div class="flex flex-col gap-0.5" >
            <label>Name</label>
            <input v-model="name" type="text" placeholder="Name" class="  p-3    rounded-full w-80 h-12 border-2 border-gray-600 w-70">
            </div>
            <div class="flex flex-col gap-0.5">
            <label>Geburtsdatum</label>
            <input v-model="date" type="date" class="    p-3  rounded-full h-12 border-2 border-gray-600 w-80">
            </div>
           
            <div class=" birthdate-item flex flex-col gap-2 mt-4 md:mt-0">
                <button @click="Calculat"
                    class="flex justify-center items-center text-gray-900 px-4 border-2 border-gray-900  font-bold rounded-full h-12  ">Berechnen</button>
            </div>

        </div>
        <div v-if="showResult == true" class="container mx-auto text-center text-xl   pb-24 lg:pb-0">
            <p>Name: {{ name }}</p>
            <p>Alter: {{ age }}</p>
        </div>
        <div v-if="showResult == true" class="container justify-between flex flex-wrap gap-14 lg:gap-0 items-center flex-col-reverse lg:flex-row">
            <div class="w-full lg:w-1/2 pr-0 lg:pr-12 text-gray-900   mt-14">
                       

<table class="table text-gray-900" width="100%">
    <tbody>
        <tr class=" p-3 h-14 font-bold" style="background:#c1a3bd;">
            <td></td>
            <td class="pl-4 explanation-item">Chakra</td>
                            <td style="text-align:center"> Physik </td>
                            <td style="text-align:center"> Energie </td>
                            <td style="text-align:center"> Emotionen </td>
        </tr>
        <tr class=" " style="background:#F7F3F6;">
            <td style=" "> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/rosa.png"
                    style="width:50px;position:relative;right:8px;bottom:10px;" alt="icon" /></td>
            <td class="trans" id="chakra7" style="border-right:2px solid #fff; "><span
                    class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
                    <div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
                                            style="font-size:16px;font-weight:bold">Kronenchakra</span><span
                                            style="font-size:13px;text-align:left;">Spiritualität</span> </div>
                </span></td>
            <td class="trans" id="n33" style="border-right:2px solid #fff;text-align:center ">{{ n33 }}
            </td>
            <td class="trans" id="n34" style="border-right:2px solid #fff;text-align:center ">{{ n34 }}
            </td>
            <td class="trans" id="n35" style="text-align:center;">{{ n35 }}
            </td>
        </tr>
        <tr class="p-3" style="background:#F0E9FF;">
            <td> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/violet.png" style="width:50px;position:relative;right:8px;bottom:10px;"
                    alt="icon" /></td>
            <td class="trans" id="chakra6" style="border-right:2px solid #fff; "><span
                    class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
                    <div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
                                            style="font-size:16px;font-weight:bold">Stirnchakra</span><span
                                            style="font-size:13px;text-align:left;">Wahrnehmung</span></div>
                </span></td>
            <td class="trans" id="n36" style="border-right:2px solid #fff; text-align:center">{{ n36 }}
            </td>
            <td class="trans" id="n37" style="border-right:2px solid #fff; text-align:center">{{ n37 }}
            </td>
            <td class="trans" id="n38" style="text-align:center">{{ n38 }}
            </td>
        </tr>
        <tr class="p-3" style="background:#EAFBFB;">
            <td> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/green.png" style="width:50px;position:relative;right:8px;bottom:10px;"
                    alt="icon" /></td>
            <td class="trans" id="chakra5" style="border-right:2px solid #fff; "><span
                    class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
                    <div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
                                            style="font-size:16px;font-weight:bold">Halschakra</span><span
                                            style="font-size:13px;text-align:left;">Manifestation</span></div>
                </span></td>
            <td class="trans" id="n39" style="border-right:2px solid #fff; text-align:center">{{ n39 }}
            </td>
            <td class="trans" id="n40" style="border-right:2px solid #fff;text-align:center ">{{ n40 }}
            </td>
            <td class="trans" id="n41" style="text-align:center">{{ n41 }}
            </td>
        </tr>
        <tr class="  p-3" style="background:#F3FBF7;">
            <td style=" "> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/lightgreen.png"
                    style="width:50px;position:relative;right:8px;bottom:10px;" alt="icon" /></td>
            <td class="trans" id="chakra4" style="border-right:2px solid #fff; "><span
                    class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
                    <div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
                                            style="font-size:16px;font-weight:bold">Herzchakra</span><span
                                            style="font-size:13px;text-align:left;">Beziehungen</span></div>
                </span></td>
            <td class="trans" id="n42" style="border-right:2px solid #fff; text-align:center">{{ n42 }}
            </td>
            <td class="trans" id="n43" style="border-right:2px solid #fff;text-align:center ">{{ n43 }}
            </td>
            <td class="trans" id="n44" style="text-align:center">{{ n44 }}
            </td>
        </tr>
        <tr class=" p-3" style="background:#FEFAF4;">
            <td style=" "> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/orange.png"
                    style="width:50px;position:relative;right:8px;bottom:10px;" alt="icon" /></td>
            <td class="trans" id="chakra3" style="border-right:2px solid #fff; "><span
                    class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
                    <div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
                                            style="font-size:16px;font-weight:bold">Solarplexus</span><span
                                            style="font-size:13px;text-align:left;">Wille</span></div>
                </span></td>
            <td class="trans" id="n45" style="border-right:2px solid #fff; text-align:center">{{ n45 }}
            </td>
            <td class="trans" id="n46" style="border-right:2px solid #fff;text-align:center ">{{ n46 }}
            </td>
            <td class="trans" id="n47" style="text-align:center">{{ n47 }}
            </td>
        </tr>
        <tr class=" p-3" style="background:#FDF1EE">
            <td style=" "> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/tenseorange.png"
                    style="width:50px;position:relative;right:8px;bottom:10px;" alt="icon" /></td>
            <td class="trans" id="chakra2" style="border-right:2px solid #fff; "><span
                    class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
                    <div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
                                            style="font-size:16px;font-weight:bold">Sakralchakra</span><span
                                            style="font-size:13px;text-align:left;">Wünsche</span></div>
                </span></td>
            <td class="trans " id="n48" style="border-right:2px solid #fff;text-align:center ">{{ n48 }}
            </td>
            <td class="trans" id="n49" style="border-right:2px solid #fff;text-align:center ">{{ n49 }}
            </td>
            <td class="trans" id="n50" style="text-align:center">{{ n50 }}
            </td>
        </tr>
        <tr class=" p-3" style="background:#FFEAEA; ">
            <td> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/red.png" style="width:50px;position:relative;right:8px;bottom:10px;"
                    alt="icon" /></td>
            <td class="trans" id="chakra1" style="border-right:2px solid #fff; "><span
                    class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
                    <div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
                                            style="font-size:16px;font-weight:bold">Wurzelchakra</span><span
                                            style="font-size:13px;text-align:left;">Urvertrauen</span></div>
                </span></td>
            <td class="trans" id="n51" style="border-right:2px solid #fff;text-align:center ">{{ n51 }}
            </td>
            <td class="trans" id="n52" style="border-right:2px solid #fff;text-align:center ">{{ n52 }}
            </td>
            <td class="trans" id="n53" style="text-align:center">{{ n53 }}
            </td>
        </tr>
         <tr class=" p-2 pb-4 h-14" style="background:#C6C8D4;">
            <td></td>
            <td class="trans" id="chakra"><span class="td_chakra "
                    style="display:flex; align-items:center;">
                    <div style="display:flex;flex-direction:column; align-items:flex-start;"><span
                            style="font-size:16px;font-weight:bold">
                            Gesamt</span> </div>
                </span></td>
            <td class="trans" id="n54" style="text-align:center">{{ n54 }}
            </td>
            <td class="trans" id="n55" style="text-align:center">{{ n55 }}
            </td>
            <td class="trans" id="n56" style="text-align:center">{{ n56 }}
            </td>
        </tr> 
    </tbody>
</table>
               
                </div>
            
            
            <div class="obch w-full lg:w-1/2 relative"  >
                <div  >
                <img :src="darkMode ? 'https://wordpresstuts.com.br/wp-content/uploads/2024/05/schema-5.png' : 'https://wordpresstuts.com.br/wp-content/uploads/2024/05/schema-5.png'" class="transimage" id="schemaImg">
                <div id="n1" class="trans" style="position:absolute; width:9%; height:9%; left:1%; top:44.6%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Äußeres Selbst</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #ae309a ">
                        <span style=" ">{{ n1
                        }}</span>
                    </div>
                </div>

                <div id="n3" class="trans" style="position:absolute; width:9%; height:9%; left:45%; top:1%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Haupttalent</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;  border:2px solid #ae309a ">
                        <span >{{ n3
                        }}</span>
                    </div>
                </div>

                <div id="n5" class="trans" style="position:absolute; width:9%; height:9%; left:89%; top:44.6%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Seelenaufgabe</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #eb4b41">
                        <span  >{{ n5
                        }}</span>
                    </div>
                </div>

                <div id="n7" class="trans" style="position:absolute; width:9%; height:9%; left:45%; top:88.3%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Karmische Hauptaufgabe</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #eb4b41">
                        <span  >{{ n7
                        }}</span>
                    </div>
                </div>

                <div id="n30" class="trans relative" style="position:absolute; width:9%; height:9%; left:45%; top:45%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Inneres Selbst</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;border:2px solid #ffde68">
                        <span style="">{{
                            n30 }}</span>
                    </div>
                </div>

                <div id="n2" class="trans border-2 border-gray-800  "
                    style="position:absolute; width:9%; height:9%; left:14%; top:14%;  " >
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Ahnenkarma Vaterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; ">
                        <span style="">{{ n2 }}</span>
                    </div>
                </div>

                <div id="n4" class="trans border-2 border-gray-800  "
                    style="position:absolute; width:9%; height:9%; left:76%; top:14%;  " >
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Ahnenkarma Mutterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;  ">
                        <span style="">{{ n4 }}</span>
                    </div>
                </div>

                <div id="n6" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:9%; height:9%; left:76%; top:75.5%;  " >
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Ahnenkarma Vaterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; ">
                        <span style="">{{ n6 }}</span>
                    </div>
                </div>

                <div id="n8" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:9%; height:9%; left:14.4%; top:75.5%;  " >
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Ahnenkarma Mutterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; ">
                        <span style="">{{ n8 }}</span>
                    </div>
                </div>

                <div id="n23" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:47.5%; top:76.3%; ">
                    <p class=" absolute flex items-center justify-center w-52 h-12 py-3 px-2 info">Karmische Aufgabe
                    </p>
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #e98c46">
                        <span  >{{ n23
                        }}</span>
                    </div>
                </div>

                <div id="n21" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:77%; top:47.2%;  ">
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Wohlstandsenergie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;border:2px solid #e98c46">
                        <span  >{{ n21
                        }}</span>
                    </div>
                </div>

                <div id="n28" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:4.5%; height:4.5%; left:61%; top:60.5%;  background:#F0E4F7;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Balancepunkt</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; ">
                        <span style="">{{ n28 }}</span>
                    </div>
                </div>

                <div id="n29" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:4.5%; height:4.5%; left:58.5%; top:66.5%; background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Seelenpartner</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;  ">
                        <span style="">{{ n29 }}</span>
                    </div>
                </div>

                <div id="n17" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:17.5%; top:46.8%; ">
                    <p class=" absolute flex items-center justify-center w-48  h-12 py-3 px-2 info">Eltern Kind Beziehung
                    </p>
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #00b8f4 ">
                        <span >{{ n17
                        }}</span>
                    </div>
                </div>

                <div id="n19" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:47.2%; top:17.5%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Talent</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #00b8f4">
                        <span >{{ n19
                        }}</span>
                    </div>
                </div>

                <div id="n15" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:5.5%; height:5.5%; left:46.9%; top:82%;   background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center w-48  h-12 py-3 px-2 info">Karmische Aufgabe
                    </p>
                    <div style="background:#F0E4F7; width:100%; height:100%;  ">
                        <span style="">{{ n15 }}</span>
                    </div>
                </div>

                <div id="n11" class="trans" style="position:absolute; width:5.5%; height:5.5%; left:46.7%; top:11%; ">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Talent</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #0067d2">
                        <span  >{{ n11
                        }}</span>
                    </div>
                </div>

                <div id="n13" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:5.5%; height:5.5%; left:82.8%; top:46.5%;  background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Eingang in die Geldlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;  ">
                        <span style="">{{ n13 }}</span>
                    </div>
                </div>

                <div id="n25" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:32%; top:46.8%;">
                    <div style="background:#F0E4F7; width:100%; height:100%; border:1px solid #63b062">
                        <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Herzenswünsche</p>
                        <span >{{ n25
                        }}</span>
                    </div>
                </div>

                <div id="n26" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:47%; top:31%;">
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #63b062">
                        <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Herzenswünsche</p>
                        <span  >{{ n26
                        }}</span>
                    </div>
                </div>

                <div id="n9" class="trans" style="position:absolute; width:5.5%; height:5.5%; left:10.9%; top:46.1%;">
                    <p class=" absolute flex items-center justify-center w-48 
                    h-12 py-3 px-2 info">Eltern Kind Beziehung</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #0067d2">
                        <span >{{ n9
                        }}</span>
                    </div>
                </div>

                <div id="n18" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:4.5%; height:4.5%; left:26.8%; top:26.2%; background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Vaterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;  ">
                        <span style="">{{ n18 }}</span>
                    </div>
                </div>

                <div id="n10" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:5.5%; height:5.5%; left:21.9%; top:21.9%; background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Vaterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;  ">
                        <span style="">{{ n10 }}</span>
                    </div>
                </div>

                <div id="n20" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:4.5%; height:4.5%; left:68.8%; top:26.2%; background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Mutterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%;  ">
                        <span style="">{{ n20 }}</span>
                    </div>
                </div>

                <div id="n12" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:5.5%; height:5.5%; left:72.5%; top:21.9%;  background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Mutterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; ">
                        <span style="">{{ n12 }}</span>
                    </div>
                </div>

                <div id="n22" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:4.5%; height:4.5%; left:68.3%; top:67.9%; background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Vaterlinie</p> 
                    <div style="background:#F0E4F7; width:100%; height:100%;  ">
                        <span style="">{{ n22 }}</span>
                    </div>
                </div>

                <div id="n14" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:5.5%; height:5.5%; left:72%; top:71.7%; background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Vaterlinie</p>                    
                    <div style="background:#F0E4F7; width:100%; height:100%;   ">
                        <span style="">{{ n14 }}</span>
                    </div>
                </div>

                <div id="n24" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:4.5%; height:4.5%; left:26.8%; top:67.9%;   background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Generationskarma Mutterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; ">
                        <span style="">{{ n24 }}</span>
                    </div>
                </div>

                <div id="n16" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:5.5%; height:5.5%; left:21.9%; top:71.4%;  background:#F0E4F7;   ">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Generationskarma Mutterlinie</p>
                    <div style="background:#F0E4F7; width:100%; height:100%; ">
                        <span style="">{{ n16 }}</span>
                    </div>
                </div>

                <div id="n27" class="trans  border-2 border-gray-800  "
                    style="position:absolute; width:4.5%; height:4.5%; left:67%; top:58.5%; background:#F0E4F7;   ">
                    <div style="background:#F0E4F7; width:100%; height:100%; ">
                        <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Geldflussenergie</p>
                        <span style="">{{ n27 }}</span>
                    </div>
                </div>

                <div id="n32" class="trans border-2 border-gray-800  "
                    style="position:absolute; width:5.5%; height:5.5%; left:61%; top:46.9%;  background:#F0E4F7;    ">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Macht der Beziehung</p>
                    <div style=" width:100%; height:100%;   "><span
                            style=" "> {{ n32 }}
                        </span>
                    </div>
                </div>


                <div id="n31" class="trans border-2 border-gray-800  "
                    style="position:absolute; width:6.5%; height:6.5%; left:54.3%; top:46.1%;  background:#F0E4F7;    ">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Macht der Ahnenfamilie</p>
                     
                    <div style=" width:100%; height:100%; box-shadow:1px 1px 20px #fff ">
                        <span style=" ">{{ n31
                            }}</span>
                    </div>
                </div>


                <!-- 0 - 10 -->
                <div class="trans  " style="position:absolute; top:30.3%; left:3.1%; height:3%; width:5%;">
                    <span style="">{{ y1 }}</span>
                </div>
                <div class="trans   " style="position:absolute; top:36.5%; left:0.6%; height:3%; width:5%;">
                    <span style="">{{ y2 }}</span>
                </div>
                <div class="trans   " style="position:absolute; top:39.5%; left:-.4%; height:3%; width:5%;">
                    <span style="">{{ y3 }}</span>
                </div>
                <div class="trans   " style="position:absolute; top:33.5%; left:1.6%; height:3%; width:5%;">
                    <span style="">{{ y4 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:24.3%; left:6.1%; height:3%; width:5%;">
                    <span style="">{{ y5 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:21.1%; left:7.2%; height:3%; width:5%;">
                    <span style="">{{ y6 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:27.3%; left:4.5%; height:3%; width:5%;">
                    <span style="">{{ y7 }}</span>
                </div>
                <!-- 10 - 20 -->
                <div class="trans  " style="position:absolute; top:4%; left:29.7%; height:3%; width:5%;">
                    <span style="">{{ y8 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:6.5%; left:23.5%; height:3%; width:5%;">
                    <span style="">{{ y9 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:8%; left:20%; height:3%; width:5%;">
                    <span style="">{{ y10 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:5.2%; left:26.5%; height:3%; width:5%;">
                    <span style="">{{ y11 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:1.5%; left:36%; height:3%; width:5%;">
                    <span style="">{{ y12 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:0.5%; left:39.5%; height:3%; width:5%;">
                    <span style="">{{ y13 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:2.7%; left:33%; height:3%; width:5%;">
                    <span style="">{{ y14 }}</span>
                </div>
                <!-- 20 - 30 -->
                <div class="trans  " style="position:absolute; top:3.8%; left:65.5%; height:3%; width:5%;">
                    <span style="">{{ y15 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:1.7%; left:59.7%; height:3%; width:5%;">
                    <span style="">{{ y16 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:0.4%; left:55.3%; height:3%; width:5%;">
                    <span style="">{{ y17 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:2.8%; left:63%; height:3%; width:5%;">
                    <span style="">{{ y18 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:6.6%; left:71.3%; height:3%; width:5%;">
                    <span style="">{{ y19 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:5.4%; left:68.5%; height:3%; width:5%;">
                    <span style="">{{ y20 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:7.8%; left:74.6%; height:3%; width:5%;">
                    <span style="">{{ y21 }}</span>
                </div>
                <!-- 30 - 40 -->
                <div class="trans  " style="position:absolute; top:29.4%; left:90.6%; height:3%; width:5%;">
                    <span style="">{{ y22 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:23.3%; left:88.0%; height:3%; width:5%;">
                    <span style="">{{ y23 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:20.1%; left:86.8%; height:3%; width:5%;">
                    <span style="">{{ y24 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:26.1%; left:89.6%; height:3%; width:5%;">
                    <span style="">{{ y25 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:35.5%; left:93.1%; height:3%; width:5%;">
                    <span style="">{{ y26 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:39.2%; left:94.6%; height:3%; width:5%;">
                    <span style="">{{ y27 }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:32.5%; left:92%; height:3%; width:5%;">
                    <span style="">{{ y28 }}</span>
                </div>
                <!-- 40 - 50 -->
                <!-- 40 - 50 -->
                <div class="trans  " style="position:absolute; top:65%; left:91.5%; height:3%; width:5%;">
                    <span style="" id="y29">{{ y29
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:59%; left:93.5%; height:3%; width:5%;">
                    <span style="" id="y30">{{ y30
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:62%; left:92.5%; height:3%; width:5%;">
                    <span style="" id="y31">{{ y31
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:55.6%; left:95%; height:3%; width:5%;">
                    <span style="" id="y32">{{ y32
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:71.5%; left:88.5%; height:3%; width:5%;">
                    <span style="" id="y33">{{ y33
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:74.4%; left:87%; height:3%; width:5%;">
                    <span style="" id="y34">{{ y34
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:68.3%; left:90%; height:3%; width:5%;">
                    <span style="" id="y35">{{ y35
                    }}</span>
                </div>
                <!-- 50 - 60 -->
                <div class="trans  " style="position:absolute; top:91.4%; left:65%; height:3%; width:5%;">
                    <span style="" id="y36">{{ y36
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:88.3%; left:71.7%; height:3%; width:5%;">
                    <span style="" id="y37">{{ y37
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:87%; left:75.0%; height:3%; width:5%;">
                    <span style="" id="y38">{{ y38
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:89.5%; left:68.7%; height:3%; width:5%;">
                    <span style="" id="y39">{{ y39
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:93.5%; left:59%; height:3%; width:5%;">
                    <span style="" id="y40">{{ y40
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:92%; left:62%; height:3%; width:5%;">
                    <span style="" id="y41">{{ y41
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:95%; left:55%; height:3%; width:5%;">
                    <span style="" id="y42">{{ y42
                    }}</span>
                </div>
                <!-- 60 - 70 -->
                <div class="trans  " style="position:absolute; top:91.6%; left:29.4%; height:3%; width:5%;">
                    <span style="" id="y43">{{ y43
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:93.9%; left:36%; height:3%; width:5%;">
                    <span style="" id="y44">{{ y44
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:95.3%; left:39.1%; height:3%; width:5%;">
                    <span style="" id="y45">{{ y45
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:92.7%; left:32.7%; height:3%; width:5%;">
                    <span style="" id="y46">{{ y46
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:88.9%; left:23.5%; height:3%; width:5%;">
                    <span style="" id="y47">{{ y47
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:90%; left:26.5%; height:3%; width:5%;">
                    <span style="" id="y48">{{ y48
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:87.8%; left:20.5%; height:3%; width:5%;">
                    <span style="" id="y49">{{ y49
                    }}</span>
                </div>
                <!-- 70 - 80 -->
                <div class="trans  " style="position:absolute; top:65.3%; left:3.1%; height:3%; width:5%;">
                    <span style="" id="y50">{{ y50
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:72%; left:6.1%; height:3%; width:5%;">
                    <span style="" id="y51">{{ y51
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:75%; left:7.4%; height:3%; width:5%;">
                    <span style="" id="y52">{{ y52
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:68.5%; left:4.5%; height:3%; width:5%;">
                    <span style="" id="y53">{{ y53
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:59%; left:0.4%; height:3%; width:5%;">
                    <span style="" id="y54">{{ y54
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:56%; left:-.3%; height:3%; width:5%;">
                    <span style="" id="y55">{{ y55
                    }}</span>
                </div>
                <div class="trans  " style="position:absolute; top:62%; left:1.6%; height:3%; width:5%;">
                    <span style="" id="y56">{{ y56
                    }}</span>
                </div>

                </div>

                <div class="added">

                    <div id="n68" class="trans" style="position:absolute; width:9%; height:9%; left:6%; top:8%;">
                    <p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenaufgabe Vaterlinie</p>
                    <div style=" width:100%; height:100%;" class="border-2 border-gray-900 text-gray-900    ">
                        <span style=" ">{{ n68
                        }}</span>
                    </div>
                    </div>

                    <div id="y" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:0.5%; top:8%;">
                    <div style="  width:100%; height:100%;  " class="border-2 border-gray-900 text-gray-900    ">
                        <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Ahnenkarma Vaterlinie</p>
                        <span style=" ">{{ y
                        }}</span>
                    </div>
                    </div>

                    <div id="f" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:8%; top:2%;">
                    <div style="  width:100%; height:100%;  " class="border-2 border-gray-900 text-gray-900    ">
                        <p class=" absolute flex items-center justify-center  h-12 py-3 px-2 info">Ahnenkarma Vaterlinie</p>
                        <span style="  ">{{ f
                        }}</span>
                    </div>
                    </div>



                    <div id="n69" class="trans" style="position:absolute; width:9%; height:9%; left:45%; top:-10%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Seelenvertrag Planetarisch</p>
                    <div style=" width:100%; height:100%;  " class="border-2 border-gray-900 text-gray-900    ">
                        <span style=" ">{{ n69
                        }}</span>
                    </div>
                    </div>




                <div id="n70" class="trans" style="position:absolute; width:9%; height:9%; left:84%; top:8%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Seelenvertrag Selbstfindung</p>
                    <div style=" width:100%; height:100%;  " class="border-2 border-gray-900 text-gray-900    ">
                        <span style=" ">{{ n70
                        }}</span>
                    </div>
                </div> 

                    <div id="j" class="trans" style="position:absolute; width:4.5%; height:4.5%; right:1%; top:8%;">
                    <div style="  width:100%; height:100%;  " class="border-2 border-gray-900 text-gray-900    ">
                        <p class=" absolute flex items-center justify-center  h-12 py-3 px-2 info">Erde / Materiell</p>
                        <span style=" ">{{ j
                        }}</span>
                    </div>
                    </div>

                    <div id="h" class="trans" style="position:absolute; width:4.5%; height:4.5%; right:8%; top:2%;">
                    <div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900    ">
                        <p class=" absolute flex items-center justify-center  h-12 py-3 px-2 info">Himmel / Spirituell</p>
                        <span style=" ">{{ h
                        }}</span>
                    </div>
                    </div>



                <div id="n71" class="trans" style="position:absolute; width:9%; height:9%; left:6%; bottom:9%;">
                    <p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenaufgabe Mutterlinie</p>
                    <div style=" width:100%; height:100%;   " class="border-2 border-gray-900 text-gray-900    ">
                        <span style=" ">{{ n71
                        }}</span>
                    </div>
                </div>

                    <div id="k" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:0.5%; bottom:9%;">
                    <div style="  width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900    ">
                        <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Ahnenkarma Mutterlinie</p>
                        <span style=" ">{{k
                        }}</span>
                    </div>
                    </div>

                    <div id="g" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:8%; bottom:3.3%;">
                    <div style=" width:100%; height:100%;  " class="border-2 border-gray-900 text-gray-900    ">
                        <p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenkarma Mutterlinie</p>
                        <span style="  ">{{ g
                        }}</span>
                    </div>
                    </div>



                <div id="n72" class="trans" style="position:absolute; width:9%; height:9%; left:45%; bottom:-8%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Seelenvertrag Spiritualität</p>
                    <div style="  width:100%; height:100%;  " class="border-2 border-gray-900 text-gray-900    ">
                        <span style=" ">{{ n72
                        }}</span>
                    </div>
                </div>

                <div id="n73" class="trans" style="position:absolute; width:9%; height:9%; left:83%; bottom:8%;">
                    <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Seelenvertrag Gesellschaft</p>
                    <div style=" width:100%; height:100%;   " class="border-2 border-gray-900 text-gray-900    ">
                        <span style=" ">{{ n73
                        }}</span>
                    </div>
                </div> 

                <div id="n" class="trans" style="position:absolute; width:4.5%; height:4.5%; right:2.2%; bottom:8%;">
                    <div style=" width:100%; height:100%;  " class="border-2 border-gray-900 text-gray-900    ">
                        <p class=" absolute flex items-center justify-center   h-12 py-3 px-2 info">Männlich</p>
                        <span style=" ">{{n
                        }}</span>
                    </div>
                    </div>

                    <div id="t" class="trans" style="position:absolute; width:4.5%; height:4.5%; right:9%; bottom:2%;">
                    <div style="  width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900    ">
                        <p class=" absolute flex items-center justify-center h-12 py-3 px-2 info" >Weiblich</p>
                        <span style=" " >{{ t
                        }}</span>
                    </div>
                    </div>

                </div>

            </div> 
            </div>
                <div v-if="showResult == true" class="container mx-auto w-full">

                <div class="flex flex-wrap justify-center   mt-12 px-12 lg:px-2">

                    <div class="flex gap-4  w-full  mb-4 items-center">
                        <p>Programme aus der väterlichen Abstammungslinie:</p>
                        <div class="flex gap-0.5" >
                            <div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n2 }}</div>
                            <div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n6 }}</div>
                            <div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n64 }}</div>
                        </div>
                    </div>

                    <div class="flex gap-4  w-full mb-4 items-center">
                        <p>Programme aus der mütterlichen Abstammungslinie:</p>
                        <div class="flex gap-0.5" >
                            <div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n4 }}</div>
                            <div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n8 }}</div>
                            <div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n65 }}</div>
                        </div>
                    </div>

            <div class="flex items-start justify-between flex-wrap mt-12 gap-5 lg:gap-0 w-full">
                    <div class="flex flex-col gap-6 w-full lg:w-1/4 justify-between">

                        <div class="flex items-center flex-col ">
                            <div style="font-size:17px; font-weight:bold; margin-bottom:5px;">Seelenvertrag Selbstfindung
                            </div>
                             
                        </div>
                        <div class="flex justify-center gap-2.5 items-center">
                            <div>
                                <div class="flex items-center justify-between gap-2.5">
                                    <p>Himmel </p>
                                    <span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n57">{{ n57 }}</span>
                                </div>
                                <div class="flex items-center justify-between gap-2.5">
                                    <p>Erde</p>
                                    <span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n59">{{ n59 }}</span>
                                </div>
                            </div>

                            <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/04/curlybraces.png" alt="curly" />
                            <div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n58">{{ n58 }}</div>
                        </div>
                    </div>

                    <div class="flex flex-col gap-6 w-full lg:w-1/4 justify-between">
                        <div class="flex items-center flex-col ">
                            <div style="font-size:17px; font-weight:bold; margin-bottom:5px;">Seelenvertrag Gesellschaft 
                            </div>
                             
                        </div>
                        <div class="flex justify-center gap-2.5 items-center">
                            <div>
                                <div class="flex items-center justify-between gap-2.5">
                                    <p>M</p>
                                    <span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n60">{{ n60 }}</span>
                                </div>
                                <div class="flex items-center justify-between gap-2.5">
                                    <p>W</p>
                                    <span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n62">{{ n62 }}</span>
                                </div>
                            </div>
                            <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/04/curlybraces.png" alt="curly" />
                            <div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n61 }}</div>
                        </div>
                    </div>

                    <div class="flex flex-wrap lg:flex-nowrap gap-2.5  w-full lg:w-1/4">
                        <div class="flex flex-col gap-2.5 w-full">
                            <div class="flex gap-2.5 items-center justify-center">
                                <span style="font-size:17px; font-weight:bold; ">Seelenvertrag Spiritualität</span>
                                
                            </div>
                            
                            <span class="round  trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center mx-auto" id="n63">{{ n63 }}</span>
                        </div>
                    </div>

                    <div class="flex flex-wrap lg:flex-nowrap gap-2.5  w-full lg:w-1/4">
                        <div class="flex flex-col gap-2.5 w-full">
                            <div class="flex gap-2.5 items-center justify-center">
                                <span style="font-size:17px; font-weight:bold; ">Seelenvertrag Planetarisch</span>
                                
                            </div>
                            
                            <span class="round  trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center mx-auto" id="n69">{{ n69 }}</span>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        
 
       
    </section>
</template>

<script>
 
 
export default {

    data() {
        return { 
             
            schema: "schema.png", 
            name: '',
            age: '',
            date: '09-09-1999',
            resultDay: 0,
            resultMonth: 0,
            resultYear: 0,        
           
            isRestult: true,
            showResult: false,
            values: 0,
            day: 2,
            month: 4,
            year: 1981,
            h:0,
            j:0,
            k:0,
            t:0,
            g:0,
            n:0,
            y:0,
            f:0,
            n1: 0,
            n3: 0,
            n5: 0,
            n2: 0,
            n4: 0,
            n6: 0,
            n7: 0,
            n8: 0,
            n9: 0,
            n10: 0,
            n11: 0,
            n12: 0,
            n13: 0,
            n14: 0,
            n15: 0,
            n16: 0,
            n17: 0,
            n18: 0,
            n19: 0,
            n20: 0,
            n21: 0,
            n22: 0,
            n23: 0,
            n24: 0,
            n25: 0,
            n26: 0,
            n27: 0,
            n28: 0,
            n29: 0,
            n30: 0,
            n31:0,
            n32:0,
            y1: 0,
            y2: 0,
            y3: 0,
            y4: 0,
            y5: 0,
            y6: 0,
            y7: 0,
            y8: 0,
            y9: 0,
            y10: 0,
            y11: 0,
            y12: 0,
            y13: 0,
            y14: 0,
            y15: 0,
            y16: 0,
            y17: 0,
            y18: 0,
            y19: 0,
            y20: 0,
            y21: 0,
            y22: 0,
            y23: 0,
            y24: 0,
            y25: 0,
            y26: 0,
            y27: 0,
            y28: 0,
            y29: 0,
            y30: 0,
            y31: 0,
            y32: 0,
            y33: 0,
            y34: 0,
            y35: 0,
            y36: 0,
            y37: 0,
            y38: 0,
            y39: 0,
            y40: 0,
            y41: 0,
            y42: 0,
            y43: 0,
            y44: 0,
            y45: 0,
            y46: 0,
            y47: 0,
            y48: 0,
            y49: 0,
            y50: 0,
            y51: 0,
            y52: 0,
            y53: 0,
            y54: 0,
            y55: 0,
            y56: 0,
            n33: 0,
            n34: 0,
            n35: 0,
            n36: 0,
            n37: 0,
            n38: 0,
            n39: 0,
            n40: 0,
            n41: 0,
            n42: 0,
            n43: 0,
            n44: 0,
            n45: 0,
            n46: 0,
            n47: 0,
            n48: 0,
            n49: 0,
            n50: 0,
            n51: 0,
            n52: 0,
            n53: 0,
            n54: 0,
            n55: 0,
            n56: 0,
            n57: 0,
            n58: 0,
            n59: 0,
            n60: 0,
            n61: 0,
            n62: 0,
            n63: 0,
            n64:0,
            n65:0,
            n66:0,
            n67:0,
            n68:0,
            n69:0,
            n70:0,
            n71:0,
            n72:0,
            n73:0,
        }
    },
    methods: {
        isDarkMode(){
            if (localStorage.getItem("color-theme")) {
                if (localStorage.getItem("color-theme") === "light") {
                    this.darkMode = true;
                }else{
                    this.darkMode = false;
                }
            }
        },
        toDarkMode(){
         
        // if set via local storage previously
        if (localStorage.getItem("color-theme")) {
          if (localStorage.getItem("color-theme") === "light") {
            document.documentElement.classList.add("dark");
            this.darkMode = false;
            localStorage.setItem("color-theme", "dark");
          } else {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("color-theme", "light");
            this.darkMode = true;
          }

          // if NOT set via local storage previously
        } else {
          if (document.documentElement.classList.contains("dark")) {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("color-theme", "light");
            this.darkMode = true;
             
          } else {
            document.documentElement.classList.add("dark");
            localStorage.setItem("color-theme", "dark");
            this.darkMode = false;
             
          }
        }
    
        },

        Age(){
    var today = new Date();
    var birthDate = new Date(this.date);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    this.age = age;
},

        IfIsMoreThan22(value) {
            if (value > 22) {
                this.values = value.toString().split('').map(Number);
                value = this.values.reduce((a, b) => b + a);

                if (value < 22) {
                    return value;
                } else {

                    if(value == 22){
                        return value
                    }else {
                        this.values = value.toString().split('').map(Number);
                    value = this.values.reduce((a, b) => b + a);
                    return value;
                    }
                   
                }

            } else {
                return value;
            }
        },
        TheN1() {
            this.resultDay = this.date.split('-');
            this.day = parseInt(this.resultDay[2]);
            this.n1 = this.IfIsMoreThan22(this.day);
        },

        TheN5() {
            this.resultYear = this.date.split('-');
            this.year = parseInt(this.resultYear[0]);
            this.n5 = this.IfIsMoreThan22(this.year);
        },

        TheN3() {
            this.resultMonth = this.date.split('-');
            this.month = parseInt(this.resultMonth[1]);
            this.n3 = this.IfIsMoreThan22(this.month);
        },

        TheN7() {
            this.n7 = this.IfIsMoreThan22(this.n1 + this.n5 + this.n3);
        },

        TheD() {
            this.n30 = this.IfIsMoreThan22(this.n1 + this.n5 + this.n3 + this.n7);
        },
        TheN17() {

            this.n17 = this.IfIsMoreThan22(this.n30 + this.n1);
        },
        TheN19() {
            this.n19 = this.IfIsMoreThan22(this.n3 + this.n30);
        },

        TheN21() {
            this.n21 = this.IfIsMoreThan22(this.n5 + this.n30);
        },

        TheN23() {
            this.n23 = this.IfIsMoreThan22(this.n7 + this.n30);
        },

        TheN9() {
            this.n9 = this.IfIsMoreThan22(this.n1 + this.n17);
        },

        TheN11() {
            this.n11 = this.IfIsMoreThan22(this.n19 + this.n3);
        },
        TheN13() {
            this.n13 = this.IfIsMoreThan22(this.n5 + this.n21);
        },

        TheN15() {
            this.n15 = this.IfIsMoreThan22(this.n7 + this.n23);
        },

        TheN2() {
            this.n2 = this.IfIsMoreThan22(this.n1 + this.n3);
        },

        TheN4() {
            this.n4 = this.IfIsMoreThan22(this.n5 + this.n3);
        },

        TheN6() {
            this.n6 = this.IfIsMoreThan22(this.n5 + this.n7);
        },

        TheN8() {
            this.n8 = this.IfIsMoreThan22(this.n1 + this.n7);
        },

        TheN18() {
            this.n18 = this.IfIsMoreThan22(this.n2 + this.n30);
        },

        TheN20() {
            this.n20 = this.IfIsMoreThan22(this.n4 + this.n30);
        },

        TheN22() {
            this.n22 = this.IfIsMoreThan22(this.n6 + this.n30);
        },

        TheN24() {
            this.n24 = this.IfIsMoreThan22(this.n8 + this.n30);
        },

        TheN10() {
            this.n10 = this.IfIsMoreThan22(this.n2 + this.n18);
        },

        TheN12() {
            this.n12 = this.IfIsMoreThan22(this.n4 + this.n20);
        },

        TheN14() {
            this.n14 = this.IfIsMoreThan22(this.n6 + this.n22);
        },

        TheN16() {
            this.n16 = this.IfIsMoreThan22(this.n8 + this.n24);
        },

        TheN26() {
            this.n26 = this.IfIsMoreThan22(this.n19 + this.n30);
        },

        TheN25() {
            this.n25 = this.IfIsMoreThan22(this.n17 + this.n30);
        },

        TheN31() {
            this.n31 = this.IfIsMoreThan22(this.n2 + this.n4 + this.n6 + this.n8);
        },

        TheN32() {
            this.n32 = this.IfIsMoreThan22(this.n30 + this.n31);
        },


        TheN28() {
            this.n28 = this.IfIsMoreThan22(this.n23 + this.n21);
        },

        TheN27() {
            this.n27 = this.IfIsMoreThan22(this.n28 + this.n21);
        },

        TheN29() {
            this.n29 = this.IfIsMoreThan22(this.n28 + this.n23);
        },

        //calculating years

        TheY1() {
            this.y1 = this.IfIsMoreThan22(this.n1 + this.n2);
        },

        TheY2() {
            this.y2 = this.IfIsMoreThan22(this.n1 + this.y1);
        },

        TheY3() {
            this.y3 = this.IfIsMoreThan22(this.n1 + this.y2);
        },

        TheY4() {
            this.y4 = this.IfIsMoreThan22(this.y1 + this.y2);
        },

        TheY5() {
            this.y5 = this.IfIsMoreThan22(this.y1 + this.n2);
        },

        TheY7() {
            this.y7 = this.IfIsMoreThan22(this.y1 + this.y5);
        },

        TheY6() {
            this.y6 = this.IfIsMoreThan22(this.y5 + this.n2);
        },

        TheY8() {
            this.y8 = this.IfIsMoreThan22(this.n3 + this.n2);
        },

        TheY9() {
            this.y9 = this.IfIsMoreThan22(this.y8 + this.n2);
        },

        TheY10() {
            this.y10 = this.IfIsMoreThan22(this.y9 + this.n2);
        },

        TheY11() {
            this.y11 = this.IfIsMoreThan22(this.y9 + this.y8);
        },

        TheY12() {
            this.y12 = this.IfIsMoreThan22(this.n3 + this.y8);
        },

        TheY13() {
            this.y13 = this.IfIsMoreThan22(this.month + this.y12);
        },

        TheY14() {
            this.y14 = this.IfIsMoreThan22(this.y8 + this.y12);
        },

        TheY15() {
            this.y15 = this.IfIsMoreThan22(this.month + this.n4);
        },

        TheY16() {
            this.y16 = this.IfIsMoreThan22(this.month + this.y15);
        },

        TheY17() {
            this.y17 = this.IfIsMoreThan22(this.month + this.y16);
        },

        TheY18() {
            this.y18 = this.IfIsMoreThan22(this.y15 + this.y16);
        },

        TheY19() {
            this.y19 = this.IfIsMoreThan22(this.y15 + this.n4);
        },

        TheY20() {
            this.y20 = this.IfIsMoreThan22(this.y15 + this.y19);
        },

        TheY21() {
            this.y21 = this.IfIsMoreThan22(this.n4 + this.y19);
        },

        TheY22() {
            this.y22 = this.IfIsMoreThan22(this.n5 + this.n4);
        },

        TheY23() {
            this.y23 = this.IfIsMoreThan22(this.y22 + this.n4);
        },

        TheY24() {
            this.y24 = this.IfIsMoreThan22(this.y23 + this.n4);
        },

        TheY25() {
            this.y25 = this.IfIsMoreThan22(this.y23 + this.y22);
        },

        TheY26() {
            this.y26 = this.IfIsMoreThan22(this.n5 + this.y22);
        },

        TheY27() {
            this.y27 = this.IfIsMoreThan22(this.n5 + this.y26);
        },

        TheY28() {
            this.y28 = this.IfIsMoreThan22(this.y22 + this.y26);
        },

        TheY29() {
            this.y29 = this.IfIsMoreThan22(this.n6 + this.n5);
        },

        TheY30() {
            this.y30 = this.IfIsMoreThan22(this.y29 + this.n5);
        },

        TheY31() {
            this.y31 = this.IfIsMoreThan22(this.y29 + this.y30);
        },

        TheY32() {
            this.y32 = this.IfIsMoreThan22(this.n5 + this.y30);
        },

        TheY33() {
            this.y33 = this.IfIsMoreThan22(this.n6 + this.y29);
        },

        TheY34() {
            this.y34 = this.IfIsMoreThan22(this.n6 + this.y33);
        },

        TheY35() {
            this.y35 = this.IfIsMoreThan22(this.y29 + this.y33);
        },

        TheY36() {
            this.y36 = this.IfIsMoreThan22(this.n6 + this.n7);
        },

        TheY37() {
            this.y37 = this.IfIsMoreThan22(this.n6 + this.y36);
        },

        TheY38() {
            this.y38 = this.IfIsMoreThan22(this.n6 + this.y37);
        },

        TheY39() {
            this.y39 = this.IfIsMoreThan22(this.y36 + this.y37);
        },

        TheY40() {
            this.y40 = this.IfIsMoreThan22(this.y36 + this.n7);
        },

        TheY41() {
            this.y41 = this.IfIsMoreThan22(this.y36 + this.y40);
        },

        TheY42() {
            this.y42 = this.IfIsMoreThan22(this.n7 + this.y40);
        },

        TheY43() {
            this.y43 = this.IfIsMoreThan22(this.n7 + this.n8);
        },

        TheY44() {
            this.y44 = this.IfIsMoreThan22(this.n7 + this.y43);
        },

        TheY45() {
            this.y45 = this.IfIsMoreThan22(this.n7 + this.y44);
        },

        TheY46() {
            this.y46 = this.IfIsMoreThan22(this.y43 + this.y44);
        },

        TheY47() {
            this.y47 = this.IfIsMoreThan22(this.y43 + this.n8);
        },

        TheY48() {
            this.y48 = this.IfIsMoreThan22(this.y43 + this.y47);
        },

        TheY49() {
            this.y49 = this.IfIsMoreThan22(this.n8 + this.y47);
        },

        TheY50() {
            this.y50 = this.IfIsMoreThan22(this.n8 + this.n1);
        },

        TheY51() {
            this.y51 = this.IfIsMoreThan22(this.n8 + this.y50);
        },

        TheY52() {
            this.y52 = this.IfIsMoreThan22(this.n8 + this.y51);
        },

        TheY53() {
            this.y53 = this.IfIsMoreThan22(this.y50 + this.y51);
        },

        TheY54() {
            this.y54 = this.IfIsMoreThan22(this.y50 + this.n1);
        },

        TheY55() {
            this.y55 = this.IfIsMoreThan22(this.n1 + this.y54);
        },

        TheY56() {
            this.y56 = this.IfIsMoreThan22(this.y50 + this.y54);
        },

        TheN33() {
            this.n33 = this.n1;
        },

        TheN34() {
            this.n34 = this.n3;
        },

        TheN35() {
            this.n35 = this.IfIsMoreThan22(this.n3 + this.n1);
        },

        TheN36() {
            this.n36 = this.n9;
        },

        TheN37() {
            this.n37 = this.n11;
        },

        TheN38() {
            this.n38 = this.IfIsMoreThan22(this.n9 + this.n11);
        },

        TheN39() {
            this.n39 = this.n17;
        },

        TheN40() {
            this.n40 = this.n19;
        },

        TheN41() {
            this.n41 = this.IfIsMoreThan22(this.n19 + this.n17);
        },

        TheN42() {
            this.n42 = this.n25;
        },

        TheN43() {
            this.n43 = this.n26;
        },

        TheN44() {
            this.n44 = this.IfIsMoreThan22(this.n26 + this.n25);
        },

        TheN45() {
            this.n45 = this.n30;
        },

        TheN46() {
            this.n46 = this.n30;
        },

        TheN47() {
            this.n47 = this.IfIsMoreThan22(this.n30 + this.n30);
        },

        TheN48() {
            this.n48 = this.n21;
        },

        TheN49() {
            this.n49 = this.n23;
        },

        TheN50() {
            this.n50 = this.IfIsMoreThan22(this.n21 + this.n23);
        },

        TheN51() {
            this.n51 = this.n5;
        },

        TheN52() {
            this.n52 = this.n7;
        },

        TheN53() {
            this.n53 = this.IfIsMoreThan22(this.n5 + this.n7);
        },

        TheN54() {
            this.n54 = this.IfIsMoreThan22(this.n1 + this.n9 + this.n17 + this.n25 + this.n30 + this.n21 + this.n5);
        },

        TheN55() {
            this.n55 = this.IfIsMoreThan22(this.n3 + this.n11 + this.n19 + this.n26 + this.n30 + this.n23 + this.n7);
        },

        TheN56() {
            this.n56 = this.IfIsMoreThan22(this.n35 + this.n38 + this.n41 + this.n44 +  this.n47  + this.n50 + this.n53 );
        },

        TheN57() {
            this.n57 = this.IfIsMoreThan22(this.n3 + this.n7);
        },


        TheN59() {
            this.n59 = this.IfIsMoreThan22(this.n1 + this.n5);
        },

        TheN58() {
            this.n58 = this.IfIsMoreThan22(this.n59 + this.n57);
        },


        TheN60() {
            this.n60 = this.IfIsMoreThan22(this.n2 + this.n6);
        },


        TheN62() {
            this.n62 = this.IfIsMoreThan22(this.n4 + this.n8);
        },

        TheN61() {
            this.n61 = this.IfIsMoreThan22(this.n60 + this.n62);
        },


        TheN63() {
            this.n63 = this.IfIsMoreThan22(this.n58 + this.n61);
        },

        
        TheN64() {
            this.n64 = this.IfIsMoreThan22(this.n2 + this.n6);
        },

        TheN65() {
            this.n65 = this.IfIsMoreThan22(this.n4 + this.n8);
        },
        Theh(){
            this.h = this.IfIsMoreThan22(this.n3 + this.n7);
        },

        Thej(){
            this.j = this.IfIsMoreThan22(this.n1 + this.n5);
        },

        TheM(){
            this.n70 = this.IfIsMoreThan22(this.j + this.h);
        },

        They(){
           this.y = this.n6;
        },

        Thef(){
           this.f = this.n2;
        },

        Thek(){
           this.k = this.n8;
        },

        Theg(){
           this.g = this.n4;
        },

        TheU(){
            this.n71 = this.IfIsMoreThan22(this.k + this.g);
        },

        TheO(){
            this.n68 = this.IfIsMoreThan22(this.y + this.f);
        },
        
        TheN(){
            this.n = this.IfIsMoreThan22(this.y + this.f);
        },

        TheT(){
            this.t = this.IfIsMoreThan22(this.k + this.g);
        },

        TheZ(){
            this.n73 = this.IfIsMoreThan22(this.t + this.n);
        },

        TheSE(){
            this.n72 =  this.IfIsMoreThan22(this.n73 + this.n70);
        },

        TheSP(){
            this.n69 = this.IfIsMoreThan22(this.n72 + this.n73);
        },


        Calculat() {
            if(this.date != '----------'){

           
            this.Age();
            this.isRestult = true;
            this.showResult = true;
            this.TheN1();
            this.TheN5();
            this.TheN3();
            this.TheN7();
            this.TheD();
            this.TheN17();
            this.TheN19();
            this.TheN41();
            this.TheN21();
            this.TheN23();
            this.TheN9();
            this.TheN11();
            this.TheN13();
            this.TheN2();
            this.TheN15();
            this.TheN4();
            this.TheN6();
            this.TheN8();
            this.TheN18();
            this.TheN20();
            this.TheN22();
            this.TheN24();
            this.TheN10();
            this.TheN12();
            this.TheN14();
            this.TheN16();
            this.TheN26();
            this.TheN25();
            this.TheN31();
            this.TheN32();
            this.TheN28();
            this.TheN27();
            this.TheN29();
            this.TheY1();
            this.TheY2();
            this.TheY3();
            this.TheY4();
            this.TheY5();
            this.TheY7();
            this.TheY6();
            this.TheY8();
            this.TheY9();
            this.TheY10();
            this.TheY11();
            this.TheY12();
            this.TheY13();
            this.TheY14();
            this.TheY15();
            this.TheY16();
            this.TheY17();
            this.TheY18();
            this.TheY19();
            this.TheY20();
            this.TheY21();
            this.TheY22();
            this.TheY23();
            this.TheY24();
            this.TheY25();
            this.TheY26();
            this.TheY27();
            this.TheY28();
            this.TheY29();
            this.TheY30();
            this.TheY31();
            this.TheY32();
            this.TheY33();
            this.TheY34();
            this.TheY35();
            this.TheY36();
            this.TheY37();
            this.TheY38();
            this.TheY39();
            this.TheY40();
            this.TheY41();
            this.TheY42();
            this.TheY43();
            this.TheY44();
            this.TheY45();
            this.TheY46();
            this.TheY47();
            this.TheY48();
            this.TheY49();
            this.TheY50();
            this.TheY51();
            this.TheY52();
            this.TheY53();
            this.TheY54();
            this.TheY55();
            this.TheY56();
            this.TheN33();
            this.TheN34();
            this.TheN35();
            this.TheN36();
            this.TheN37();
            this.TheN38();
            this.TheN39();
            this.TheN40();
            this.TheN41();
            this.TheN42();
            this.TheN43();
            this.TheN44();
            this.TheN45();
            this.TheN46();
            this.TheN47();
            this.TheN48();
            this.TheN49();
            this.TheN50();
            this.TheN51();
            this.TheN52();
            this.TheN53();
            this.TheN54();
            this.TheN55();
            this.TheN56();
            this.TheN57();
            this.TheN59();
            this.TheN58();
            this.TheN60();
            this.TheN62();
            this.TheN61();
            this.TheN63();
            this.TheN64();
            this.TheN65();
            this.Theh();
            this.Thej();
            this.TheM();
            this.They();
            this.Thef();
            this.Thek();
            this.Theg();
            this.TheU();
            this.TheO();
            this.TheN();
            this.TheT();
            this.TheZ();
            this.TheSE();
            this.TheSP();

        }else {
            alert('Please, informe the birthdate');
        }
        }
        
    },
    beforeMount() {
     
    this.isDarkMode();
    },
     
}
</script>

<style scoped>

 
  
      .animate-go.move-left  { right: 10px;  }
      .animate-go.move-right  { left: 15px;  }
       
      .animate-go.move-left {
        left: 90%; 
        transform: translate(-240%, 0);
      }

      .animate-go.move-right {
        right: 110%; 
        transform: translate(100%, 0);
      }

      
.resultItem {
    background: #fafbfc;
}

.sectionopener items-center span {
    font-size: 24px;
    font-weight: bold;
}

.info {
    border-radius: 8px;
    top: -45px;
    left: 50%;
    transform: translate(-50%);
    display: none;
    z-index: 1000;
    transition: 300ms;
    background: rgb(249, 236, 222);
    min-width: 180px;
     
}

.info:after {
    z-index: 99;
    content: '';
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    background: rgba(249, 236, 222,.8);
    transform: rotate(-45deg) translateX(-50%);
    bottom: -3px;
    left: 50%;
  
    transition: 300ms;
    border-bottom: 1px solid;
    border-left: 1px solid;
}

#n30,
#n3,
#n19,
#n11,
#n15,
#n25,
#n26,
#n21,
#n13,
#n5,
#n2,
#n27,
#n28,
#n29,
#n23,
#n7,
#n1,
#n9,
#n10,
#n18,
#n4,
#n12,
#n6,
#n14,
#n16,
#n8,
#n24,
#n12,
#n22,
#n20,
#n32,
#h,
#j,
#k,
#t,
#y,
#f,
#g,
#n,
#n17, #n31 {
    cursor: pointer;
     
}

#n30:hover .info,
#n32:hover .info,
#n68:hover .info,
#n69:hover .info,
#n70:hover .info,
#n71:hover .info,
#n72:hover .info,
#n73:hover .info,
#h:hover .info,
#j:hover .info,
#k:hover .info,
#t:hover .info,
#y:hover .info,
#f:hover .info,
#g:hover .info,
#n:hover .info,
#n8:hover .info,
#n16:hover .info,
#n24:hover .info,
#n22:hover .info,
#n6:hover .info,
#n14:hover .info,
#n4:hover .info,
#n12:hover .info,
#n20:hover .info,
#n10:hover .info,
#n18:hover .info,
#n3:hover .info,
#n19:hover .info,
#n11:hover .info,
#n15:hover .info,
#n21:hover .info,
#n25:hover .info,
#n26:hover .info,
#n13:hover .info,
#n5:hover .info,
#n27:hover .info,
#n28:hover .info,
#n29:hover .info,
#n23:hover .info,
#n7:hover .info,
#n1:hover .info,
#n17:hover .info,
#n9:hover .info,
#n2:hover .info,
#n31:hover .info {
    display: flex;
    text-align:center;
    
     
}

div,
p,
span {
    font-family: 'Lato', sans-serif;
}

.transimage {
    bottom: 4px !important;
    right: 3px !important;
}

 
.added .trans span {
    font-size:22px;
}

#h span,
#j span,
#k span,
#t span,
#y span,
#f span,
#g span,
#n span{
font-size:14px
}

select {
    background-color: #fff !important;
    border-radius: 26px !Important;
}
 
@media screen and (max-width:1200px) {
    .obch {
        flex: 0 0 100% !important;
        padding: 10px;
       
    }

    .transimage {
        bottom: 5px !important;
    }

    .added .trans span {
    font-size:15px;
}

}


#formMatrix h3 {
    text-align: center;
}


.obch .trans,
.obch .trans>div {
    border-radius: 50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.container {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
}

.birthdate {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 90px;
    justify-content: center;
}

.birthdate-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.transimage {
    width: 102%;
    z-index: 0;
    position: relative;
    bottom: 6px;
    right: 5px;

}

.result p {
    margin-bottom: 18px;
}

.trans span {
    font-size: 14px;
}
 

@media screen and (max-width:1335px) {
    .trans span {
        font-size: 12px;
    }

    .obch .added .trans span {
    font-size:16px;
}

#h span,
#j span,
#k span,
#t span,
#y span,
#f span,
#g span,
#n span{
font-size:11px
}
}

@media screen and (max-width:1200px) {
    

    .rightblock {
        flex: 0 0 100%;
    }

    .trans span {
        font-size: 15px;
    }

}

 

#n1 span,
#n3 span,
#n5 span,
#n7 span,
#n30 span,
#n2 span,
#n4 span,
#n6 span,
#n8 span {
    font-size: 22px
}

@media screen and (max-width:600px) {
    .chakras>div {
        padding-left: 20px;
    }

    .trans span {
        font-size: 12px;
        position: relative;
         
    }

    .obch .trans span {
        font-size: 8px;
        
    }

    #n1 span,
    #n3 span,
    #n5 span,
    #n7 span,
    #n30 span,
    #n2 span,
    #n4 span,
    #n6 span,
    #n8 span {
        font-size: 16px;
        position: relative;
        bottom: 1px;
    }

    .transimage {
        width: 100%;
        z-index: 0;
        position: relative;
        bottom: 2px !important;
        right: 2px;
    }

    table {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        margin: 0 auto;
    }

}

@media screen and (max-width:470px) {

    .obch .trans span {
        font-size: 9px;
         

    }

#h span,
#j span,
#k span,
#t span,
#y span,
#f span,
#g span,
#n span{
font-size:9px
}

}</style>
