/* HOVER COLORS  */
/* CHANNLES COLORS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          DO NOT CHANGE LINES BELOW THIS LINE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@font-face {
    font-family: "Zilla Slab";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Zilla Slab"), local("Montserrat-ExtraLight"), url(./ZillaSlab-Medium.ttf) format("truetype");
}
* {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    background: #ffffff;
}

#logo {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 10;
}
#logo img {
    animation: heartbeat 3s ease-in infinite;
}

#footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #fff;
    font-family: "Zilla Slab", Arial, Helvetica, serif;
    
}

#wrapper {
    /*width: 1024px;
  max-width: 1024px;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#output-container {
    width: calc(100% - 650px);
    margin: 50px;
    background: #fff;
    color: #300040;
    padding: 20px;
    line-height: 26px;
    height: 100%;
    font-size: 24px;
    font-weight: 600;
    font-family: "Zilla Slab", Arial, Helvetica, serif;
    // box-shadow: 3px 3px 3px 0 #110011;
}

#coin {
    perspective: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    position: absolute;
    top: 20px;
    left: 20px;
}
#coin .hdm-coin {
    width: 100px;
    height: 100px;
    background-image: url(https://human-design-management.de/wp-content/uploads/2021/09/HDM-Logo-1.png);
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotateY(45deg);
    animation-delay: 4s;
    animation: rotateAnimation 3s linear infinite;
}

@keyframes heartbeat {
    0% {
        filter: brightness(1);
    }
    85% {
        filter: brightness(1);
    }
    88% {
        filter: brightness(1.1);
    }
    92% {
        filter: brightness(1);
    }
    100% {
        filter: brightness(1.3);
    }
}
@keyframes rotateAnimation {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
#human-design-matrix {
    font-family: Verdana, Arial, sans-serif;
    min-width: 600px;
    /*width: 600px;*/
    padding: 20px 0;
    // background: #300040;
    background: #dcd;
    position: relative;
    overflow: hidden;
    /*transform: scale(.6);
  transform-origin: 0 0;
  -moz-transform: scale(.6);
  -moz-transform-origin: 0 0;*/
    /* CHANNEL CENTER LINES */
    /* CHANNEL CENTER LINES LEFT */
    /* CHANNEL CENTER LINES RIGHT */
    /* CHANNELS DIAGONAL LEFT TOP */
    /* CHANNELS DIAGONAL RIGHT TOP*/
    /* CHANNELS DIAGONAL LEFT BOTTOM */
    /* CHANNELS DIAGONAL RIGHT BOTTOM */
    /* CHANNELS LEFT INNER */
    /* CHANNELS RIGHT INNER */
    /* CHANNELS LEFT TO RIGHT INNER */
    box-shadow: 2px 3px 3px 0 #879;
}
#human-design-matrix .options {
    width: 80px;
    position: absolute;
    top: 10px;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#human-design-matrix .options button {
    cursor: pointer;
    font-family: "Courier New", serif;
    border-radius: 50%;
    border: 0 none;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    background: gray;
    color: black;
    margin: 0 auto;
    padding: 0;
}
#human-design-matrix .options button:hover {
    background: gray;
    color: black;
}
#human-design-matrix.scale-down {
    transform: scale(0.6);
    transform-origin: 50% 15%;
    -moz-transform: scale(0.6);
    -moz-transform-origin: 50% 15%;
}
#human-design-matrix.scale-up {
    transform: scale(1.2);
    transform-origin: 0 0;
    -moz-transform: scale(1.2);
    -moz-transform-origin: 0 0;
}
#human-design-matrix .hdm-center {
    cursor: pointer;
    z-index: 100;
    width: 120px;
    height: 120px;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -60px;
    background: darkcyan;
    margin-bottom: 65px;
    transition: all 0.2s ease-in-out;
}
#human-design-matrix .hdm-center:hover, #human-design-matrix .hdm-center.hover {
    color: white;
    background: darkmagenta;
    transition: all 0.2s ease-in-out;
}
#human-design-matrix .hdm-center.rounded {
    border-radius: 7px;
}
#human-design-matrix .hdm-center .num {
    display: block;
    font-size: 20px;
    position: absolute;
    text-align: center;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
}
#human-design-matrix .hdm-center .num:hover {
    background: gold;
    color: black;
    box-shadow: 0 0 5px 5px gold;
    text-align: center;
    transition: all 0.2s ease-in-out;
}
#human-design-matrix .hdm-center.head {
    width: 150px;
    height: 120px;
    margin-left: -75px;
    position: relative;
    background: transparent !important;
    margin-bottom: 40px !important;
    transition: fill 0.2s ease-in-out;
}
#human-design-matrix .hdm-center.head .triangle-up {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 120px;
    fill: #76c;
}
#human-design-matrix .hdm-center.head:hover .triangle-up {
    transition: fill 0.2s ease-in-out;
    fill: darkmagenta;
}
#human-design-matrix .hdm-center.head .num-64 {
    top: 95px;
    left: 25px;
}
#human-design-matrix .hdm-center.head .num-61 {
    top: 95px;
    left: 65px;
}
#human-design-matrix .hdm-center.head .num-63 {
    top: 95px;
    right: 25px;
}
#human-design-matrix .hdm-center.ajna {
    clip-path: polygon(0% 0%, 50% 100%, 100% 0);
    width: 150px;
    height: 120px;
    margin-left: -75px;
    position: relative;
    background: transparent !important;
    margin-bottom: 40px !important;
    transition: fill 0.2s ease-in-out;
}
#human-design-matrix .hdm-center.ajna:hover .triangle-down {
    transition: fill 0.2s ease-in-out;
    fill: darkmagenta;
}
#human-design-matrix .hdm-center.ajna .triangle-down {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 120px;
    fill: #77d;
}
#human-design-matrix .hdm-center.ajna .num-47 {
    top: 5px;
    left: 25px;
}
#human-design-matrix .hdm-center.ajna .num-24 {
    top: 5px;
    left: 65px;
}
#human-design-matrix .hdm-center.ajna .num-4 {
    top: 5px;
    right: 25px;
}
#human-design-matrix .hdm-center.ajna .num-43 {
    bottom: 20px;
    left: 65px;
}
#human-design-matrix .hdm-center.ajna .num-17 {
    top: 40px;
    left: 40px;
}
#human-design-matrix .hdm-center.ajna .num-11 {
    top: 40px;
    right: 40px;
}
#human-design-matrix .hdm-center.spleen {
    position: absolute;
    width: 120px;
    height: 150px;
    top: 745px;
    left: 15px;
    margin-left: auto;
    clip-path: polygon(100% 50%, 0 100%, 0 0);
}
#human-design-matrix .hdm-center.spleen .triangle-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 120px;
    transition: fill 0.2s ease-in-out;
    fill: darkcyan;
}
#human-design-matrix .hdm-center.spleen:hover .triangle-left {
    transition: fill 0.2s ease-in-out;
    fill: darkmagenta;
}
#human-design-matrix .hdm-center.spleen .num-48 {
    top: 15px;
    left: 5px;
}
#human-design-matrix .hdm-center.spleen .num-57 {
    top: 33px;
    left: 33px;
}
#human-design-matrix .hdm-center.spleen .num-44 {
    top: 50px;
    left: 60px;
}
#human-design-matrix .hdm-center.spleen .num-50 {
    top: 65px;
    right: 15px;
}
#human-design-matrix .hdm-center.spleen .num-18 {
    bottom: 17px;
    left: 7px;
}
#human-design-matrix .hdm-center.spleen .num-28 {
    bottom: 35px;
    left: 35px;
}
#human-design-matrix .hdm-center.spleen .num-32 {
    bottom: 50px;
    left: 60px;
}
#human-design-matrix .hdm-center.solar-plexus {
    position: absolute;
    top: 740px;
    right: 15px;
    left: auto;
    width: 120px;
    height: 150px;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
#human-design-matrix .hdm-center.solar-plexus .triangle-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 120px;
    transition: fill 0.2s ease-in-out;
    fill: #c8c;
}
#human-design-matrix .hdm-center.solar-plexus:hover .triangle-right {
    transition: fill 0.2s ease-in-out;
    fill: darkmagenta;
}
#human-design-matrix .hdm-center.solar-plexus .num-36 {
    top: 15px;
    right: 3px;
}
#human-design-matrix .hdm-center.solar-plexus .num-22 {
    top: 32px;
    left: 70px;
}
#human-design-matrix .hdm-center.solar-plexus .num-37 {
    top: 50px;
    left: 40px;
}
#human-design-matrix .hdm-center.solar-plexus .num-6 {
    top: 64px;
    left: 12px;
}
#human-design-matrix .hdm-center.solar-plexus .num-30 {
    bottom: 15px;
    right: 3px;
}
#human-design-matrix .hdm-center.solar-plexus .num-55 {
    bottom: 32px;
    right: 30px;
}
#human-design-matrix .hdm-center.solar-plexus .num-49 {
    bottom: 50px;
    right: 60px;
}
#human-design-matrix .hdm-center.throat {
    position: relative;
    background: #09b;
}
#human-design-matrix .hdm-center.throat:hover {
    transition: fill 0.2s ease-in-out;
    background: darkmagenta;
}
#human-design-matrix .hdm-center.throat .num-62 {
    top: 5px;
    left: 10px;
}
#human-design-matrix .hdm-center.throat .num-23 {
    top: 5px;
    left: 50px;
}
#human-design-matrix .hdm-center.throat .num-56 {
    top: 5px;
    left: 90px;
}
#human-design-matrix .hdm-center.throat .num-16 {
    top: 35px;
    left: 5px;
}
#human-design-matrix .hdm-center.throat .num-20 {
    top: 65px;
    left: 5px;
}
#human-design-matrix .hdm-center.throat .num-35 {
    top: 25px;
    right: 5px;
    left: auto;
}
#human-design-matrix .hdm-center.throat .num-12 {
    top: 50px;
    right: 5px;
    left: auto;
}
#human-design-matrix .hdm-center.throat .num-45 {
    top: 75px;
    right: 5px;
    left: auto;
}
#human-design-matrix .hdm-center.throat .num-31 {
    top: 95px;
    left: 10px;
}
#human-design-matrix .hdm-center.throat .num-8 {
    top: 95px;
    left: 50px;
}
#human-design-matrix .hdm-center.throat .num-33 {
    top: 95px;
    left: 90px;
}
#human-design-matrix .hdm-center.g-center {
    transform: rotate(45deg);
    background: #aa0;
}
#human-design-matrix .hdm-center.g-center:hover {
    transition: fill 0.2s ease-in-out;
    background: darkmagenta;
}
#human-design-matrix .hdm-center.g-center .num {
    transform: rotate(-45deg);
}
#human-design-matrix .hdm-center.g-center .num-1 {
    top: 5px;
    left: 5px;
}
#human-design-matrix .hdm-center.g-center .num-2 {
    top: 95px;
    left: 95px;
}
#human-design-matrix .hdm-center.g-center .num-13 {
    top: 5px;
    left: 45px;
}
#human-design-matrix .hdm-center.g-center .num-25 {
    top: 5px;
    left: auto;
    right: 5px;
}
#human-design-matrix .hdm-center.g-center .num-10 {
    top: 95px;
    left: 5px;
}
#human-design-matrix .hdm-center.g-center .num-15 {
    top: 95px;
    left: 45px;
}
#human-design-matrix .hdm-center.g-center .num-7 {
    top: 50px;
    left: 5px;
}
#human-design-matrix .hdm-center.g-center .num-46 {
    top: 50px;
    left: auto;
    right: 5px;
}
#human-design-matrix .hdm-center.sacred {
    position: relative;
    background: #f88;
}
#human-design-matrix .hdm-center.sacred:hover {
    transition: fill 0.2s ease-in-out;
    fill: darkmagenta;
    background: darkmagenta;
}
#human-design-matrix .hdm-center.sacred .num-5 {
    top: 5px;
    left: 10px;
}
#human-design-matrix .hdm-center.sacred .num-14 {
    top: 5px;
    left: 50px;
}
#human-design-matrix .hdm-center.sacred .num-29 {
    top: 5px;
    left: 90px;
}
#human-design-matrix .hdm-center.sacred .num-34 {
    top: 25px;
    left: 5px;
}
#human-design-matrix .hdm-center.sacred .num-27 {
    top: 65px;
    left: 5px;
}
#human-design-matrix .hdm-center.sacred .num-59 {
    top: 65px;
    right: 5px;
    left: auto;
}
#human-design-matrix .hdm-center.sacred .num-42 {
    top: 95px;
    left: 10px;
}
#human-design-matrix .hdm-center.sacred .num-3 {
    top: 95px;
    left: 50px;
}
#human-design-matrix .hdm-center.sacred .num-9 {
    top: 95px;
    left: 90px;
}
#human-design-matrix .hdm-center.root {
    position: relative;
    margin-bottom: 0 !important;
    background: #d65;
}
#human-design-matrix .hdm-center.root:hover {
    transition: fill 0.2s ease-in-out;
    background: darkmagenta;
}
#human-design-matrix .hdm-center.root .num-53 {
    top: 5px;
    left: 10px;
}
#human-design-matrix .hdm-center.root .num-60 {
    top: 5px;
    left: 50px;
}
#human-design-matrix .hdm-center.root .num-52 {
    top: 5px;
    left: 90px;
}
#human-design-matrix .hdm-center.root .num-54 {
    top: 35px;
    left: 5px;
}
#human-design-matrix .hdm-center.root .num-19 {
    top: 35px;
    left: 95px;
}
#human-design-matrix .hdm-center.root .num-38 {
    top: 65px;
    left: 5px;
}
#human-design-matrix .hdm-center.root .num-39 {
    top: 65px;
    right: 5px;
    left: auto;
}
#human-design-matrix .hdm-center.root .num-58 {
    top: 95px;
    left: 5px;
}
#human-design-matrix .hdm-center.root .num-41 {
    top: 95px;
    left: 95px;
}
#human-design-matrix .hdm-center.heart-center {
    position: absolute;
    top: 630px;
    left: 470px;
    width: 100px;
    height: 100px;
    background: transparent !important;
    transform: rotate(-39deg);
    clip-path: polygon(100% 50%, 0 100%, 0 0);
}
#human-design-matrix .hdm-center.heart-center .triangle-heart {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 120px;
    transition: fill 0.2s ease-in-out;
    fill: orange;
}
#human-design-matrix .hdm-center.heart-center:hover .triangle-heart {
    transition: fill 0.2s ease-in-out;
    fill: darkmagenta;
}
#human-design-matrix .hdm-center.heart-center .num {
    transform: rotate(39deg);
}
#human-design-matrix .hdm-center.heart-center .num-51 {
    top: 15px;
    left: 12px;
}
#human-design-matrix .hdm-center.heart-center .num-21 {
    top: 32px;
    left: 47px;
}
#human-design-matrix .hdm-center.heart-center .num-26 {
    top: 52px;
    left: 4px;
}
#human-design-matrix .hdm-center.heart-center .num-40 {
    top: 52px;
    left: 37px;
}
#human-design-matrix .channel {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    z-index: 5;
    cursor: pointer;
    transition: background, box-shadow 0.2s ease-in-out;
}
#human-design-matrix .channel:hover, #human-design-matrix .channel.hover {
    transition: all 0.2s ease-in-out;
    background: darkmagenta;
    box-shadow: 0 0 20px darkmagenta;
}

/* colors */

#human-design-matrix .ch-1-8, #human-design-matrix .ch-2-14, #human-design-matrix .ch-3-60, #human-design-matrix .ch-23-43, #human-design-matrix .ch-24-61, #human-design-matrix .ch-28-38, #human-design-matrix .ch-20-57, #human-design-matrix .ch-39-55, #human-design-matrix .ch-12-22 {
    background: yellow;
}
#human-design-matrix .ch-18-58, #human-design-matrix .ch-16-48, #human-design-matrix .ch-30-41, #human-design-matrix .ch-35-36, #human-design-matrix .ch-4-63, #human-design-matrix .ch-47-64, #human-design-matrix .ch-17-62, #human-design-matrix .ch-7-31, #human-design-matrix .ch-5-15, #human-design-matrix .ch-42-53, #human-design-matrix .ch-11-56, #human-design-matrix .ch-13-33, #human-design-matrix .ch-29-46, #human-design-matrix .ch-9-52 {
    background: blue;
}
#human-design-matrix .ch-32-54, #human-design-matrix .ch-26-44, #human-design-matrix .ch-19-49, #human-design-matrix .ch-37-40, #human-design-matrix .ch-27-50, #human-design-matrix .ch-6-59, #human-design-matrix .ch-21-45 {
    background: red;
}
#human-design-matrix .ch-10, #human-design-matrix .ch-34, #human-design-matrix .ch-10-34 {
    background: green;
}

/* channel positions */

#human-design-matrix .ch-24-61, #human-design-matrix .ch-23-43, #human-design-matrix .ch-1-8, #human-design-matrix .ch-2-14, #human-design-matrix .ch-3-60 {
    left: 297px;
    height: 80px;
}

#human-design-matrix .ch-24-61 {
    top: 135px;
}
#human-design-matrix .ch-23-43 {
    top: 275px;
}
#human-design-matrix .ch-1-8 {
    top: 435px;
}
#human-design-matrix .ch-2-14 {
    top: 645px;
}
#human-design-matrix .ch-3-60 {
    top: 815px;
}
#human-design-matrix .ch-47-64, #human-design-matrix .ch-17-62, #human-design-matrix .ch-7-31, #human-design-matrix .ch-5-15, #human-design-matrix .ch-42-53 {
    left: 258px;
    height: 80px;
}
#human-design-matrix .ch-47-64 {
    top: 135px;
}
#human-design-matrix .ch-17-62 {
    top: 230px;
    height: 120px;
}
#human-design-matrix .ch-7-31 {
    top: 455px;
    height: 90px;
}
#human-design-matrix .ch-5-15 {
    top: 625px;
    height: 100px;
}
#human-design-matrix .ch-42-53 {
    top: 815px;
}
#human-design-matrix .ch-4-63, #human-design-matrix .ch-11-56, #human-design-matrix .ch-13-33, #human-design-matrix .ch-29-46, #human-design-matrix .ch-9-52 {
    left: 336px;
    height: 80px;
}
#human-design-matrix .ch-4-63 {
    top: 135px;
}
#human-design-matrix .ch-11-56 {
    top: 230px;
    height: 120px;
}
#human-design-matrix .ch-13-33 {
    top: 455px;
    height: 90px;
}
#human-design-matrix .ch-29-46 {
    top: 625px;
    height: 100px;
}
#human-design-matrix .ch-9-52 {
    top: 815px;
}
#human-design-matrix .ch-16-48 {
    height: 450px;
    top: 345px;
    left: 139px;
    transform: rotate(29deg);
}
#human-design-matrix .ch-20-57 {
    height: 445px;
    top: 385px;
    left: 145px;
    transform: rotate(26deg);
}
#human-design-matrix .ch-21-45 {
    height: 295px;
    top: 392px;
    left: 403px;
    transform: rotate(157deg);
}
#human-design-matrix .ch-37-40 {
    height: 110px;
    top: 685px;
    left: 487px;
    transform: rotate(156deg);
}
#human-design-matrix .ch-12-22 {
    height: 435px;
    top: 377px;
    left: 450px;
    transform: rotate(154deg);
}
#human-design-matrix .ch-35-36 {
    height: 445px;
    top: 340px;
    left: 458px;
    transform: rotate(151deg);
}
#human-design-matrix .ch-32-54 {
    height: 200px;
    top: 785px;
    left: 155px;
    transform: rotate(122deg);
}
#human-design-matrix .ch-28-38 {
    height: 230px;
    top: 797px;
    left: 149px;
    transform: rotate(122deg);
}
#human-design-matrix .ch-18-58 {
    height: 250px;
    top: 812px;
    left: 140px;
    transform: rotate(122deg);
}
#human-design-matrix .ch-19-49 {
    height: 200px;
    top: 792px;
    left: 430px;
    transform: rotate(59deg);
}
#human-design-matrix .ch-39-55 {
    height: 230px;
    top: 798px;
    left: 450px;
    transform: rotate(59deg);
}
#human-design-matrix .ch-30-41 {
    height: 255px;
    top: 810px;
    left: 460px;
    transform: rotate(59deg);
}
#human-design-matrix .ch-34 {
    height: 151px;
    top: 637px;
    left: 181px;
    transform: rotate(116deg);
}
#human-design-matrix .ch-10 {
    height: 55px;
    top: 548px;
    left: 196px;
    transform: rotate(115deg);
}
#human-design-matrix .ch-10-34 {
    height: 135px;
    top: 555px;
    left: 144px;
    transform: rotate(26deg);
}
#human-design-matrix .ch-27-50 {
    height: 130px;
    top: 735px;
    left: 185px;
    transform: rotate(75deg);
}
#human-design-matrix .ch-25-51 {
    height: 100px;
    top: 578px;
    left: 390px;
    transform: rotate(148deg);
}
#human-design-matrix .ch-6-59 {
    height: 130px;
    top: 734px;
    left: 410px;
    transform: rotate(102deg);
}
#human-design-matrix .ch-26-44 {
    height: 350px;
    top: 582px;
    left: 260px;
    transform: rotate(76deg);
}

/*# sourceMappingURL=matrix.css.map */