@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;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  background: linear-gradient(160deg, var(--second-bg), var(--main-bg) 20%);
  color: #999;
}

h1 {
  margin-bottom: 20px;
  color: #fff;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

input, select, button, label {
  padding: 8px;
  font-size: 16px;
  background: var(--second-bg);
  border: 1px solid var(--third-bg);
  color: #ccc;
}

canvas {
  border: 2px solid var(--third-bg);
  margin-bottom: 10px;
}

a#downloadLink {
    color: var(--blue);
    text-decoration: none;
    background: var(--blue-opacity-button);
    padding: 20px;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}

a#downloadLink:hover, a#downloadLink:active {
    background: var(--blue-opacity);
    color: #fff;
    transition: 0.2s;
}