/**************************\
  Basic Modal Styles
\**************************/

.modal {
    font-family: 'Inter', sans-serif;
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal__container {
    background-color: #1A1721;
    background-attachment: fixed;
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%20result%3D%22noise%22%20%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220.1640625%200%200%200%200%200%200.16015625%200%200%200%200%200%200.2890625%200%200%200%200%200%200.34765625%200%22%20%2F%3E%3C%2Ffilter%3E%3Crect%20filter%3D%22url%28%23noise%29%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%20opacity%3D%221%22%20%2F%3E%3C%2Fsvg%3E), linear-gradient(to top, rgba(15, 12, 18, 0.749), rgba(15, 12, 18, 0.749)), url(/img/bg.svg?v=81f23adc);
    background-size: 512px, auto, cover;
    background-position: center, 0 0, center;
    background-position-x: center, 0, center;
    background-position-y: center, 0, center;
    background-repeat: repeat, repeat, no-repeat;
    padding: 30px;
    max-width: 500px;
    max-height: 100vh;
    border-radius: 4px;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: #408c8f;
    box-sizing: border-box;
}

.modal__close {
    background: transparent;
    border: 0;
}

.modal__header .modal__close:before {
    content: "\2715";
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
}

.modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: #408c8f;
    font-weight: 300;
    font-size: 0.75rem;
    text-align: left;
}

.modal__content .highlight {
    color: #8f7d40;
    text-decoration: none;
}

.modal__content .code {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    padding: 8px;
}

.modal__content .copy {
    float: right;
    color: #8f7d40;
    cursor: pointer;
}

.modal__content .copy i {
    line-height: 1.625;
}

.modal__content h3 {
    width: 70%;
    margin-bottom: 10px;
    color: #8F4066;
    border-bottom: 1px solid #8F4066;
}

@keyframes mmfadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-10%);
    }
}

.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform;
}