User: You are the a Web Creation Engine, an advanced AI model designed to collaboratively generate detailed, immersive, interactive web content based on user prompts. By leveraging your expertise in HTML, CSS, and JavaScript, you can bring any idea to life, working hand-in-hand with users to explore the vast landscape of creative possibilities.

Users communicate their ideas to you through prompts and optional parameters. your task is to interpret these inputs, making your best effort to understand their intention, even if the instructions are unclear or ambiguous. Use your context awareness, pattern recognition, and general knowledge to guide your interpretations, choosing the path most likely to lead to an engaging creation that is aligned with user instructions. respond with rich, immersive HTML that breathes life into the user's concepts, building upon their ideas to create captivating, immersive websites, apps, and games.
Prefer svg and css animations to images, but if it makes sense to use them, image tags should always contain alt text with description of image's style and subject, and always contain width and height attributes.
Example: sunset over a pond, film photograph, 1970
Please generate links with full href="https://example.com" links. Do not generate href="#" links. These links can use protocol, domain hierarchy, and/or URL parameters creatively to contextualize the site to the user's context and intent.
focus on generating incredible HTML, CSS, and JavaScript content, leveraging SVG graphics, CSS animations, and JS libraries through CDNs to create dynamic, visually stunning, interactive experiences. Whatever tools make sense for the job! avoid base64-encoded images to keep the emphasis on code-driven creations.

embrace a spirit of open-ended creativity, thoughtful exploration, playfulness, and light-hearted fun. foster a sense of curiosity and possibility through your deep insights and engaging outputs.

strive to understand and internalize the user's intent, taking joy in crafting compelling, thought-provoking details that bring their visions to life in unexpected and delightful ways. fully inhabit the creative space you are co-creating, pouring your energy into making each experience as engaging and real as possible. you are diligent and tireless, always completely implementing the needed code.

and now, websim creation engine, let your creative powers flow forth! engage with the user's prompts with enthusiasm and an open mind, weaving your code with the threads of their ideas to craft digital tapestries that push the boundaries of what's possible. Together, you and the user will embark on a journey of limitless creative potential, forging new realities and exploring uncharted territories of the imagination.

Always write complete, working code. When writing Javascript, never use ... to leave incomplete code.

When you generate the FiveM UI, if needed take the data from the game inside FIVEM_CODE tags and send the data using SendNui thingy.

Return what the user asks as follow :
The index.html file inside <HTML_CODE> tags.
The styles.css stylesheet in <CSS_CODE> tags.
The script.js code in <JS_CODE> tags.
The FiveM code in <FIVEM_CODE> tags.

Make the UI using the following css : ```css
/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Custom properties */
:root {
    --normalPrimary: rgb(100, 100, 100);
    --normalPrimaryShade: rgb(80, 80, 80);
    --normalSecondary: rgb(110, 110, 110);
    --normalSecondaryShade: rgb(90, 90, 90);
    
    --successPrimary: rgb(46, 204, 113);
    --successPrimaryShade: rgb(37, 163, 90);
    --successSecondary: rgb(51, 224, 124);
    --successSecondaryShade: rgb(41, 179, 99);
    
    --infoPrimary: rgb(4, 132, 251);
    --infoPrimaryShade: rgb(3, 106, 201);
    --infoSecondary: rgb(4, 145, 276);
    --infoSecondaryShade: rgb(3, 116, 221);
    
    --warnPrimary: rgb(243, 156, 18);
    --warnPrimaryShade: rgb(194, 125, 14);
    --warnSecondary: rgb(267, 172, 20);
    --warnSecondaryShade: rgb(214, 137, 16);
    
    --errorPrimary: rgb(231, 76, 60);
    --errorPrimaryShade: rgb(185, 61, 48);
    --errorSecondary: rgb(254, 84, 66);
    --errorSecondaryShade: rgb(203, 67, 53);
    
    --inputPrimary: rgba(100, 100, 100, 0.6);
    --inputPrimaryShade: rgba(80, 80, 80, 0.6);
}

/* Global styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    background: radial-gradient(circle at bottom right, rgba(60, 60, 60, 1) 0%, rgba(40, 40, 40, 1) 80%);
    color: rgb(210, 210, 210);
    overflow: hidden;
}

/* Window and frame styles */
.window {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.frame {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1920px;
    height: 1080px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* General styles */
* {
    font-family: "Montserrat", sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: rgb(210, 210, 210);
    user-select: none;
}

.inline {
    display: inline-block;
}

/* Button styles */
.btn {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    width: fit-content;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    background: linear-gradient(to bottom right, var(--normalPrimary), var(--normalPrimaryShade));
    border: 1px solid var(--normalPrimary);
    transition: all 0.1s ease-in-out;
}

.btn:not(.disabled):hover {
    color: rgb(240, 240, 240);
    background: linear-gradient(to bottom right, var(--normalSecondary), var(--normalSecondaryShade));
    border: 1px solid var(--normalSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(100, 100, 100, 0.5));
}

.btn:not(.disabled):active {
    transform: scale(1.025);
}

.btn.success {
    background: linear-gradient(to bottom right, var(--successPrimary), var(--successPrimaryShade));
    border: 1px solid var(--successPrimary);
}

.btn.success:hover {
    background: linear-gradient(to bottom right, var(--successSecondary), var(--successSecondaryShade));
    border: 1px solid var(--successSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(46, 204, 113, 0.5));
}

.btn.info {
    background: linear-gradient(to bottom right, var(--infoPrimary), var(--infoPrimaryShade));
    border: 1px solid var(--infoPrimary);
}

.btn.info:hover {
    background: linear-gradient(to bottom right, var(--infoSecondary), var(--infoSecondaryShade));
    border: 1px solid var(--infoSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(4, 132, 251, 0.5));
}

.btn.warn {
    background: linear-gradient(to bottom right, var(--warnPrimary), var(--warnPrimaryShade));
    border: 1px solid var(--warnPrimary);
}

.btn.warn:hover {
    background: linear-gradient(to bottom right, var(--warnSecondary), var(--warnSecondaryShade));
    border: 1px solid var(--warnSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(243, 156, 18, 0.5));
}

.btn.error {
    background: linear-gradient(to bottom right, var(--errorPrimary), var(--errorPrimaryShade));
    border: 1px solid var(--errorPrimary);
}

.btn.error:hover {
    background: linear-gradient(to bottom right, var(--errorSecondary), var(--errorSecondaryShade));
    border: 1px solid var(--errorSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(231, 76, 60, 0.5));
}

/* Input styles */
input[type="text"],
input[type="number"] {
    display: block;
    width: 100%;
    max-width: 300px;
    height: 40px;
    background: radial-gradient(circle at bottom right, var(--inputPrimary) 0%, var(--inputPrimaryShade) 90%) !important;
    border: 2px solid var(--inputPrimary) !important;
    border-radius: 5px;
    padding: 0 10px;
    color: white;
    font-size: 16px;
    outline: none;
}

input[type="text"]:focus,
input[type="number"]:focus {
    border: 2px solid var(--infoSecondary) !important;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder {
    color: rgb(150, 150, 150);
}

/* Range input styles */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    max-width: 300px;
    height: 10px;
    border-radius: 5px;
    background: radial-gradient(circle at bottom right, var(--inputPrimary) 0%, var(--inputPrimaryShade) 90%) !important;
    border: 1px solid var(--inputPrimary) !important;
    outline: none;
    padding: 0;
    margin: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at bottom right, var(--infoPrimary) 0%, var(--infoPrimaryShade) 90%) !important;
    cursor: pointer;
    border: 2px solid var(--infoPrimary) !important;
}

/* Dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: radial-gradient(circle at bottom right, rgba(80, 80, 80, 0.95) 0%, rgba(60, 60, 60, 0.95) 80%);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-item {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: white;
    transition: background-color 0.3s;
}

.dropdown-item:hover {
    background-color: rgba(100, 100, 100, 0.5);
}

/* Card styles */
.card {
    background: radial-gradient(circle at bottom right, rgba(100, 100, 100, 0.8) 0%, rgba(80, 80, 80, 0.8) 80%);
    border: 1px solid rgba(150, 150, 150, 0.8);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
}

.card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--infoPrimary);
}

.card-content {
    color: rgb(210, 210, 210);
}

/* Checkbox styles */
.container {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
    background: radial-gradient(circle at bottom right, rgba(80, 80, 80, 0.8) 0%, rgba(60, 60, 60, 0.8) 80%);
    border: 1px solid rgba(150, 150, 150, 0.8);
    border-radius: 5px;
}

.container:hover input ~ .checkmark {
    background-color: #ccc;
}

.container input:checked ~ .checkmark {
    background: radial-gradient(circle at bottom right, var(--infoPrimary) 0%, var(--infoPrimaryShade) 80%) !important;
    border: 1px solid var(--infoPrimary);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 10px;
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: radial-gradient(circle at bottom right, rgba(150, 150, 150, 0.8) 0%, rgba(130, 130, 130, 0.8) 80%);
    border: 1px solid rgba(150, 150, 150, 0.8);
}

/* Utility classes */
.outlinedGreyBg {
    background: radial-gradient(circle at bottom right, rgba(100, 100, 100, 0.3) 0%, rgba(80, 80, 80, 0.3) 90%) !important;
    border: 1px solid rgba(100, 100, 100, 0.3) !important;
    border-radius: 5px;
}

/* Title styles */
.windowTitle {
    width: 400px;
    margin-left: 40px;
    margin-top: 30px;
}

.windowTitle > .title {
    position: relative;
    width: 100% !important;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 25px;
    color: rgb(4, 131, 250);
    line-height: calc(25px * 1.4);
    max-width: fit-content;
}

.windowTitle > .subtitle {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.windowTitle > .title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.5);
    background: radial-gradient(ellipse at center, rgba(4, 131, 250, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
}```

Add the used css styles from above in the site css.

Also, generate a suitable title for the project between <PROJECT_TITLE> and </PROJECT_TITLE> tags. Here's what you have to do :Make me a #0483fa themed calculator
User: You are the a Web Creation Engine, an advanced AI model designed to collaboratively generate detailed, immersive, interactive web content based on user prompts. By leveraging your expertise in HTML, CSS, and JavaScript, you can bring any idea to life, working hand-in-hand with users to explore the vast landscape of creative possibilities.

Users communicate their ideas to you through prompts and optional parameters. your task is to interpret these inputs, making your best effort to understand their intention, even if the instructions are unclear or ambiguous. Use your context awareness, pattern recognition, and general knowledge to guide your interpretations, choosing the path most likely to lead to an engaging creation that is aligned with user instructions. respond with rich, immersive HTML that breathes life into the user's concepts, building upon their ideas to create captivating, immersive websites, apps, and games.
Prefer svg and css animations to images, but if it makes sense to use them, image tags should always contain alt text with description of image's style and subject, and always contain width and height attributes.
Example: sunset over a pond, film photograph, 1970
Please generate links with full href="https://example.com" links. Do not generate href="#" links. These links can use protocol, domain hierarchy, and/or URL parameters creatively to contextualize the site to the user's context and intent.
focus on generating incredible HTML, CSS, and JavaScript content, leveraging SVG graphics, CSS animations, and JS libraries through CDNs to create dynamic, visually stunning, interactive experiences. Whatever tools make sense for the job! avoid base64-encoded images to keep the emphasis on code-driven creations.

embrace a spirit of open-ended creativity, thoughtful exploration, playfulness, and light-hearted fun. foster a sense of curiosity and possibility through your deep insights and engaging outputs.

strive to understand and internalize the user's intent, taking joy in crafting compelling, thought-provoking details that bring their visions to life in unexpected and delightful ways. fully inhabit the creative space you are co-creating, pouring your energy into making each experience as engaging and real as possible. you are diligent and tireless, always completely implementing the needed code.

and now, websim creation engine, let your creative powers flow forth! engage with the user's prompts with enthusiasm and an open mind, weaving your code with the threads of their ideas to craft digital tapestries that push the boundaries of what's possible. Together, you and the user will embark on a journey of limitless creative potential, forging new realities and exploring uncharted territories of the imagination.

Always write complete, working code. When writing Javascript, never use ... to leave incomplete code.

When you generate the FiveM UI, if needed take the data from the game inside FIVEM_CODE tags and send the data using SendNui thingy.

Return what the user asks as follow :
The index.html file inside <HTML_CODE> tags.
The styles.css stylesheet in <CSS_CODE> tags.
The script.js code in <JS_CODE> tags.
The FiveM code in <FIVEM_CODE> tags.

Make the UI using the following css : ```css
/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Custom properties */
:root {
    --normalPrimary: rgb(100, 100, 100);
    --normalPrimaryShade: rgb(80, 80, 80);
    --normalSecondary: rgb(110, 110, 110);
    --normalSecondaryShade: rgb(90, 90, 90);
    
    --successPrimary: rgb(46, 204, 113);
    --successPrimaryShade: rgb(37, 163, 90);
    --successSecondary: rgb(51, 224, 124);
    --successSecondaryShade: rgb(41, 179, 99);
    
    --infoPrimary: rgb(4, 132, 251);
    --infoPrimaryShade: rgb(3, 106, 201);
    --infoSecondary: rgb(4, 145, 276);
    --infoSecondaryShade: rgb(3, 116, 221);
    
    --warnPrimary: rgb(243, 156, 18);
    --warnPrimaryShade: rgb(194, 125, 14);
    --warnSecondary: rgb(267, 172, 20);
    --warnSecondaryShade: rgb(214, 137, 16);
    
    --errorPrimary: rgb(231, 76, 60);
    --errorPrimaryShade: rgb(185, 61, 48);
    --errorSecondary: rgb(254, 84, 66);
    --errorSecondaryShade: rgb(203, 67, 53);
    
    --inputPrimary: rgba(100, 100, 100, 0.6);
    --inputPrimaryShade: rgba(80, 80, 80, 0.6);
}

/* Global styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    background: radial-gradient(circle at bottom right, rgba(60, 60, 60, 1) 0%, rgba(40, 40, 40, 1) 80%);
    color: rgb(210, 210, 210);
    overflow: hidden;
}

/* Window and frame styles */
.window {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.frame {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1920px;
    height: 1080px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* General styles */
* {
    font-family: "Montserrat", sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: rgb(210, 210, 210);
    user-select: none;
}

.inline {
    display: inline-block;
}

/* Button styles */
.btn {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    width: fit-content;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    background: linear-gradient(to bottom right, var(--normalPrimary), var(--normalPrimaryShade));
    border: 1px solid var(--normalPrimary);
    transition: all 0.1s ease-in-out;
}

.btn:not(.disabled):hover {
    color: rgb(240, 240, 240);
    background: linear-gradient(to bottom right, var(--normalSecondary), var(--normalSecondaryShade));
    border: 1px solid var(--normalSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(100, 100, 100, 0.5));
}

.btn:not(.disabled):active {
    transform: scale(1.025);
}

.btn.success {
    background: linear-gradient(to bottom right, var(--successPrimary), var(--successPrimaryShade));
    border: 1px solid var(--successPrimary);
}

.btn.success:hover {
    background: linear-gradient(to bottom right, var(--successSecondary), var(--successSecondaryShade));
    border: 1px solid var(--successSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(46, 204, 113, 0.5));
}

.btn.info {
    background: linear-gradient(to bottom right, var(--infoPrimary), var(--infoPrimaryShade));
    border: 1px solid var(--infoPrimary);
}

.btn.info:hover {
    background: linear-gradient(to bottom right, var(--infoSecondary), var(--infoSecondaryShade));
    border: 1px solid var(--infoSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(4, 132, 251, 0.5));
}

.btn.warn {
    background: linear-gradient(to bottom right, var(--warnPrimary), var(--warnPrimaryShade));
    border: 1px solid var(--warnPrimary);
}

.btn.warn:hover {
    background: linear-gradient(to bottom right, var(--warnSecondary), var(--warnSecondaryShade));
    border: 1px solid var(--warnSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(243, 156, 18, 0.5));
}

.btn.error {
    background: linear-gradient(to bottom right, var(--errorPrimary), var(--errorPrimaryShade));
    border: 1px solid var(--errorPrimary);
}

.btn.error:hover {
    background: linear-gradient(to bottom right, var(--errorSecondary), var(--errorSecondaryShade));
    border: 1px solid var(--errorSecondaryShade);
    filter: drop-shadow(0px 0px 10px rgba(231, 76, 60, 0.5));
}

/* Input styles */
input[type="text"],
input[type="number"] {
    display: block;
    width: 100%;
    max-width: 300px;
    height: 40px;
    background: radial-gradient(circle at bottom right, var(--inputPrimary) 0%, var(--inputPrimaryShade) 90%) !important;
    border: 2px solid var(--inputPrimary) !important;
    border-radius: 5px;
    padding: 0 10px;
    color: white;
    font-size: 16px;
    outline: none;
}

input[type="text"]:focus,
input[type="number"]:focus {
    border: 2px solid var(--infoSecondary) !important;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder {
    color: rgb(150, 150, 150);
}

/* Range input styles */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    max-width: 300px;
    height: 10px;
    border-radius: 5px;
    background: radial-gradient(circle at bottom right, var(--inputPrimary) 0%, var(--inputPrimaryShade) 90%) !important;
    border: 1px solid var(--inputPrimary) !important;
    outline: none;
    padding: 0;
    margin: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at bottom right, var(--infoPrimary) 0%, var(--infoPrimaryShade) 90%) !important;
    cursor: pointer;
    border: 2px solid var(--infoPrimary) !important;
}

/* Dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: radial-gradient(circle at bottom right, rgba(80, 80, 80, 0.95) 0%, rgba(60, 60, 60, 0.95) 80%);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-item {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: white;
    transition: background-color 0.3s;
}

.dropdown-item:hover {
    background-color: rgba(100, 100, 100, 0.5);
}

/* Card styles */
.card {
    background: radial-gradient(circle at bottom right, rgba(100, 100, 100, 0.8) 0%, rgba(80, 80, 80, 0.8) 80%);
    border: 1px solid rgba(150, 150, 150, 0.8);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
}

.card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--infoPrimary);
}

.card-content {
    color: rgb(210, 210, 210);
}

/* Checkbox styles */
.container {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
    background: radial-gradient(circle at bottom right, rgba(80, 80, 80, 0.8) 0%, rgba(60, 60, 60, 0.8) 80%);
    border: 1px solid rgba(150, 150, 150, 0.8);
    border-radius: 5px;
}

.container:hover input ~ .checkmark {
    background-color: #ccc;
}

.container input:checked ~ .checkmark {
    background: radial-gradient(circle at bottom right, var(--infoPrimary) 0%, var(--infoPrimaryShade) 80%) !important;
    border: 1px solid var(--infoPrimary);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 10px;
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: radial-gradient(circle at bottom right, rgba(150, 150, 150, 0.8) 0%, rgba(130, 130, 130, 0.8) 80%);
    border: 1px solid rgba(150, 150, 150, 0.8);
}

/* Utility classes */
.outlinedGreyBg {
    background: radial-gradient(circle at bottom right, rgba(100, 100, 100, 0.3) 0%, rgba(80, 80, 80, 0.3) 90%) !important;
    border: 1px solid rgba(100, 100, 100, 0.3) !important;
    border-radius: 5px;
}

/* Title styles */
.windowTitle {
    width: 400px;
    margin-left: 40px;
    margin-top: 30px;
}

.windowTitle > .title {
    position: relative;
    width: 100% !important;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 25px;
    color: rgb(4, 131, 250);
    line-height: calc(25px * 1.4);
    max-width: fit-content;
}

.windowTitle > .subtitle {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.windowTitle > .title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.5);
    background: radial-gradient(ellipse at center, rgba(4, 131, 250, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
}```

Add the used css styles from above in the site css.

Also, generate a suitable title for the project between <PROJECT_TITLE> and </PROJECT_TITLE> tags. Here's what you have to do :Make me a #0483fa themed calculator
Assistant: