:root {

            --background: #05080d;

            --panel: rgba(12, 19, 29, 0.92);

            --border: #243345;

            --green: #43ff9d;

            --text: #eef7f2;

            --muted: #8ca29a;

            --danger: #ff4d5a;

            --ubuntu-orange: #e95420;

            --ubuntu-purple: #2c001e;

        }

        * {

            box-sizing: border-box;

        }


        body {

			    min-height: 100vh;

			    margin: 0;

			    color: var(--text);

			    background:

			        radial-gradient(

			            circle at 50% 20%,

			            #102535 0%,

			            transparent 40%

			        ),

			        var(--background);

			    background-attachment: fixed;

			    background-repeat: no-repeat;

			    font-family: Arial, Helvetica, sans-serif;

        }

        /* =========================

           OPENING SCREEN

        ========================== */

        #intro {

            position: fixed;

            inset: 0;

            z-index: 100;

            display: flex;

            align-items: center;

            justify-content: center;

            overflow: hidden;

            background: #020408;

            transition: opacity 0.8s ease, visibility 0.8s;

        }

        .intro-content {

            text-align: center;

        }

        .intro-title {

            margin: 0 0 8px;

            color: var(--green);

            font-family: "Courier New", monospace;

            font-size: clamp(2.7rem, 9vw, 6.5rem);

            letter-spacing: 0.12em;

            text-shadow: 0 0 25px rgba(67, 255, 157, 0.45);

        }

        .intro-subtitle {

            margin-bottom: 42px;

            color: var(--muted);

            font-family: "Courier New", monospace;

        }

        /* =========================

           CYBER BOMB

        ========================== */

        #bomb-button {

            position: relative;

            width: 180px;

            height: 180px;

            padding: 0;

            border: 3px solid #314455;

            border-radius: 50%;

            color: white;

            background:

                radial-gradient(

                    circle at 35% 30%,

                    #536372,

                    #18212b 40%,

                    #070b10 75%

                );

            cursor: pointer;

            box-shadow:

                0 0 35px rgba(67, 255, 157, 0.12),

                inset 0 0 25px rgba(255, 255, 255, 0.1);

            transition:

                transform 0.25s ease,

                box-shadow 0.25s ease;

        }

        #bomb-button:hover {

            transform: scale(1.06);

            box-shadow:

                0 0 50px rgba(67, 255, 157, 0.3),

                inset 0 0 25px rgba(255, 255, 255, 0.15);

        }

        #bomb-button:active {

            transform: scale(0.96);

        }

        #bomb-button:disabled {

            cursor: default;

        }

        .bomb-symbol {

            font-family: "Courier New", monospace;

            font-size: 4rem;

            font-weight: bold;

        }

        .fuse {

            position: absolute;

            top: -44px;

            left: 110px;

            width: 55px;

            height: 55px;

            border-top: 7px solid #756552;

            border-radius: 50%;

            transform: rotate(-20deg);

        }

        .spark {

            position: absolute;

            top: -57px;

            right: 1px;

            color: #ffbf40;

            font-size: 2.3rem;

            animation: flicker 0.25s infinite alternate;

        }

        .click-message {

            margin-top: 35px;

            color: var(--green);

            font-family: "Courier New", monospace;

            letter-spacing: 0.1em;

        }

        @keyframes flicker {

            from {

                opacity: 0.45;

                transform: scale(0.8) rotate(-10deg);

            }

            to {

                opacity: 1;

                transform: scale(1.15) rotate(10deg);

            }

        }

        /* =========================

           EXPLOSION

        ========================== */

        .shockwave {

            position: absolute;

            width: 40px;

            height: 40px;

            border: 10px solid var(--green);

            border-radius: 50%;

            opacity: 0;

            pointer-events: none;

        }

        #intro.exploding .shockwave {

            animation: explode 0.9s ease-out forwards;

        }

        #intro.exploding .intro-content {

            animation: blast 0.7s ease-in forwards;

        }

        @keyframes explode {

            0% {

                opacity: 1;

                transform: scale(0);

                box-shadow: 0 0 60px 30px #ffffff;

            }

            60% {

                opacity: 0.8;

                border-color: #ff9c33;

            }

            100% {

                opacity: 0;

                transform: scale(40);

                box-shadow: 0 0 100px 50px var(--danger);

            }

        }

        @keyframes blast {

            0% {

                opacity: 1;

                transform: scale(1);

            }

            45% {

                filter: brightness(5);

                transform: scale(1.12);

            }

            100% {

                opacity: 0;

                transform: scale(1.5);

            }

        }

        #intro.hidden {

            visibility: hidden;

            opacity: 0;

        }

        /* =========================

           UBUNTU TERMINAL

        ========================== */

        #terminal-startup {

            position: fixed;

            inset: 0;

            z-index: 90;

            display: none;

            align-items: center;

            justify-content: center;

            padding: 24px;

            background: #020408;

        }

        .terminal-window {

            width: min(720px, 95vw);

            min-height: 330px;

            overflow: hidden;

            border: 1px solid #493444;

            border-radius: 10px;

            background: #05090e;

            box-shadow:

                0 0 60px rgba(67, 255, 157, 0.12),

                0 20px 60px rgba(0, 0, 0, 0.7);

        }

        .terminal-bar {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 10px 13px;

            color: #ffffff;

            background: var(--ubuntu-purple);

            font-family: "Courier New", monospace;

            font-size: 0.85rem;

        }

        .terminal-title {

            display: flex;

            align-items: center;

            gap: 9px;

        }

        .ubuntu-logo {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 20px;

            height: 20px;

            border-radius: 50%;

            color: white;

            background: var(--ubuntu-orange);

            box-shadow: 0 0 8px rgba(233, 84, 32, 0.55);

        }

        .terminal-controls {

            display: flex;

            align-items: center;

            gap: 8px;

        }

        .terminal-controls span {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 23px;

            height: 23px;

            border-radius: 50%;

            color: #dedede;

            background: #4b3945;

            line-height: 1;

        }

        .terminal-controls .close-button {

            background: var(--ubuntu-orange);

        }

        #terminal-text {

            min-height: 275px;

            padding: 25px;

            color: var(--green);

            background:

                linear-gradient(

                    rgba(67, 255, 157, 0.02),

                    rgba(67, 255, 157, 0.02)

                ),

                #05090e;

            font-family: "Courier New", monospace;

            font-size: 1rem;

            line-height: 2;

            white-space: pre-line;

        }

        /* =========================

           MAIN WEBSITE

        ========================== */

        #website {

            opacity: 0;

            transition: opacity 0.8s ease;

        }

        #website.visible {

            opacity: 1;

        }

        nav {

			    display: grid;

			    grid-template-columns: 1fr auto 1fr;

			    align-items: center;

			    gap: 25px;

			    padding: 22px max(5vw, 25px);

			    border-bottom: 1px solid rgba(67, 255, 157, 0.13);

			    background: rgba(5, 8, 13, 0.82);

			    backdrop-filter: blur(12px);

        }

		.logo {

		    justify-self: start;

		}

		.site-navigation {

		    justify-self: center;

		}

		.nav-actions {

		    justify-self: end;

		}

        .logo {

            color: var(--green);

            font-family: "Courier New", monospace;

            font-size: 1.35rem;

            font-weight: bold;

            letter-spacing: 0.12em;

        }

		.logo {

		    color: var(--green);

		    font-family: "Courier New", monospace;

		    font-size: 1.35rem;

		    font-weight: bold;

		    letter-spacing: 0.12em;

		    text-decoration: none;

		}

		/* =========================

		   SITE NAVIGATION

		========================== */

		.site-navigation {

		    display: flex;

		    align-items: center;

		    justify-content: center;

		    gap: clamp(18px, 3vw, 38px);

		}

		.nav-link {

			    position: relative;

			    display: inline-block;

			    padding: 9px 16px;

			    color: var(--muted);

			    font-family: "Courier New", monospace;

			    font-size: 1rem;

			    font-weight: bold;

			    letter-spacing: 0.1em;

			    text-decoration: none;

			    transition:

			        color 0.2s ease,

			        text-shadow 0.2s ease,

			        transform 0.2s ease;

		}

		/*

		 * Terminal symbols are positioned around the text

		 * without moving the other navigation links.

		 */

		.nav-link::before {

		    position: absolute;

		    left: 0;

		    content: ">";

		    opacity: 0;

		    transform: translateX(-4px);

		    transition:

		        opacity 0.2s ease,

		        transform 0.2s ease;

		}

		.nav-link::after {

		    content: "_";

		    opacity: 0;

		}

		.nav-link:hover,

		.nav-link:focus-visible {

		    color: var(--green);

		    text-shadow: 0 0 10px rgba(67, 255, 157, 0.4);

		    transform: translateX(2px);

		}

		.nav-link:hover::before,

		.nav-link:focus-visible::before {

		    opacity: 1;

		    transform: translateX(0);

		}

		.nav-link:hover::after,

		.nav-link:focus-visible::after {

		    opacity: 1;

		    animation: terminal-cursor 0.7s steps(1) infinite;

		}

		/* The active page remains green. */

		.nav-link.active {

		    color: var(--green);

		}

		.nav-link.active::after {

		    content: "";

		}

		.nav-link:focus-visible {

		    border-radius: 4px;

		    outline: 1px solid var(--green);

		    outline-offset: 3px;

		}

		@keyframes terminal-cursor {

		    0%,

		    49% {

		        opacity: 1;

		    }

		    50%,

		    100% {

		        opacity: 0;

		    }

		}

        .nav-actions {

            display: flex;

            align-items: center;

            gap: 20px;

        }

        .status {

            color: var(--muted);

            font-family: "Courier New", monospace;

            font-size: 0.85rem;

        }

        .status-light {

            display: inline-block;

            width: 9px;

            height: 9px;

            margin-right: 8px;

            border-radius: 50%;

            background: var(--green);

            box-shadow: 0 0 10px var(--green);

        }

        #replay-button {

            padding: 9px 14px;

            border: 1px solid var(--green);

            border-radius: 6px;

            color: var(--green);

            background: transparent;

            cursor: pointer;

            font-family: "Courier New", monospace;

            transition:

                color 0.2s ease,

                background 0.2s ease,

                box-shadow 0.2s ease;

        }

        #replay-button:hover {

            color: #00180b;

            background: var(--green);

            box-shadow: 0 0 18px rgba(67, 255, 157, 0.3);

        }

        main {

            width: min(1050px, 90%);

            margin: auto;

            padding: 90px 0;

        }

        .hero-label {

            color: var(--green);

            font-family: "Courier New", monospace;

        }

        .hero-title {

            max-width: 800px;

            margin: 15px 0;

            font-size: clamp(2.4rem, 6vw, 5rem);

            line-height: 1.05;

        }

        .hero-description {

            max-width: 670px;

            color: var(--muted);

            font-size: 1.1rem;

            line-height: 1.7;

        }

        /* =========================

           PASSWORD TOOL

        ========================== */


		/*

		 * Prevent the intro from flashing when the server

		 * returns a password-analysis result.

		 */

		body.result-page #intro,

		body.result-page #terminal-startup {

		    display: none;

		}

		body.result-page #website {

		    opacity: 1;

		}

		.password-requirements {

		    margin: 18px 0 25px;

		    padding-left: 24px;

		    color: var(--text);

		    line-height: 1.9;

		}

		.password-requirements li::marker {

		    color: var(--green);

		}



        .tool-card {

            margin-top: 65px;

            padding: clamp(25px, 5vw, 50px);

            border: 1px solid var(--border);

            border-radius: 18px;

            background: var(--panel);

            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);

        }

        .tool-heading {

            margin-top: 0;

            font-family: "Courier New", monospace;

            font-size: 1.65rem;

        }

        .privacy-warning {

            margin-bottom: 25px;

            padding: 13px 16px;

            border-left: 3px solid #ffc857;

            color: #dacda9;

            background: rgba(255, 200, 87, 0.07);

            font-size: 0.9rem;

        }

        .password-form {

            display: flex;

            gap: 12px;

        }

        .password-form input {

            flex: 1;

            min-width: 0;

            padding: 15px 17px;

            border: 1px solid #33475a;

            border-radius: 8px;

            outline: none;

            color: var(--text);

            background: #070c12;

            font-family: "Courier New", monospace;

            font-size: 1rem;

        }

        .password-form input:focus {

            border-color: var(--green);

            box-shadow: 0 0 0 3px rgba(67, 255, 157, 0.1);

        }

        .password-form button {

            padding: 15px 22px;

            border: 0;

            border-radius: 8px;

            color: #00180b;

            background: var(--green);

            cursor: pointer;

            font-weight: bold;

            transition:

                background 0.2s ease,

                transform 0.2s ease;

        }

        .password-form button:hover {

            background: #8affbe;

            transform: translateY(-2px);

        }

        .result {

            margin-top: 25px;

            padding: 18px;

            border: 1px solid rgba(67, 255, 157, 0.35);

            border-radius: 8px;

            color: var(--green);

            background: rgba(67, 255, 157, 0.06);

            font-family: "Courier New", monospace;

        }

        .ip-address {

            margin-top: 25px;

            color: var(--muted);

            font-family: "Courier New", monospace;

            font-size: 0.85rem;

        }

        footer {

            padding: 30px;

            border-top: 1px solid #182431;

            color: var(--muted);

            text-align: center;

            font-family: "Courier New", monospace;

            font-size: 0.8rem;

        }

		/* =========================

		   ABOUT AND BLUEPRINT PAGES

		========================== */

		.about-layout {

		    display: grid;

		    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);

		    align-items: center;

		    gap: clamp(40px, 7vw, 90px);

		}

		.about-photo-frame {

		    margin: 0;

		    overflow: hidden;

		    border: 1px solid var(--border);

		    border-radius: 18px;

		    background: var(--panel);

		    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);

		}

		.about-photo {

		    display: block;

		    width: 100%;

		    aspect-ratio: 4 / 3;

		    object-fit: cover;

		}

		.about-photo-frame figcaption {

		    padding: 13px 16px;

		    color: var(--muted);

		    font-family: "Courier New", monospace;

		    font-size: 0.8rem;

		}

		.content-card {

		    margin-top: 55px;

		    padding: clamp(25px, 5vw, 48px);

		    border: 1px solid var(--border);

		    border-radius: 18px;

		    background: var(--panel);

		    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.28);

		}

		.content-card h2 {

		    margin: 10px 0 20px;

		    font-size: clamp(1.6rem, 3vw, 2.3rem);

		}

		.content-card > p {

		    max-width: 820px;

		    color: var(--muted);

		    font-size: 1.02rem;

		    line-height: 1.8;

		}

		.section-label {

		    color: var(--green);

		    font-family: "Courier New", monospace;

		    font-size: 0.82rem;

		    letter-spacing: 0.12em;

		}

		.learning-grid,

		.technology-grid {

		    display: grid;

		    grid-template-columns: repeat(3, minmax(0, 1fr));

		    gap: 18px;

		    margin-top: 30px;

		}

		.learning-item,

		.technology-group {

		    padding: 22px;

		    border: 1px solid #273849;

		    border-radius: 12px;

		    background: rgba(5, 10, 16, 0.72);

		}

		.learning-item h3,

		.technology-group h3,

		.flow-step h3 {

		    margin: 10px 0;

		    font-family: "Courier New", monospace;

		}

		.learning-item p,

		.flow-step p {

		    margin-bottom: 0;

		    color: var(--muted);

		    line-height: 1.65;

		}

		.learning-number,

		.flow-number {

		    color: var(--green);

		    font-family: "Courier New", monospace;

		    font-size: 0.8rem;

		}

		.technology-group h3 {

		    color: var(--green);

		}

		.technology-group ul {

		    margin-bottom: 0;

		    padding-left: 20px;

		    color: var(--muted);

		    line-height: 1.9;

		}

		.technology-group li::marker {

		    color: var(--green);

		}

		/* =========================

		   EXPANDABLE BLUEPRINT FLOW

		========================== */

		.blueprint-flow {

		    display: grid;

		    grid-template-columns: repeat(5, minmax(0, 1fr));

		    align-items: start;

		    gap: 30px;

		    margin-top: 35px;

		}

		.application-flow {

		    grid-template-columns: repeat(4, minmax(0, 1fr));

		}

		.flow-step {

		    position: relative;

		    min-width: 0;

		    overflow: visible;

		    border: 1px solid rgba(67, 255, 157, 0.25);

		    border-radius: 12px;

		    background:

		        linear-gradient(

		            145deg,

		            rgba(67, 255, 157, 0.06),

		            rgba(5, 10, 16, 0.85)

		        );

		    transition:

		        border-color 0.2s ease,

		        box-shadow 0.2s ease,

		        transform 0.2s ease;

		}

		.flow-step:hover {

		    border-color: rgba(67, 255, 157, 0.7);

		    box-shadow:

		        0 0 22px rgba(67, 255, 157, 0.1);

		    transform: translateY(-3px);

		}

		.flow-step[open] {

		    border-color: var(--green);

		    box-shadow:

		        0 0 25px rgba(67, 255, 157, 0.12);

		}

		.flow-step summary {

		    display: flex;

		    min-height: 175px;

		    padding: 25px 18px;

		    flex-direction: column;

		    list-style: none;

		    cursor: pointer;

		}

		.flow-step summary::-webkit-details-marker {

		    display: none;

		}

		.flow-number {

		    color: var(--green);

		    font-family: "Courier New", monospace;

		    font-size: 0.9rem;

		    font-weight: bold;

		}

		.flow-role {

		    display: block;

		    margin-top: 13px;

		    color: var(--muted);

		    font-family:

		        "Trebuchet MS",

		        Arial,

		        sans-serif;

		    font-size: 0.88rem;

		    font-weight: 800;

		    letter-spacing: 0.08em;

		    text-transform: uppercase;

		}

		.flow-step h3 {

		    margin: 9px 0 12px;

		    color: var(--text);

		    font-family:

		        "Trebuchet MS",

		        Arial,

		        sans-serif;

		    font-size: 1.4rem;

		    font-weight: 900;

		    letter-spacing: 0.02em;

		}

		.flow-summary {

		    color: var(--muted);

		    line-height: 1.6;

		}

		.flow-step:not([open]) .flow-summary {

		    display: none;

		}

		.detail-toggle {
		    display: inline-block;
		    width: max-content;
		    margin-top: auto;
		    padding-top: 14px;

		    color: var(--green);

		    font-family: "Courier New", monospace;
		    font-size: 0.7rem;
		    font-weight: bold;
		    letter-spacing: 0.04em;

		    white-space: nowrap;
		}

		.detail-toggle::before {

		    content: "[ VIEW DETAILS ]";

		}

		.flow-step[open] .detail-toggle::before {

		    content: "[ CLOSE DETAILS ]";

		}

		.flow-details {

		    padding: 0 22px 22px;

		    border-top:

		        1px solid rgba(67, 255, 157, 0.15);

		}

		.flow-details p {

		    margin: 18px 0 0;

		    color: var(--text);

		    font-size: 0.9rem;

		    line-height: 1.7;

		}

		.flow-step:not(:last-child)::after {

		    position: absolute;

		    z-index: 2;

		    top: 50%;

		    right: -23px;

		    color: var(--green);

		    content: ">";

		    font-family: "Courier New", monospace;

		    font-size: 1.4rem;

		    transform: translateY(-50%);

		}

		.media-placeholder {

		    display: grid;

		    min-height: 250px;

		    margin-top: 30px;

		    place-items: center;

		    border: 1px dashed rgba(67, 255, 157, 0.4);

		    border-radius: 12px;

		    color: var(--green);

		    background: rgba(5, 10, 16, 0.6);

		    font-family: "Courier New", monospace;

		    text-align: center;

		}

		.terminal-action {

		    display: inline-block;

		    margin-top: 18px;

		    padding: 12px 18px;

		    border: 1px solid var(--green);

		    border-radius: 7px;

		    color: var(--green);

		    font-family: "Courier New", monospace;

		    text-decoration: none;

		    transition:

		        color 0.2s ease,

		        background 0.2s ease,

		        box-shadow 0.2s ease;

		}

		.terminal-action:hover {

		    color: #00180b;

		    background: var(--green);

		    box-shadow: 0 0 18px rgba(67, 255, 157, 0.3);

		}

		/* =========================

		   BLUEPRINT SCREENSHOTS

		========================== */

		.blueprint-media-grid {

		    display: grid;

		    grid-template-columns:

		        repeat(2, minmax(0, 1fr));

		    width: min(100%, 900px);

		    gap: 22px;

		    margin: 40px auto 0;

		}

		.blueprint-media {

		    margin: 0;

		    overflow: hidden;

		    border: 1px solid var(--border);

		    border-radius: 12px;

		    background: rgba(5, 10, 16, 0.75);

		    transition:

		        border-color 0.2s ease,

		        transform 0.2s ease,

		        box-shadow 0.2s ease;

		}

		.blueprint-media:hover {

		    border-color: rgba(67, 255, 157, 0.6);

		    box-shadow:

		        0 18px 45px rgba(0, 0, 0, 0.35);

		    transform: translateY(-3px);

		}

		.blueprint-media img {

		    display: block;

		    width: 100%;

		    height: clamp(190px, 25vw, 290px);

		    padding: 12px;

		    object-fit: contain;

		    object-position: center;

		    border-bottom: 1px solid var(--border);

		    background: #05080d;

		}

		.blueprint-media figcaption {

		    padding: 18px;

		    color: var(--muted);

		    line-height: 1.6;

		}

		.blueprint-media figcaption strong {

		    display: block;

		    margin-bottom: 6px;

		    color: var(--green);

		    font-family: "Courier New", monospace;

		}
		/* =========================
		   IMAGE LIGHTBOX
		========================== */

		.blueprint-media img {
		    cursor: zoom-in;
		}

		.image-lightbox[hidden] {
		    display: none;
		}

		.image-lightbox {
		    position: fixed;
		    inset: 0;
		    z-index: 1000;

		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    gap: 16px;

		    padding: 24px;

		    background: rgba(0, 0, 0, 0.92);

		    cursor: zoom-out;
		    backdrop-filter: blur(8px);
		}

		.image-lightbox-content {
		    display: block;

		    max-width: min(95vw, 1500px);
		    max-height: 86vh;

		    border: 1px solid var(--green);
		    border-radius: 8px;

		    object-fit: contain;

		    background: #020408;

		    box-shadow:
		        0 0 45px rgba(67, 255, 157, 0.18);
		}

		.image-lightbox-message {
		    margin: 0;

		    color: var(--green);

		    font-family: "Courier New", monospace;
		    font-size: 0.8rem;
		    letter-spacing: 0.08em;
		    text-align: center;
		}

		body.lightbox-open {
		    overflow: hidden;
		}

        /* =========================

           MOBILE VIEW

        ========================== */

        @media (max-width: 650px) {

			.blueprint-flow,

			.application-flow {

			    grid-template-columns: 1fr;

			}

			.blueprint-flow,
			.application-flow,
			.deployment-flow,
			.learning-grid,
			.technology-grid {
			    grid-template-columns: 1fr;
			}

			.flow-step {
			    min-height: auto;
			}

			.flow-step summary {
			    min-height: auto;
			}

			.flow-step:not(:last-child)::after {
			    top: auto;
			    right: 50%;
			    bottom: -26px;

			    transform:
			        translateX(50%)
			        rotate(90deg);
			}

			.blueprint-media-grid {
			    width: 100%;
			    grid-template-columns: 1fr;
			}

			.blueprint-media img {
			    height: auto;
			    max-height: 320px;
			}

			.about-layout {
			    grid-template-columns: 1fr;
			}

			.about-photo-frame {
			    max-width: 500px;
			}
			    nav {

			        display: flex;

			        align-items: flex-start;

			        gap: 18px;

			        flex-direction: column;

			    }

			    .logo,

			    .site-navigation,

			    .nav-actions {

			        justify-self: auto;

			    }

			    .site-navigation {

			        width: 100%;

			        justify-content: flex-start;

			        gap: 6px;

			        overflow-x: auto;

			    }

			    .nav-link {

			        padding: 8px 10px;

			        font-size: 0.8rem;

			    }

			    .nav-actions {

			        align-items: flex-start;

			        flex-direction: column;

			        gap: 12px;

			    }

			    /* Keep your remaining mobile rules below this. */

			}

            main {

                padding-top: 60px;

            }

            .password-form {

                flex-direction: column;

            }

            #bomb-button {

                width: 150px;

                height: 150px;

            }

            .bomb-symbol {

                font-size: 3.3rem;

            }

        }
