/*
    =======================================================
        Aero-Gel
        Code fork by Ian Maurmann
        License: MIT License
    =======================================================
        Heavily based on "Aero, Approximately" by Chris Price
        https://codepen.io/studiochris/pen/NZYzWq

        (Public Pens on CodePen are MIT Licensed.
        See: https://blog.codepen.io/documentation/licensing/ )
    =======================================================
    */

.aero-gel {
    border: 1px solid rgba(0, 0, 0, 0.725);
    backdrop-filter: brightness(1.25);

    box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.6) inset, 0 1px 8px rgba(0, 0, 0, 0.3);

    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, rgba(180, 180, 180, 0.03) 5%, rgba(32, 32, 32, 0.04) 6%, rgba(109, 109, 109, 0.04) 7%, rgba(206, 206, 206, 0.04) 8%, rgba(31, 31, 31, 0.04) 9%, rgba(0, 0, 0, 0.02) 10%, rgba(0, 0, 0, 0) 11%, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.04) 15%, rgba(190, 190, 190, 0.06) 16%, rgba(255, 255, 255, 0.07) 17%, rgba(255, 255, 255, 0.08) 21%, rgba(18, 18, 18, 0.08) 22%, rgba(56, 56, 56, 0.08) 23%, rgba(157, 157, 157, 0.08) 24%, rgba(242, 242, 242, 0.08) 25%, rgba(30, 30, 30, 0.08) 26%, rgba(27, 27, 27, 0.08) 27%, rgba(120, 120, 120, 0.08) 28%, rgba(186, 186, 186, 0.08) 29%, rgba(253, 253, 253, 0.09) 30%, rgba(252, 252, 252, 0.09) 31%, rgba(248, 248, 248, 0.08) 34%, rgba(243, 243, 243, 0.04) 37%, rgba(0, 0, 0, 0.03) 38%, rgba(6, 6, 6, 0.02) 39%, rgba(30, 30, 30, 0.02) 43%, rgba(54, 54, 54, 0.06) 47%, rgba(254, 254, 254, 0.07) 48%, rgba(253, 253, 253, 0.08) 51%, rgba(11, 11, 11, 0.08) 52%, rgba(0, 0, 0, 0.07) 53%, rgba(0, 0, 0, 0.04) 55%, rgba(242, 242, 242, 0.03) 56%, rgba(255, 255, 255, 0.02) 57%, rgba(236, 236, 236, 0) 58%, rgba(217, 217, 217, 0.02) 59%, rgba(197, 197, 197, 0.09) 60%, rgba(158, 158, 158, 0.05) 62%, rgba(0, 0, 0, 0.03) 63%, rgba(51, 51, 51, 0.04) 64%, rgba(112, 112, 112, 0.04) 65%, rgba(189, 189, 189, 0.05) 66%, rgba(236, 236, 236, 0.06) 67%, rgba(254, 254, 254, 0.08) 68%, rgba(218, 218, 218, 0.09) 69%, rgba(182, 182, 182, 0.09) 70%, rgba(36, 36, 36, 0.06) 74%, rgba(19, 19, 19, 0.05) 75%, rgba(62, 62, 62, 0.05) 76%, rgba(114, 114, 114, 0.05) 77%, rgba(178, 178, 178, 0.04) 78%, rgba(218, 218, 218, 0.04) 79%, rgba(255, 255, 255, 0.03) 80%, rgba(154, 154, 154, 0.03) 81%, rgba(0, 0, 0, 0.02) 82%, rgba(48, 48, 48, 0.02) 83%, rgba(85, 85, 85, 0.01) 84%, rgba(161, 161, 161, 0.01) 85%, rgba(254, 254, 254, 0) 86%, rgba(0, 0, 0, 0) 89%, rgba(255, 255, 255, 0) 91%, rgba(191, 191, 191, 0.01) 92%, rgba(204, 204, 204, 0.02) 93%, rgba(112, 112, 112, 0.03) 94%, rgba(67, 67, 67, 0.04) 95%, rgba(25, 25, 25, 0.04) 96%, rgba(0, 0, 0, 0.03) 97%, rgba(0, 0, 0, 0) 100%), linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, rgba(180, 180, 180, 0.03) 5%, rgba(32, 32, 32, 0.04) 6%, rgba(109, 109, 109, 0.04) 7%, rgba(206, 206, 206, 0.16) 8%, rgba(31, 31, 31, 0.04) 9%, rgba(0, 0, 0, 0.04) 10%, rgba(0, 0, 0, 0) 11%, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.08) 15%, rgba(190, 190, 190, 0.12) 16%, rgba(255, 255, 255, 0.28) 17%, rgba(255, 255, 255, 0.32) 21%, rgba(18, 18, 18, 0.08) 22%, rgba(56, 56, 56, 0.08) 23%, rgba(157, 157, 157, 0.08) 24%, rgba(242, 242, 242, 0.32) 25%, rgba(30, 30, 30, 0.08) 26%, rgba(27, 27, 27, 0.08) 27%, rgba(120, 120, 120, 0.08) 28%, rgba(186, 186, 186, 0.16) 29%, rgba(253, 253, 253, 0.36) 30%, rgba(252, 252, 252, 0.32) 31%, rgba(248, 248, 248, 0.32) 34%, rgba(243, 243, 243, 0.08) 37%, rgba(0, 0, 0, 0.03) 38%, rgba(6, 6, 6, 0.02) 39%, rgba(30, 30, 30, 0.02) 43%, rgba(54, 54, 54, 0.06) 47%, rgba(254, 254, 254, 0.14) 48%, rgba(253, 253, 253, 0.16) 51%, rgba(11, 11, 11, 0.08) 52%, rgba(0, 0, 0, 0.07) 53%, rgba(0, 0, 0, 0.04) 55%, rgba(242, 242, 242, 0.06) 56%, rgba(255, 255, 255, 0.04) 57%, rgba(236, 236, 236, 0) 58%, rgba(217, 217, 217, 0.04) 59%, rgba(197, 197, 197, 0.18) 60%, rgba(158, 158, 158, 0.1) 62%, rgba(0, 0, 0, 0.03) 63%, rgba(51, 51, 51, 0.04) 64%, rgba(112, 112, 112, 0.02) 65%, rgba(189, 189, 189, 0.1) 66%, rgba(236, 236, 236, 0.12) 67%, rgba(254, 254, 254, 0.16) 68%, rgba(218, 218, 218, 0.18) 69%, rgba(182, 182, 182, 0.18) 70%, rgba(36, 36, 36, 0.03) 74%, rgba(19, 19, 19, 0.05) 75%, rgba(62, 62, 62, 0.05) 76%, rgba(114, 114, 114, 0.1) 77%, rgba(178, 178, 178, 0.08) 78%, rgba(218, 218, 218, 0.08) 79%, rgba(255, 255, 255, 0.06) 80%, rgba(154, 154, 154, 0.06) 81%, rgba(0, 0, 0, 0.04) 82%, rgba(48, 48, 48, 0.04) 83%, rgba(85, 85, 85, 0.02) 84%, rgba(161, 161, 161, 0.02) 85%, rgba(254, 254, 254, 0.04) 86%, rgba(0, 0, 0, 0) 89%, rgba(255, 255, 255, 0) 91%, rgba(191, 191, 191, 0.04) 92%, rgba(204, 204, 204, 0.08) 93%, rgba(112, 112, 112, 0.12) 94%, rgba(67, 67, 67, 0.16) 95%, rgba(25, 25, 25, 0.16) 96%, rgba(0, 0, 0, 0.12) 97%, rgba(0, 0, 0, 0.02) 100%), linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), rgba(112, 128, 144, 0.6);
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-repeat: no-repeat;
    transform: translateZ(0);
    background-size: 100vw 100vh;
    transition: background-color 125ms ease-in-out;
    will-change: backdrop-filter, background-color;
    z-index: 5;
}



.aero-gel::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    background: linear-gradient(rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.7) 38%, rgba(255, 255, 255, 0) calc(38% + 2px));
    opacity: 20%;
}




.aero-gel.aero-gel-blurred {
    backdrop-filter: blur(7px) brightness(1.25);
}



.aero-gel-shimmer {
    box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.6) inset;

    backdrop-filter: brightness(1.25);
    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, rgba(180, 180, 180, 0.03) 5%, rgba(32, 32, 32, 0.04) 6%, rgba(109, 109, 109, 0.04) 7%, rgba(206, 206, 206, 0.04) 8%, rgba(31, 31, 31, 0.04) 9%, rgba(0, 0, 0, 0.02) 10%, rgba(0, 0, 0, 0) 11%, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.04) 15%, rgba(190, 190, 190, 0.06) 16%, rgba(255, 255, 255, 0.07) 17%, rgba(255, 255, 255, 0.08) 21%, rgba(18, 18, 18, 0.08) 22%, rgba(56, 56, 56, 0.08) 23%, rgba(157, 157, 157, 0.08) 24%, rgba(242, 242, 242, 0.08) 25%, rgba(30, 30, 30, 0.08) 26%, rgba(27, 27, 27, 0.08) 27%, rgba(120, 120, 120, 0.08) 28%, rgba(186, 186, 186, 0.08) 29%, rgba(253, 253, 253, 0.09) 30%, rgba(252, 252, 252, 0.09) 31%, rgba(248, 248, 248, 0.08) 34%, rgba(243, 243, 243, 0.04) 37%, rgba(0, 0, 0, 0.03) 38%, rgba(6, 6, 6, 0.02) 39%, rgba(30, 30, 30, 0.02) 43%, rgba(54, 54, 54, 0.06) 47%, rgba(254, 254, 254, 0.07) 48%, rgba(253, 253, 253, 0.08) 51%, rgba(11, 11, 11, 0.08) 52%, rgba(0, 0, 0, 0.07) 53%, rgba(0, 0, 0, 0.04) 55%, rgba(242, 242, 242, 0.03) 56%, rgba(255, 255, 255, 0.02) 57%, rgba(236, 236, 236, 0) 58%, rgba(217, 217, 217, 0.02) 59%, rgba(197, 197, 197, 0.09) 60%, rgba(158, 158, 158, 0.05) 62%, rgba(0, 0, 0, 0.03) 63%, rgba(51, 51, 51, 0.04) 64%, rgba(112, 112, 112, 0.04) 65%, rgba(189, 189, 189, 0.05) 66%, rgba(236, 236, 236, 0.06) 67%, rgba(254, 254, 254, 0.08) 68%, rgba(218, 218, 218, 0.09) 69%, rgba(182, 182, 182, 0.09) 70%, rgba(36, 36, 36, 0.06) 74%, rgba(19, 19, 19, 0.05) 75%, rgba(62, 62, 62, 0.05) 76%, rgba(114, 114, 114, 0.05) 77%, rgba(178, 178, 178, 0.04) 78%, rgba(218, 218, 218, 0.04) 79%, rgba(255, 255, 255, 0.03) 80%, rgba(154, 154, 154, 0.03) 81%, rgba(0, 0, 0, 0.02) 82%, rgba(48, 48, 48, 0.02) 83%, rgba(85, 85, 85, 0.01) 84%, rgba(161, 161, 161, 0.01) 85%, rgba(254, 254, 254, 0) 86%, rgba(0, 0, 0, 0) 89%, rgba(255, 255, 255, 0) 91%, rgba(191, 191, 191, 0.01) 92%, rgba(204, 204, 204, 0.02) 93%, rgba(112, 112, 112, 0.03) 94%, rgba(67, 67, 67, 0.04) 95%, rgba(25, 25, 25, 0.04) 96%, rgba(0, 0, 0, 0.03) 97%, rgba(0, 0, 0, 0) 100%), linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, rgba(180, 180, 180, 0.03) 5%, rgba(32, 32, 32, 0.04) 6%, rgba(109, 109, 109, 0.04) 7%, rgba(206, 206, 206, 0.16) 8%, rgba(31, 31, 31, 0.04) 9%, rgba(0, 0, 0, 0.04) 10%, rgba(0, 0, 0, 0) 11%, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.08) 15%, rgba(190, 190, 190, 0.12) 16%, rgba(255, 255, 255, 0.28) 17%, rgba(255, 255, 255, 0.32) 21%, rgba(18, 18, 18, 0.08) 22%, rgba(56, 56, 56, 0.08) 23%, rgba(157, 157, 157, 0.08) 24%, rgba(242, 242, 242, 0.32) 25%, rgba(30, 30, 30, 0.08) 26%, rgba(27, 27, 27, 0.08) 27%, rgba(120, 120, 120, 0.08) 28%, rgba(186, 186, 186, 0.16) 29%, rgba(253, 253, 253, 0.36) 30%, rgba(252, 252, 252, 0.32) 31%, rgba(248, 248, 248, 0.32) 34%, rgba(243, 243, 243, 0.08) 37%, rgba(0, 0, 0, 0.03) 38%, rgba(6, 6, 6, 0.02) 39%, rgba(30, 30, 30, 0.02) 43%, rgba(54, 54, 54, 0.06) 47%, rgba(254, 254, 254, 0.14) 48%, rgba(253, 253, 253, 0.16) 51%, rgba(11, 11, 11, 0.08) 52%, rgba(0, 0, 0, 0.07) 53%, rgba(0, 0, 0, 0.04) 55%, rgba(242, 242, 242, 0.06) 56%, rgba(255, 255, 255, 0.04) 57%, rgba(236, 236, 236, 0) 58%, rgba(217, 217, 217, 0.04) 59%, rgba(197, 197, 197, 0.18) 60%, rgba(158, 158, 158, 0.1) 62%, rgba(0, 0, 0, 0.03) 63%, rgba(51, 51, 51, 0.04) 64%, rgba(112, 112, 112, 0.02) 65%, rgba(189, 189, 189, 0.1) 66%, rgba(236, 236, 236, 0.12) 67%, rgba(254, 254, 254, 0.16) 68%, rgba(218, 218, 218, 0.18) 69%, rgba(182, 182, 182, 0.18) 70%, rgba(36, 36, 36, 0.03) 74%, rgba(19, 19, 19, 0.05) 75%, rgba(62, 62, 62, 0.05) 76%, rgba(114, 114, 114, 0.1) 77%, rgba(178, 178, 178, 0.08) 78%, rgba(218, 218, 218, 0.08) 79%, rgba(255, 255, 255, 0.06) 80%, rgba(154, 154, 154, 0.06) 81%, rgba(0, 0, 0, 0.04) 82%, rgba(48, 48, 48, 0.04) 83%, rgba(85, 85, 85, 0.02) 84%, rgba(161, 161, 161, 0.02) 85%, rgba(254, 254, 254, 0.04) 86%, rgba(0, 0, 0, 0) 89%, rgba(255, 255, 255, 0) 91%, rgba(191, 191, 191, 0.04) 92%, rgba(204, 204, 204, 0.08) 93%, rgba(112, 112, 112, 0.12) 94%, rgba(67, 67, 67, 0.16) 95%, rgba(25, 25, 25, 0.16) 96%, rgba(0, 0, 0, 0.12) 97%, rgba(0, 0, 0, 0.02) 100%), linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), rgba(112, 128, 144, 0.6);
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-repeat: no-repeat;
    transform: translateZ(0);
    background-size: 100vw 100vh;
    transition: background-color 125ms ease-in-out;
    will-change: backdrop-filter, background-color;
    z-index: 5;
}
.aero-gel-shimmer::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    background: linear-gradient(rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.7) 38%, rgba(255, 255, 255, 0) calc(38% + 2px));
    opacity: 20%;
}
.aero-gel-shimmer.aero-gel-blurred {
    backdrop-filter: blur(7px) brightness(1.25);
}

/* Button */
.aero-gel-button{
    display: inline-block;

    border-radius: 9px;
    padding: 0.7em 3em;

    cursor: pointer;
    user-select: none;
    transition-property: all;
    transition-duration: 0.4s;

    text-align: center;
}



/* Button color */
/* Blue */
.aero-gel-button-blue{
    background-color: var(--ox-color-ant-blue-8);
    color: #ffffff;
}
.aero-gel-button-blue:hover{
    background-color: var(--ox-color-ant-blue-7);
}
/* Red */
.aero-gel-button-red{
    background-color: var(--ox-color-ant-red-8);
    color: #ffffff;
}
.aero-gel-button-red:hover{
    background-color: var(--ox-color-ant-red-7);
}
/* Orange */
.aero-gel-button-orange{
    background-color: var(--ox-color-md-orange-600);
    color: #212121;
}
.aero-gel-button-orange:hover{
    background-color: var(--ox-color-md-orange-400);
}

/* Button size */
.aero-gel-button-x4{
    padding: 4px 16px;

    margin-top: 2px;
    margin-bottom: 2px;
}