@font-face {
    font-family: textFont;
    src: url(fonts/default.otf);
}

@font-face {
    font-family: numFont;
    src: url(fonts/ghosts.otf);
}

@font-face {
    font-family: titleFont;
    src: url(fonts/michroma.ttf);
}

@font-face {
    font-family: consoleFont;
    src: url(fonts/fira_mono_regular.ttf);
}

body {
    font-family: textFont;
    font-size: 20px;
    margin: 0;
    overflow: hidden;
    overflow-y: hidden;
    user-select: none;
    color: rgba(170, 170, 170, 1);
    font-size: 30px;
    cursor: url('images/ui_cursor.png'), auto;
    text-shadow: 
        -1px -1px 0 rgba(0, 0, 0, 0.1), 
        1px -1px 0 rgba(0, 0, 0, 0.1), 
        -1px 1px 0 rgba(0, 0, 0, 0.1), 
        1px 1px 0 rgba(0, 0, 0, 0.1);
    scrollbar-color: transparent transparent;
}

::scroll-button {
   height: 0;
   width: 0
}

.templates {
    display: none;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(135, 117, 139);
}

.title {
    display: flex;
    align-items: flex-end;
    height: 100px;
    background: none;
    margin-top: -120px;
}

.title-sub {
    height: 45px;
    font-size: 35px;
    display: flex;
    font-family: titleFont;
    color: white;
    text-transform: uppercase;
    align-items: center;
    padding-bottom: 0;
    padding-left: calc(min(160px, 100vw * 0.1));
}

.title-deco {
    width: 10px;
    height: 28px;
    margin-top: 3px;
    margin-right: 15px;
    background-color: rgb(255, 175, 230);
}

.content {
    position: absolute;
    width: 100%;
    top: 140px;
}

.button-list {
    margin-top: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: left;
    flex-direction: column;
    gap: 12px;
    width: 1000px;
}

.button-text {
    font-size: 30px;
    text-transform: uppercase;
}

.button {
    display: flex;
    align-items: center;
    justify-content: right;
    height: 55px;
    transition: 100ms;
}

.button-left {
    display: flex;
    align-items: center;
    justify-content: right;
    width: calc(min(590px, 100vw * 0.7 - 20px));
    height: 55px;
    background-image: url(images/btn_00a_ltcap.png);
    background-size: 100% calc(100% + 10px);
    transition: 50ms;
}

.button-right {
    width: 130px;
    height: 55px;
    background-image: url(images/btn_00a_rtcap.png);
    background-size: 100% calc(100% + 10px);
}

.button:hover .button-text {
    color: black;
}

.button:hover {

}

.text {
    margin-left: calc(min(160px, 100vw * 0.1));
    width: 50vw;
    font-size: 30px;
}

.side-text {
    position: absolute;
    right: 0px;
    margin-right: calc(100vw * 0.05);
    top: 20px;
    width: 600px;
    word-wrap: break-word;
}

.side-image {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 700px;
    margin-right: calc(100vw * 0.08);
    right: 0px;
    top: 50px;
}

.side-image-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-image: linear-gradient(rgb(50, 50, 50, 0.5) 60%, rgb(50, 50, 50, 0.0));
    background-size: 100% calc(100% + 10px);
    height: 600px;
    width: calc(100%);
}

.side-image-header {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(10, 10, 10, 0.5);
    width: 100%;
}

.side-image-title {
    display: flex;
    height: 50px;
    width: 100%;
}

.side-image-body-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -50px;
    width: calc(100% - 6px);
}

.side-image-body-vborder {
    width: 100%;
    height: 3px;
    background-color: rgb(0, 0, 0, 0.5);
}

.side-image-body-hborder {
    width: 3px;
    height: 600px;
    background-image: linear-gradient(rgb(30, 30, 30, 0.5) 60%, rgb(30, 30, 30, 0.0));
}

.side-image-title-right {
    display: flex;
    align-items: center;
    height: calc(100% - 2px);
    width: calc(100% - 60px);
    background-color: rgb(50, 50, 50, 0.5);
    background-size: 100% calc(100% + 10px);
    border: 3px solid rgba(10, 10, 10, 0.4);
    border-left: none;
    border-bottom: none;
    text-transform: uppercase;
    color: white;
}

.side-image-title-left {
    width: 60px;
    height: 100%;
}

.side-image-title-left-border {
    width: 60px;
    height: 50px;
    position: absolute;
    background-image: url(images/box_titlebar_leftcap_border.png);
    filter: brightness(20%) saturate(100) contrast(200%);
    opacity: 0.7;
    background-size: 100% calc(100% + 10px);
}

.side-image-title-left-fill {
    width: 60px;
    height: 50px;
    position: absolute;
    background-image:  url(images/box_titlebar_leftcap.png);
    filter: brightness(20%) saturate(100);
    opacity: 0.5;
    background-size: 100% calc(100% + 10px);
}

.side-image-img {
    width: calc(100% - 30px);
    height: 470px;
    background-size: 100% calc(100% + 10px);
}

.side-image-desc {
    height: 40px;
    margin-top: 5px;
    width: calc(100% - 40px);
}

.description {
    margin-left: calc(min(300px, 100vw * 0.2 - 20px));
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 30px;
    height: 40px;
}

.button-desc-deco {
    width: 7px;
    background-color: rgba(170, 170, 170, 1);
    height: 20px;
    margin-right: 10px;
    margin-top: 5px;
}

.button:hover .button-left {
    padding-right: 60px;
    background-image: url(images/btn_00a_ltcap_f.png);
}

.button:hover .button-right {
    background-image: url(images/btn_00a_rtcap_f_pc.png);
}

.separator {
    width: calc(min(710px, 100vw * 0.7 + 100px));
    height: 4px;
    background-image: linear-gradient(to right, rgba(160, 160, 160, 0.0), rgba(160, 160, 160, 0.5));
}

.spacing {
    width: 400px;
    height: 50px;
}

.divider {
    width: 100%;
    height: 170px;
    position: fixed;
}

.divider-image {
    width: 100%;
    height: 100%;
    background-image: url(images/bkgd_title_bar.png);
    opacity: 0.7;
    background-size: 100% calc(100% + 10px);
}

.version {
    font-size: 20px;
    position: absolute;
    right: 100px;
    bottom: 35px;
}

.top-divider {
    top: 0;
}

.bottom-divider .divider-image {
    transform: rotate(-180deg);
}

.bottom-divider {
    bottom: -15px;
}

.smoke-fx {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(images/frontend_sp_alpha_shards.png);
    background-size: cover;
    filter: saturate(0);
    opacity: 0.8;
    background-size: 100% calc(100% + 10px);
    animation: smoke 60s linear infinite;
}

.smoke-fx-2 {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 100%;
    background-image: url(images/frontend_sp_alpha_shards.png);
    background-size: cover;
    opacity: 0.8;
    filter: saturate(0);
    background-size: 100% calc(100% + 10px);
    animation: smoke 60s linear infinite;
}

.helpers {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 50px;
    left: 100px;
}

.helper-button {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 200px;
}

.helper-button:hover {
    
}

.helper-button-key {
    text-transform: uppercase;
}

.helper-button:hover .helper-button-text {
    color: white;
}

.helper-button .helper-button-key {
    color: rgb(255, 175, 230);
}

.live-feed-message {
    display: flex;
    gap: 20px;
}

.live-feed-message-text {
    word-break: break-all;
    user-select: text;
}

.live-feed-message-author {
    color: white;
}

.live-feed {
    display: flex;
    flex-direction: column;
    height: 600px;
}

.live-feed-chat > :first-child {
    margin-top: auto !important;
}

.live-feed-chat {
    position: relative;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    height: 500px;
}

.live-feed-input {
    outline: none;
    overflow: hidden;
    word-break: none;
    white-space: nowrap;
    height: 40px;
    padding-top: 5px;
    margin-top: 10px;
    border-top: 3px solid rgba(160, 160, 160, 0.5);
}

.live-feed-input:empty:before {
    content: "send a message..."
}

.emoji {
    align-self: center;
    height: 30px;
    top: 5px;
    position: relative;
}

.console {
    color: white;
    font-family: consoleFont;
    font-size: 12px;
    position: absolute;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    margin: 5px;
}

.console-input {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    background-color: rgba(51, 51, 51, 0.9);
    border: 2px solid rgba(25.5, 25.5, 25.5, 0.9);
    width: 100%;
    height: 22px;
}

.console-suggestions {
    position: absolute;
    width: calc(100% - 60px);
    left: 60px;
}

.console-suggestions-sub {
    width: calc(100% - 8px);
    height: 50px;
    background-color: rgba(77, 77, 77, 1);
    margin-top: 2px;
    padding: 4px;
    border: 2px solid rgba(25.5, 25.5, 25.5, 0.9);
}

.console-prefix {
    color: rgb(255, 175, 230);
    margin-left: 4px;
    width: 58px;
    margin-top: 1px;
}

.console-editable {
    margin-top: 1px;
    outline: none;
    overflow: hidden;
    width: calc(100% - 70px);
}

.console-editable-mirror {
    position: absolute;
    left: 60px;
    margin-top: 1px;
    outline: none;
    overflow: hidden;
}

.console-output-line {
    margin-left: 4px;
    margin-right: 4px;
}

::selection {
    background-color: rgb(10, 10, 10, 0.5);
    color: white;
}

.console-output > :first-child {
    margin-top: auto !important;
}

.console-output {
    display: flex;
    flex-direction: column;
    align-items: bottom;
    background-color: rgba(64, 64, 64, 0.85);
    border: 2px solid rgba(25.5, 25.5, 25.5, 0.9);
    width: calc(100%);
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 40px);
    margin-top: 1px;
    padding-top: 8px;
    padding-bottom: 8px;
}

@keyframes colorchange {0% { color: hsl(0, 100%, 50%); }
    0% { color: hsl(1, 100%, 50%); }
    0% { color: hsl(2, 100%, 50%); }
    0% { color: hsl(3, 100%, 50%); }
    1% { color: hsl(4, 100%, 50%); }
    1% { color: hsl(5, 100%, 50%); }
    1% { color: hsl(6, 100%, 50%); }
    1% { color: hsl(7, 100%, 50%); }
    2% { color: hsl(8, 100%, 50%); }
    2% { color: hsl(9, 100%, 50%); }
    2% { color: hsl(10, 100%, 50%); }
    3% { color: hsl(11, 100%, 50%); }
    3% { color: hsl(12, 100%, 50%); }
    3% { color: hsl(13, 100%, 50%); }
    3% { color: hsl(14, 100%, 50%); }
    4% { color: hsl(15, 100%, 50%); }
    4% { color: hsl(16, 100%, 50%); }
    4% { color: hsl(17, 100%, 50%); }
    5% { color: hsl(18, 100%, 50%); }
    5% { color: hsl(19, 100%, 50%); }
    5% { color: hsl(20, 100%, 50%); }
    5% { color: hsl(21, 100%, 50%); }
    6% { color: hsl(22, 100%, 50%); }
    6% { color: hsl(23, 100%, 50%); }
    6% { color: hsl(24, 100%, 50%); }
    6% { color: hsl(25, 100%, 50%); }
    7% { color: hsl(26, 100%, 50%); }
    7% { color: hsl(27, 100%, 50%); }
    7% { color: hsl(28, 100%, 50%); }
    8% { color: hsl(29, 100%, 50%); }
    8% { color: hsl(30, 100%, 50%); }
    8% { color: hsl(31, 100%, 50%); }
    8% { color: hsl(32, 100%, 50%); }
    9% { color: hsl(33, 100%, 50%); }
    9% { color: hsl(34, 100%, 50%); }
    9% { color: hsl(35, 100%, 50%); }
    10% { color: hsl(36, 100%, 50%); }
    10% { color: hsl(37, 100%, 50%); }
    10% { color: hsl(38, 100%, 50%); }
    10% { color: hsl(39, 100%, 50%); }
    11% { color: hsl(40, 100%, 50%); }
    11% { color: hsl(41, 100%, 50%); }
    11% { color: hsl(42, 100%, 50%); }
    11% { color: hsl(43, 100%, 50%); }
    12% { color: hsl(44, 100%, 50%); }
    12% { color: hsl(45, 100%, 50%); }
    12% { color: hsl(46, 100%, 50%); }
    13% { color: hsl(47, 100%, 50%); }
    13% { color: hsl(48, 100%, 50%); }
    13% { color: hsl(49, 100%, 50%); }
    13% { color: hsl(50, 100%, 50%); }
    14% { color: hsl(51, 100%, 50%); }
    14% { color: hsl(52, 100%, 50%); }
    14% { color: hsl(53, 100%, 50%); }
    15% { color: hsl(54, 100%, 50%); }
    15% { color: hsl(55, 100%, 50%); }
    15% { color: hsl(56, 100%, 50%); }
    15% { color: hsl(57, 100%, 50%); }
    16% { color: hsl(58, 100%, 50%); }
    16% { color: hsl(59, 100%, 50%); }
    16% { color: hsl(60, 100%, 50%); }
    16% { color: hsl(61, 100%, 50%); }
    17% { color: hsl(62, 100%, 50%); }
    17% { color: hsl(63, 100%, 50%); }
    17% { color: hsl(64, 100%, 50%); }
    18% { color: hsl(65, 100%, 50%); }
    18% { color: hsl(66, 100%, 50%); }
    18% { color: hsl(67, 100%, 50%); }
    18% { color: hsl(68, 100%, 50%); }
    19% { color: hsl(69, 100%, 50%); }
    19% { color: hsl(70, 100%, 50%); }
    19% { color: hsl(71, 100%, 50%); }
    20% { color: hsl(72, 100%, 50%); }
    20% { color: hsl(73, 100%, 50%); }
    20% { color: hsl(74, 100%, 50%); }
    20% { color: hsl(75, 100%, 50%); }
    21% { color: hsl(76, 100%, 50%); }
    21% { color: hsl(77, 100%, 50%); }
    21% { color: hsl(78, 100%, 50%); }
    21% { color: hsl(79, 100%, 50%); }
    22% { color: hsl(80, 100%, 50%); }
    22% { color: hsl(81, 100%, 50%); }
    22% { color: hsl(82, 100%, 50%); }
    23% { color: hsl(83, 100%, 50%); }
    23% { color: hsl(84, 100%, 50%); }
    23% { color: hsl(85, 100%, 50%); }
    23% { color: hsl(86, 100%, 50%); }
    24% { color: hsl(87, 100%, 50%); }
    24% { color: hsl(88, 100%, 50%); }
    24% { color: hsl(89, 100%, 50%); }
    25% { color: hsl(90, 100%, 50%); }
    25% { color: hsl(91, 100%, 50%); }
    25% { color: hsl(92, 100%, 50%); }
    25% { color: hsl(93, 100%, 50%); }
    26% { color: hsl(94, 100%, 50%); }
    26% { color: hsl(95, 100%, 50%); }
    26% { color: hsl(96, 100%, 50%); }
    26% { color: hsl(97, 100%, 50%); }
    27% { color: hsl(98, 100%, 50%); }
    27% { color: hsl(99, 100%, 50%); }
    27% { color: hsl(100, 100%, 50%); }
    28% { color: hsl(101, 100%, 50%); }
    28% { color: hsl(102, 100%, 50%); }
    28% { color: hsl(103, 100%, 50%); }
    28% { color: hsl(104, 100%, 50%); }
    29% { color: hsl(105, 100%, 50%); }
    29% { color: hsl(106, 100%, 50%); }
    29% { color: hsl(107, 100%, 50%); }
    30% { color: hsl(108, 100%, 50%); }
    30% { color: hsl(109, 100%, 50%); }
    30% { color: hsl(110, 100%, 50%); }
    30% { color: hsl(111, 100%, 50%); }
    31% { color: hsl(112, 100%, 50%); }
    31% { color: hsl(113, 100%, 50%); }
    31% { color: hsl(114, 100%, 50%); }
    31% { color: hsl(115, 100%, 50%); }
    32% { color: hsl(116, 100%, 50%); }
    32% { color: hsl(117, 100%, 50%); }
    32% { color: hsl(118, 100%, 50%); }
    33% { color: hsl(119, 100%, 50%); }
    33% { color: hsl(120, 100%, 50%); }
    33% { color: hsl(121, 100%, 50%); }
    33% { color: hsl(122, 100%, 50%); }
    34% { color: hsl(123, 100%, 50%); }
    34% { color: hsl(124, 100%, 50%); }
    34% { color: hsl(125, 100%, 50%); }
    35% { color: hsl(126, 100%, 50%); }
    35% { color: hsl(127, 100%, 50%); }
    35% { color: hsl(128, 100%, 50%); }
    35% { color: hsl(129, 100%, 50%); }
    36% { color: hsl(130, 100%, 50%); }
    36% { color: hsl(131, 100%, 50%); }
    36% { color: hsl(132, 100%, 50%); }
    36% { color: hsl(133, 100%, 50%); }
    37% { color: hsl(134, 100%, 50%); }
    37% { color: hsl(135, 100%, 50%); }
    37% { color: hsl(136, 100%, 50%); }
    38% { color: hsl(137, 100%, 50%); }
    38% { color: hsl(138, 100%, 50%); }
    38% { color: hsl(139, 100%, 50%); }
    38% { color: hsl(140, 100%, 50%); }
    39% { color: hsl(141, 100%, 50%); }
    39% { color: hsl(142, 100%, 50%); }
    39% { color: hsl(143, 100%, 50%); }
    40% { color: hsl(144, 100%, 50%); }
    40% { color: hsl(145, 100%, 50%); }
    40% { color: hsl(146, 100%, 50%); }
    40% { color: hsl(147, 100%, 50%); }
    41% { color: hsl(148, 100%, 50%); }
    41% { color: hsl(149, 100%, 50%); }
    41% { color: hsl(150, 100%, 50%); }
    41% { color: hsl(151, 100%, 50%); }
    42% { color: hsl(152, 100%, 50%); }
    42% { color: hsl(153, 100%, 50%); }
    42% { color: hsl(154, 100%, 50%); }
    43% { color: hsl(155, 100%, 50%); }
    43% { color: hsl(156, 100%, 50%); }
    43% { color: hsl(157, 100%, 50%); }
    43% { color: hsl(158, 100%, 50%); }
    44% { color: hsl(159, 100%, 50%); }
    44% { color: hsl(160, 100%, 50%); }
    44% { color: hsl(161, 100%, 50%); }
    45% { color: hsl(162, 100%, 50%); }
    45% { color: hsl(163, 100%, 50%); }
    45% { color: hsl(164, 100%, 50%); }
    45% { color: hsl(165, 100%, 50%); }
    46% { color: hsl(166, 100%, 50%); }
    46% { color: hsl(167, 100%, 50%); }
    46% { color: hsl(168, 100%, 50%); }
    46% { color: hsl(169, 100%, 50%); }
    47% { color: hsl(170, 100%, 50%); }
    47% { color: hsl(171, 100%, 50%); }
    47% { color: hsl(172, 100%, 50%); }
    48% { color: hsl(173, 100%, 50%); }
    48% { color: hsl(174, 100%, 50%); }
    48% { color: hsl(175, 100%, 50%); }
    48% { color: hsl(176, 100%, 50%); }
    49% { color: hsl(177, 100%, 50%); }
    49% { color: hsl(178, 100%, 50%); }
    49% { color: hsl(179, 100%, 50%); }
    50% { color: hsl(180, 100%, 50%); }
    50% { color: hsl(181, 100%, 50%); }
    50% { color: hsl(182, 100%, 50%); }
    50% { color: hsl(183, 100%, 50%); }
    51% { color: hsl(184, 100%, 50%); }
    51% { color: hsl(185, 100%, 50%); }
    51% { color: hsl(186, 100%, 50%); }
    51% { color: hsl(187, 100%, 50%); }
    52% { color: hsl(188, 100%, 50%); }
    52% { color: hsl(189, 100%, 50%); }
    52% { color: hsl(190, 100%, 50%); }
    53% { color: hsl(191, 100%, 50%); }
    53% { color: hsl(192, 100%, 50%); }
    53% { color: hsl(193, 100%, 50%); }
    53% { color: hsl(194, 100%, 50%); }
    54% { color: hsl(195, 100%, 50%); }
    54% { color: hsl(196, 100%, 50%); }
    54% { color: hsl(197, 100%, 50%); }
    55% { color: hsl(198, 100%, 50%); }
    55% { color: hsl(199, 100%, 50%); }
    55% { color: hsl(200, 100%, 50%); }
    55% { color: hsl(201, 100%, 50%); }
    56% { color: hsl(202, 100%, 50%); }
    56% { color: hsl(203, 100%, 50%); }
    56% { color: hsl(204, 100%, 50%); }
    56% { color: hsl(205, 100%, 50%); }
    57% { color: hsl(206, 100%, 50%); }
    57% { color: hsl(207, 100%, 50%); }
    57% { color: hsl(208, 100%, 50%); }
    58% { color: hsl(209, 100%, 50%); }
    58% { color: hsl(210, 100%, 50%); }
    58% { color: hsl(211, 100%, 50%); }
    58% { color: hsl(212, 100%, 50%); }
    59% { color: hsl(213, 100%, 50%); }
    59% { color: hsl(214, 100%, 50%); }
    59% { color: hsl(215, 100%, 50%); }
    60% { color: hsl(216, 100%, 50%); }
    60% { color: hsl(217, 100%, 50%); }
    60% { color: hsl(218, 100%, 50%); }
    60% { color: hsl(219, 100%, 50%); }
    61% { color: hsl(220, 100%, 50%); }
    61% { color: hsl(221, 100%, 50%); }
    61% { color: hsl(222, 100%, 50%); }
    61% { color: hsl(223, 100%, 50%); }
    62% { color: hsl(224, 100%, 50%); }
    62% { color: hsl(225, 100%, 50%); }
    62% { color: hsl(226, 100%, 50%); }
    63% { color: hsl(227, 100%, 50%); }
    63% { color: hsl(228, 100%, 50%); }
    63% { color: hsl(229, 100%, 50%); }
    63% { color: hsl(230, 100%, 50%); }
    64% { color: hsl(231, 100%, 50%); }
    64% { color: hsl(232, 100%, 50%); }
    64% { color: hsl(233, 100%, 50%); }
    65% { color: hsl(234, 100%, 50%); }
    65% { color: hsl(235, 100%, 50%); }
    65% { color: hsl(236, 100%, 50%); }
    65% { color: hsl(237, 100%, 50%); }
    66% { color: hsl(238, 100%, 50%); }
    66% { color: hsl(239, 100%, 50%); }
    66% { color: hsl(240, 100%, 50%); }
    66% { color: hsl(241, 100%, 50%); }
    67% { color: hsl(242, 100%, 50%); }
    67% { color: hsl(243, 100%, 50%); }
    67% { color: hsl(244, 100%, 50%); }
    68% { color: hsl(245, 100%, 50%); }
    68% { color: hsl(246, 100%, 50%); }
    68% { color: hsl(247, 100%, 50%); }
    68% { color: hsl(248, 100%, 50%); }
    69% { color: hsl(249, 100%, 50%); }
    69% { color: hsl(250, 100%, 50%); }
    69% { color: hsl(251, 100%, 50%); }
    70% { color: hsl(252, 100%, 50%); }
    70% { color: hsl(253, 100%, 50%); }
    70% { color: hsl(254, 100%, 50%); }
    70% { color: hsl(255, 100%, 50%); }
    71% { color: hsl(256, 100%, 50%); }
    71% { color: hsl(257, 100%, 50%); }
    71% { color: hsl(258, 100%, 50%); }
    71% { color: hsl(259, 100%, 50%); }
    72% { color: hsl(260, 100%, 50%); }
    72% { color: hsl(261, 100%, 50%); }
    72% { color: hsl(262, 100%, 50%); }
    73% { color: hsl(263, 100%, 50%); }
    73% { color: hsl(264, 100%, 50%); }
    73% { color: hsl(265, 100%, 50%); }
    73% { color: hsl(266, 100%, 50%); }
    74% { color: hsl(267, 100%, 50%); }
    74% { color: hsl(268, 100%, 50%); }
    74% { color: hsl(269, 100%, 50%); }
    75% { color: hsl(270, 100%, 50%); }
    75% { color: hsl(271, 100%, 50%); }
    75% { color: hsl(272, 100%, 50%); }
    75% { color: hsl(273, 100%, 50%); }
    76% { color: hsl(274, 100%, 50%); }
    76% { color: hsl(275, 100%, 50%); }
    76% { color: hsl(276, 100%, 50%); }
    76% { color: hsl(277, 100%, 50%); }
    77% { color: hsl(278, 100%, 50%); }
    77% { color: hsl(279, 100%, 50%); }
    77% { color: hsl(280, 100%, 50%); }
    78% { color: hsl(281, 100%, 50%); }
    78% { color: hsl(282, 100%, 50%); }
    78% { color: hsl(283, 100%, 50%); }
    78% { color: hsl(284, 100%, 50%); }
    79% { color: hsl(285, 100%, 50%); }
    79% { color: hsl(286, 100%, 50%); }
    79% { color: hsl(287, 100%, 50%); }
    80% { color: hsl(288, 100%, 50%); }
    80% { color: hsl(289, 100%, 50%); }
    80% { color: hsl(290, 100%, 50%); }
    80% { color: hsl(291, 100%, 50%); }
    81% { color: hsl(292, 100%, 50%); }
    81% { color: hsl(293, 100%, 50%); }
    81% { color: hsl(294, 100%, 50%); }
    81% { color: hsl(295, 100%, 50%); }
    82% { color: hsl(296, 100%, 50%); }
    82% { color: hsl(297, 100%, 50%); }
    82% { color: hsl(298, 100%, 50%); }
    83% { color: hsl(299, 100%, 50%); }
    83% { color: hsl(300, 100%, 50%); }
    83% { color: hsl(301, 100%, 50%); }
    83% { color: hsl(302, 100%, 50%); }
    84% { color: hsl(303, 100%, 50%); }
    84% { color: hsl(304, 100%, 50%); }
    84% { color: hsl(305, 100%, 50%); }
    85% { color: hsl(306, 100%, 50%); }
    85% { color: hsl(307, 100%, 50%); }
    85% { color: hsl(308, 100%, 50%); }
    85% { color: hsl(309, 100%, 50%); }
    86% { color: hsl(310, 100%, 50%); }
    86% { color: hsl(311, 100%, 50%); }
    86% { color: hsl(312, 100%, 50%); }
    86% { color: hsl(313, 100%, 50%); }
    87% { color: hsl(314, 100%, 50%); }
    87% { color: hsl(315, 100%, 50%); }
    87% { color: hsl(316, 100%, 50%); }
    88% { color: hsl(317, 100%, 50%); }
    88% { color: hsl(318, 100%, 50%); }
    88% { color: hsl(319, 100%, 50%); }
    88% { color: hsl(320, 100%, 50%); }
    89% { color: hsl(321, 100%, 50%); }
    89% { color: hsl(322, 100%, 50%); }
    89% { color: hsl(323, 100%, 50%); }
    90% { color: hsl(324, 100%, 50%); }
    90% { color: hsl(325, 100%, 50%); }
    90% { color: hsl(326, 100%, 50%); }
    90% { color: hsl(327, 100%, 50%); }
    91% { color: hsl(328, 100%, 50%); }
    91% { color: hsl(329, 100%, 50%); }
    91% { color: hsl(330, 100%, 50%); }
    91% { color: hsl(331, 100%, 50%); }
    92% { color: hsl(332, 100%, 50%); }
    92% { color: hsl(333, 100%, 50%); }
    92% { color: hsl(334, 100%, 50%); }
    93% { color: hsl(335, 100%, 50%); }
    93% { color: hsl(336, 100%, 50%); }
    93% { color: hsl(337, 100%, 50%); }
    93% { color: hsl(338, 100%, 50%); }
    94% { color: hsl(339, 100%, 50%); }
    94% { color: hsl(340, 100%, 50%); }
    94% { color: hsl(341, 100%, 50%); }
    95% { color: hsl(342, 100%, 50%); }
    95% { color: hsl(343, 100%, 50%); }
    95% { color: hsl(344, 100%, 50%); }
    95% { color: hsl(345, 100%, 50%); }
    96% { color: hsl(346, 100%, 50%); }
    96% { color: hsl(347, 100%, 50%); }
    96% { color: hsl(348, 100%, 50%); }
    96% { color: hsl(349, 100%, 50%); }
    97% { color: hsl(350, 100%, 50%); }
    97% { color: hsl(351, 100%, 50%); }
    97% { color: hsl(352, 100%, 50%); }
    98% { color: hsl(353, 100%, 50%); }
    98% { color: hsl(354, 100%, 50%); }
    98% { color: hsl(355, 100%, 50%); }
    98% { color: hsl(356, 100%, 50%); }
    99% { color: hsl(357, 100%, 50%); }
    99% { color: hsl(358, 100%, 50%); }
    99% { color: hsl(359, 100%, 50%); }
    100% { color: hsl(360, 100%, 50%); }
}

@keyframes smoke {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

@media screen and (max-width: 1500px) {
    .side-image {
        display: none !important;
    }

    .side-text {
        display: none !important;
    }

    .smoke-fx {
        display: none !important;
    }
    
    .smoke-fx-2 {
        display: none !important;
    }
}
