@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

:root {
        /** Tła **/
        
    --main-bg: rgb( 15 18 26);
    --second-bg: rgb(21 26 38);
    --third-bg: rgb(28 34 51);
        --second-bg-opacity: rgba(21, 21, 21, .5);
        
        --third-bg-hover: rgb(31 31 31 / 80%);;
        
        --gray-bg: rgb(31, 31, 31);

        --blue-opacity-button: rgb(18 129 187 / 10%);
        --blue-opacity: rgb(18 129 187 / 30%);

        /** Kolory **/
        
        --white: #fff;
        --gray: #ccc;
        --blue: #1281bb;
        --light-blue: #02a9ff;
        --blue-a: #23b4ff;

        //** Inne **/

    --grid-gap: 15px;
    --grid-min: 250px;
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

::-webkit-scrollbar {
    width: 3px;
    background-color: var(--main-bg);
}

::-webkit-scrollbar-thumb {
background-color: var(--blue);
    border-radius: 4px;
}

body {
  font-family: Arial, sans-serif;
  color: #999;
  margin: 0;
  padding: 20px;
  background: linear-gradient(160deg, var(--second-bg), var(--main-bg) 20%);
}

.generator-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.settings-panel, .preview-panel {
  background: var(--second-bg);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.settings-panel {
  flex: 1 1 300px;
  max-width: 350px;
}

.preview-panel {
  flex: 1 1 500px;
}

.section {
  margin-bottom: 20px;
}

.section h3 {
  margin-top: 0;
  border-bottom: 1px solid var(--third-bg);
  padding-bottom: 5px;
  margin-bottom: 5px;
  color: #fff;
}

input[type="text"], select, input[type="color"], input[type="range"] {
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--third-bg);
  color: #ccc;
}

input[type="range"] {
  cursor: pointer;
}

button {
  padding: 10px 20px;
  background-color: var(--blue-opacity-button);
  border: none;
  color: var(--blue-a);
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: var(--blue);
  color: #fff;
  transition: 0.2s;
}

canvas {
  border: 2px solid #333;
  border-radius: 10px;
  width: 100%;
  height: auto;
}

h1, h2 {
    color: #fff;
    margin-bottom: 1rem;
}

.footer-panel {
  margin-top: 15px;
  text-align: right; /* możesz zmienić na center lub left */
  font-size: 0.9em;
  color: #555;
  font-style: italic;
}

.credits {
  color: #888;
}

a.upload-to-forum {
    color: var(--blue);
    text-decoration: none;
    background: var(--blue-opacity-button);
    padding: 20px;
    width: 100%;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 17px;
    font-style: normal;
    border-radius: 5px;
}

a.upload-to-forum:hover, a.upload-to-forum:active {
    color: #fff;
    background: var(--blue);
    transition: 0.2s;
}