editor.css

:root {
    --base: #242831;
    --brightness: 1;
    --contrast: 1;
    --blur: 0px;
    --grayscale: 0%;
    --opacity: 100%;
    --saturate: 2;
    --sepia: 0;
    --invert: 10%;
}

.wrapper {
    min-width: 100vw;
    min-height: 100vh;
}

header {
    width: 100%;
    height: 5rem;
    /*background-color: #1A1D24;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

header h1 {
    font-size: 1.7rem;
    font-style: italic;
    text-align: center;
}

section {
    display: flex;
}

section .main {
    width: 60%;
    height: 100vh;
    padding-top: 1rem;
    /*background-color: #080D13;*/
}

.display-board {
    width: 100%;
    height: 30rem;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
    width: 100%;
    height: 100%;
    background-cover: contain;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*filter: brightness(var(--brightness)) contrast(var(--contrast)) blur(var(--blur)) grayscale(var(--grayscale)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia)) invert(var(--invert));*/
}

section .filters {
    width: 40%;
}

.filters {
    width: 100%;
    padding: 1rem;
    margin-top: 0.5rem;
}

#filter {
    padding: 1rem 0;
}

.search__box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.search__box input {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #e4e4e4;
    font-size: 1rem;
    color: #e4e4e4;
    outline: none;
    box-shadow: none !important;
}

.go {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 1.5rem;
    background-color: #e4e4e4;
    font-size: 1.05rem;
    animation: transform 0.2 ease-in-out;
    cursor: pointer;
    outline: none;
}

.go:hover {
    transform: scale(1.1);
}

#filter .individual__filter {
    width: 100%;
    padding: 1rem 0;
    font-size: 1.05rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-style: italic;
    display: flex;

}

label {
    width: 30%;
}

input {
    width: 70%;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background-color: #E9E9E9;
    border: 1px solid #CECECE;
    height: 15px;
    width: 15px;
    cursor: pointer;
}

a:hover{
    cursor: pointer;
}

.btn{
    transition: all 0.2s ease-in;
}
.btn:hover {
    transform: scale(1.3);
    background: linear-gradient(to right ,rgb(125, 250, 240), rgb(233, 96, 96))
}

#reset {
    width: 8rem;
    height: 2.5rem;
    font-size: 1.05rem;
    font-style: italic;
    background-color: #e4e4e4;
    cursor: pointer;
    animation: transform 0.2 ease-in-out;
}

#reset:hover {
    transform: scale(1.1);
}

#qrcode {
    max-width: 500px;
    max-height: 500px;
    margin: 10px 50px 10px 50px;
}

.vertical-row {
    display: grid;
}

.download-btn {
    margin: 1rem .5rem;
    border: 2px solid black;
    background-color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    border-color: #2196F3;
    color: dodgerblue;
}

.download-btn:hover {
    background: #2196F3;
    color: white;
}

/* DropDown */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    min-width: 250px;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content span {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content span:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}

/* Show the dropdown menu on hover */

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

/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

/* Hide all filter content */
#message, #url {
    display: none;
}

.editor-h2 {
    margin-left: 50px;
    color: #707070;
    font-size: 25px;
}

.error {
    border-color: #ff0000 !important;
}