/**********Color Variables**********/ :root{ --color1: #60C5C1; --color2: #333333; --color3: #444444; } /**********X-Anchors**********/ /*color, color1, color2, color3 => colored backgrounds with (typically) white text that hover to transparent*/ /*inverse, inverse1, inverse2, inverse3 => white backgrounds with colored text that hover to transparent*/ /*clearButton => begins with transparent background and hover increases border width*/ /*gradient => a gradient background that reverses on hover*/ /*border => typically for the whites and colors to produce and different colored border*/ /*hoverBack => when hovered the background will be the contrasting color*/ /*hoverBorder => instead of switching background color like normal, or cnahging border thickness like .clearButton, this just changes the border color on hover*/ /*moreRadius, someRadius, lessRadius, noRadius => border-radius, 2rem, .5rem, .25rem, 0rem*/ /*weight100, weight 300, weight400, weight700, weight900 => font-weight 100 || 300 || 400 || 700 || 900*/ /*uppercase, notUppercase => text-transform: uppercase, text-transform: unset*/ /*icon => hides text and circularizes button*/ /*****Layout*****/ #m1m_body .x-anchor-button { position: relative; padding: .25em .5em !important; margin-bottom: 0px !important; text-align: center; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } #m1m_body .x-column > .x-anchor-button:not(:last-child) {margin-bottom: 3rem !important;} #m1m_body .x-anchor-button.clearButton::after { content: ""; position: absolute; display: block; width: calc(100% + 10px); height: calc(100% + 10px); left: -5px; top: -5px; } #m1m_body .x-anchor-button .x-anchor-content { padding: 0px !important; flex-grow: 1; max-width: 100%; } #m1m_body .x-anchor-button .x-anchor-content .x-graphic { height: auto !important; display: flex; flex-direction: row; align-items: center; } #m1m_body .x-anchor-button:not(.icon) .x-anchor-content .x-graphic:first-child:not(:only-child) {margin: 0px .75rem 0px 0px !important;} #m1m_body .x-anchor-button:not(.icon) .x-anchor-content .x-graphic:last-child:not(:only-child) {margin: 0px 0px 0px .75rem !important;} #m1m_body .x-anchor-button:not(.icon) .x-anchor-content .x-graphic:not(:last-child):not(:first-child) {margin: 0px .75rem !important;} #m1m_body .x-anchor-button .x-anchor-content .x-graphic-icon {min-width: 1em;} #m1m_body .x-anchor-button:not(.icon) .x-anchor-content .x-graphic-icon::before { position: relative !important; margin: 0px !important; left: 0px !important; top: 0px !important; } #m1m_body .x-anchor-button .x-anchor-text {margin: 0px;} #m1m_body .x-anchor-button, #m1m_body .x-anchor-button .x-anchor-text-primary {line-height: 1.25; text-align: center;} #m1m_body .x-anchor-button .x-icon::before { display: flex !important; flex-direction: column; justify-content: center; } /***skews***/ #m1m_body .x-anchor-button[class*="skew"] { margin-left: 1rem !important; margin-right: 1rem !important; padding-left: 3rem !important; padding-right: 3rem !important; } /***icon***/ #m1m_body .x-anchor-button.icon { padding: .25em !important; width: 1.666em; height: 1.666em; display: flex; flex-direction: column; justify-content: center; align-items: center; } #m1m_body .x-anchor-button.icon .x-anchor-text {position: fixed; left: -100000px; top: -100000px;} #m1m_body .x-anchor-button.icon *:is(.x-graphic, .x-graphic-icon, .x-icon) {margin: 0px !important; max-width: 100%;} #m1m_body .x-anchor-button.icon .x-graphic-icon {height: 1em;} /*****Typography*****/ /***clearing***/ #m1m_body .x-anchor-button {text-shadow: none !important;} #m1m_body .x-anchor-button .x-anchor-text-primary {font-weight: inherit !important;} #m1m_body .x-anchor-button *, #m1m_body .x-anchor-button:is(:hover, :focus) * {text-shadow: none; color: inherit !important;} #m1m_body .x-anchor-button.weight100 {font-weight: 100 !important;} #m1m_body .x-anchor-button.weight300 {font-weight: 300 !important;} #m1m_body .x-anchor-button.weight400 {font-weight: 400 !important;} #m1m_body .x-anchor-button, #m1m_body .x-anchor-button.weight700 {font-weight: 700 !important;} #m1m_body .x-anchor-button.weight900 {font-weight: 900 !important;} #m1m_body .x-anchor-button, #m1m_body .x-anchor-button.uppercase {text-transform: uppercase;} #m1m_body .x-anchor-button.not-uppercase {text-transform: unset;} /***icon***/ #m1m_body .x-anchor-button.icon * {line-height: 1 !important;} #m1m_body .x-anchor-button.icon .x-graphic-primary {font-size: 1em !important;} /****Colors****/ /***color***/ /**text**/ #m1m_body .x-anchor-button {color: white;} #m1m_body .x-anchor-button svg {fill: white;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder):is(:hover, :focus) {color: black;} #m1m_body .x-anchor-button:not(.hoverBorder):is(:hover, :focus) svg {fill: black;} /**clearButton**/ #m1m_body .x-anchor-button.clearButton {color: black;} #m1m_body .x-anchor-button.clearButton svg {fill: black;} /***color1***/ /**text**/ #m1m_body .x-anchor-button.color1:not(.clearButton) {color: white;} #m1m_body .x-anchor-button.color1:not(.clearButton) svg {fill: white;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder).color1:not(.clearButton):is(:hover, :focus) {color: #60C5C1;} #m1m_body .x-anchor-button:not(.hoverBorder).color1:not(.clearButton):is(:hover, :focus) svg {fill: #60C5C1;} /**clearButton**/ #m1m_body .x-anchor-button.color1.clearButton {color: #60C5C1;} #m1m_body .x-anchor-button.color1.clearButton svg {fill: #60C5C1;} /***color2***/ /**text**/ #m1m_body .x-anchor-button.color2:not(.clearButton) {color: white;} #m1m_body .x-anchor-button.color2:not(.clearButton) svg {fill: white;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder).color2:not(.clearButton):is(:hover, :focus) {color: #333333;} #m1m_body .x-anchor-button:not(.hoverBorder).color2:not(.clearButton):is(:hover, :focus) svg {fill: #333333;} /**clearButton**/ #m1m_body .x-anchor-button.color2.clearButton {color: #333333;} #m1m_body .x-anchor-button.color2.clearButton svg {fill: #333333;} /***color3***/ /**text**/ #m1m_body .x-anchor-button.color3:not(.clearButton) {color: white;} #m1m_body .x-anchor-button.color3:not(.clearButton) svg {fill: white;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder).color3:not(.clearButton):is(:hover, :focus) {color: #444444;} #m1m_body .x-anchor-button:not(.hoverBorder).color3:not(.clearButton):is(:hover, :focus) svg {fill: #444444;} /**clearButton**/ #m1m_body .x-anchor-button.color3.clearButton {color: #444444;} #m1m_body .x-anchor-button.color3.clearButton svg {fill: #444444;} /****Inverses****/ /***inverse***/ /**text**/ #m1m_body .x-anchor-button.inverse {color: black;} #m1m_body .x-anchor-button.inverse svg {fill: black;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder).inverse:is(:hover, :focus) {color: white;} #m1m_body .x-anchor-button:not(.hoverBorder).inverse:is(:hover, :focus) svg {fill: white;} /**clearButton**/ #m1m_body .x-anchor-button.inverse.clearButton {color: white;} #m1m_body .x-anchor-button.inverse.clearButton svg {fill: white;} /***inverse1***/ /**text**/ #m1m_body .x-anchor-button.inverse1 {color: #60C5C1;} #m1m_body .x-anchor-button.inverse1 svg {fill: #60C5C1;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder).inverse1:is(:hover, :focus) {color: white;} #m1m_body .x-anchor-button:not(.hoverBorder).inverse1:is(:hover, :focus) svg {fill: white;} /***inverse2***/ /**text**/ #m1m_body .x-anchor-button.inverse2 {color: #333333;} #m1m_body .x-anchor-button.inverse2 svg {fill: #333333;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder).inverse2:is(:hover, :focus) {color: white;} #m1m_body .x-anchor-button:not(.hoverBorder).inverse2:is(:hover, :focus) svg {fill: white;} /***inverse3***/ /**text**/ #m1m_body .x-anchor-button.inverse3 {color: #444444;} #m1m_body .x-anchor-button.inverse3 svg {fill: #444444;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder).inverse3:is(:hover, :focus) {color: white;} #m1m_body .x-anchor-button:not(.hoverBorder).inverse3:is(:hover, :focus) svg {fill: white;} /****Gradients****/ /*****Aesthetics*****/ /****clearing****/ #m1m_body .x-anchor-button *, #m1m_body .x-anchor-button, #m1m_body .x-anchor-button:is(:hover, :focus) {box-shadow: none; text-decoration: none; overflow: visible;} #m1m_body .x-anchor-button.icon {border-radius: 50% !important;} #m1m_body .x-anchor-button.moreRadius {border-radius: 2em !important;} #m1m_body .x-anchor-button.someRadius {border-radius: .5em !important;} #m1m_body .x-anchor-button.lessRadius {border-radius: .25em !important;} #m1m_body .x-anchor-button, #m1m_body .x-anchor-button.noRadius {border-radius: 0em !important;} #m1m_body .x-anchor-content {border-radius: 0px;} /***transition***/ #m1m_body .x-anchor-button {transition-property: border-color, background-color, box-shadow, opacity, transform, padding, font-size, width, height !important;} /***hover***/ #m1m_body .x-anchor-button.clearButton:is(:hover, :focus)::after {opacity: 1;} /****General****/ #m1m_body .x-anchor-button {border: 2px solid transparent;} #m1m_body .x-anchor-button[class*="gradient"]:not(.border) {border: 0px none transparent;} /***clearButton***/ #m1m_body .x-anchor-button.clearButton {background-color: transparent !important;} #m1m_body .x-anchor-button.clearButton::after { border: inherit; border-radius: inherit; border-width: 5px; opacity: 0; } /***.hoverBorder:hover***/ #m1m_body .x-anchor-button:not(.hoverBorder):is(:hover, :focus) {background-color: transparent !important;} /***modifiers***/ #m1m_body .x-anchor-button.backWhite {background-color: white !important;} #m1m_body .x-anchor-button.backBlack {background-color: black !important;} #m1m_body .x-anchor-button.hoverWhite:is(:hover, :focus) {background-color: white !important;} #m1m_body .x-anchor-button.hoverBlack:is(:hover, :focus) {background-color: black !important;} /***skews***/ #m1m_body .x-anchor-button[class*="skew"] {border-left-width: 4px !important; border-right-width: 4px !important;} #m1m_body .x-anchor-button.skewRight, #m1m_body .x-anchor-button.skewLeft .x-anchor-content {transform: skewX(-45deg);} #m1m_body .x-anchor-button.skewLeft, #m1m_body .x-anchor-button.skewRight .x-anchor-content {transform: skewX(45deg);} /****Colors****/ /***color***/ #m1m_body .x-anchor-button {background-color: black; border-color: black;} #m1m_body .x-anchor-button:not(.clearButton).border {border-color: white;} /**hover**/ /*background*/ #m1m_body .x-anchor-button:not(.clearButton).border:is(:hover, :focus) {border-color: black;} /*border*/ #m1m_body .x-anchor-button.color.hoverBorder:is(:hover, :focus) {border-color: white;} #m1m_body .x-anchor-button.color.hoverBack:is(:hover, :focus) {background-color: white !important;} /***color1***/ #m1m_body .x-anchor-button.color1 { background-color: #60C5C1; border-color: #60C5C1; } #m1m_body .x-anchor-button.color1:not(.clearButton).border {border-color: white;} /**hover**/ /*background*/ #m1m_body .x-anchor-button.color1.hoverBack:is(:hover, :focus) {background-color: white !important;} /*border*/ #m1m_body .x-anchor-button.color1.border:is(:hover, :focus) {border-color: #60C5C1 !important;} #m1m_body .x-anchor-button.color1.hoverBorder:is(:hover, :focus) {border-color: white;} /***clearButton***/ /***color2***/ #m1m_body .x-anchor-button.color2 { background-color: #333333; border-color: #333333; } #m1m_body .x-anchor-button.color2:not(.clearButton).border {border-color: white;} /**hover**/ /*background*/ #m1m_body .x-anchor-button.color2.hoverBack:is(:hover, :focus) {background-color: white !important;} /*border*/ #m1m_body .x-anchor-button.color2.border:is(:hover, :focus) {border-color: #333333 !important;} #m1m_body .x-anchor-button.color2.hoverBorder:is(:hover, :focus) {border-color: white;} /***clearButton***/ /***color3***/ #m1m_body .x-anchor-button.color3 { background-color: #444444; border-color: #444444; } #m1m_body .x-anchor-button.color3:not(.clearButton).border {border-color: white;} /**hover**/ /*background*/ #m1m_body .x-anchor-button.color3.hoverBack:is(:hover, :focus) {background-color: white !important;} /*border*/ #m1m_body .x-anchor-button.color3.border:is(:hover, :focus) {border-color: #444444 !important;} #m1m_body .x-anchor-button.color3.hoverBorder:is(:hover, :focus) {border-color: white;} /***clearButton***/ /****Inverses****/ /***inverse***/ #m1m_body .x-anchor-button.inverse {background-color: white; border-color: white;} #m1m_body .x-anchor-button.inverse.border {border-color: black;} /**hover**/ /*background*/ #m1m_body .x-anchor-button.inverse.hoverBack:is(:hover, :focus) {background-color: black !important;} /*border*/ #m1m_body .x-anchor-button.inverse.border:is(:hover, :focus) {border-color: white;} #m1m_body .x-anchor-button.inverse.hoverBorder:is(:hover, :focus) {border-color: black;} /***inverse1***/ #m1m_body .x-anchor-button.inverse1 { background-color: white; border-color: white; } #m1m_body .x-anchor-button.inverse1.border {border-color: #60C5C1;} /**hover**/ /*background*/ #m1m_body .x-anchor-button.inverse1.hoverBack:is(:hover, :focus) {background-color: #60C5C1 !important;} /*border*/ #m1m_body .x-anchor-button.inverse1.border:is(:hover, :focus) {border-color: white;} #m1m_body .x-anchor-button.inverse1.hoverBorder:is(:hover, :focus) {border-color: #60C5C1;} /***clearButton***/ /***inverse2***/ #m1m_body .x-anchor-button.inverse2 { background-color: white; border-color: white; } #m1m_body .x-anchor-button.inverse2.border {border-color: #333333;} /**hover**/ /*background*/ #m1m_body .x-anchor-button.inverse2.hoverBack:is(:hover, :focus) {background-color: #333333 !important;} /*border*/ #m1m_body .x-anchor-button.inverse2.border:is(:hover, :focus) {border-color: white;} #m1m_body .x-anchor-button.inverse2.hoverBorder:is(:hover, :focus) {border-color: #333333;} /***clearButton***/ /***inverse3***/ #m1m_body .x-anchor-button.inverse3 { background-color: white; border-color: white; } #m1m_body .x-anchor-button.inverse3.border {border-color: #444444;} /**hover**/ /*background*/ #m1m_body .x-anchor-button.inverse3.hoverBack:is(:hover, :focus) {background-color: #444444 !important;} /*border*/ #m1m_body .x-anchor-button.inverse3.border:is(:hover, :focus) {border-color: white;} #m1m_body .x-anchor-button.inverse3.hoverBorder:is(:hover, :focus) {border-color: #444444;} /***clearButton***/ /****Gradients****/ #m1m_body .x-anchor-button[class*="gradient"]:not([class^="e"]):is(:hover, :focus), #m1m_body .x-anchor-button[class*="gradient"][class^="e"]:is(:hover, :focus) .x-anchor-text-primary {text-decoration: underline;}