@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --primary: #0E6973;
    --secondary: #0E7373;
    --comp1: #A60A33;
    --comp2: #F25E7A;
    --comp2off: #faf2f4;
    --comp2off1: #f2b6c3;
    --comp2off2: #f2d8dd;
    --comp3: #8C4A32;
    --off: #9cd9d9;
    --off2: #daf2f2;
    --off3: #ebf7f7;
}

* {
    margin: 0;
    padding: 0;
    z-index: 2;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    color: var(--primary);
}

input, textarea, select {
    color:var(--comp2);
}

textarea {
    resize: none;
}


.bg {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    overflow: hidden;
}

.bg::after {
    content: '';
    z-index: 1;
    position: absolute;
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    background: var(--off);
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Warstwa_1' data-name='Warstwa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101 101'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-miterlimit: 10; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='0 100 100 100 100 0'/%3E%3C/svg%3E");
    background-size: 6vw 6vw;
    transform: skewX(-10deg) skewY(5deg);
}

.mainMenu {
    filter: drop-shadow(0.1vw 0.1vw 0.44vw rgba(0, 0, 0, 0.15));
    transition: all 0.3s ease-in-out;
    position: absolute;
    width: 27vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: fit-content;
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
    z-index: 4;
}

@keyframes hideMenu {
    0% {
        width: 27vw;
        overflow: hidden;
    }
    99% {
        opacity: 0;
        width: 0vw;
        overflow: hidden;
    }
    100% {
        opacity: 0;
        width: 0vw;
        overflow: hidden;
        display: none;
        z-index: 2;
    }
}

@keyframes hideMenuBefore {
    0% {
        left: -0.88vw;
        bottom: -0.88vw;
    }
    100% {
        left: 0px;
        bottom: 0px;
    }
}

@keyframes hideMenuAfter {
    0% {
        left: -0.44vw;
        bottom: -0.44vw;
    }
    100% {
        left: 0px;
        bottom: 0px;
    }
}

.mainMenu.no-menu {
    animation-name: hideMenu;
    animation-duration: 0.3s;
    animation-delay: 0.20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mainMenu::before, .mainMenu::after, .outputEditor .toolset::before, .outputEditor .toolset::after, .exports .cont::before, .exports .cont::after {
    content: '';
    z-index: -1;
    background: var(--off2);
    box-sizing: border-box;
    border: 0.1vw var(--primary) solid;
    position: absolute;
    width: 100%;
    height: 100%;
}

.mainMenu::after, .outputEditor .toolset::after, .exports .cont::after {
    left: -0.44vw;
    bottom: -0.44vw;
}

.mainMenu::before, .outputEditor .toolset::before, .exports .cont::before {
    left: -0.88vw;
    bottom: -0.88vw;
}

.mainMenu.no-menu::before {
    animation-name: hideMenuBefore;
    animation-duration: 0.15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mainMenu.no-menu::after {
    animation-name: hideMenuAfter;
    animation-duration: 0.10s;
    animation-delay: 0.05s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mainMenu .container, .exports .cont > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    background: var(--off2);
    padding: 0.66vw;
    border: 0.1vw var(--primary) solid;
}

.mainMenu p, .mainMenu h1 {
    font-size: 0.9vw;
}

.mainMenu .optGroup.styles h1 {
    width: 100%;
    text-align: left;
}

.creationOpt {
    transition: all 0.3s ease-in-out;
    height: 0px;
    width: 24.15vw;
    overflow: hidden;
    position: relative;
}

.creationOpt.enabled {
    height: fit-content;
}

.optGroup, .optGroup2 {
    display: flex;
}

.optGroup {
    flex-direction: column;
    width: 24.15vw;
}

.optGroup {
    flex-wrap: wrap;
}

.optGroup.creation {
    width: fit-content;
}

.optGroup.styles {
    flex-direction: row;
    justify-content: space-between;
}

.optGroup.styles > div {
    display: flex;
    width: 48%;
    margin: 0.15vw 0px;
    justify-content: space-between;
    align-items: center;
}

.optGroup.styles > div p {
    font-size: 0.75vw;
}

.optGroup.styles > div > input {
    width: 5vw;
    outline: none;
    background: var(--comp2off);
    padding: 0.1vw 0.22vw;
    border-radius: 0px;
    border: 0.1vw var(--primary) solid;
    font-size: 0.75vw;
}

.optGroup select {
    background: var(--comp2off);
    padding: 0.22vw;
    border: 0.1vw var(--primary) solid;
    margin-bottom: 0.6vw;
    font-size: 0.9vw;
}

.optGroup:first-of-type {
    margin-bottom: 0.6vw;
}

.optGroup2 {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6vw;
    width: 100%;
}

.separator {
    background: var(--comp2off);
    padding: 0.22vw;
    border: 0.1vw var(--primary) solid;
}

.optGroup2 > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.optGroup2 > * {
    margin-right: 0.6vw;
}

.optGroup2 > *:last-child {
    margin-right: 0px;
}

.optGroup2 > div > input {
    width: 2.6vw;
    outline: none;
    background: var(--comp2off);
    padding: 0.22vw;
    border-radius: 0px;
    border: 0.1vw var(--primary) solid;
    font-size: 0.9vw;
}

.optGroup2 > div > *:last-child {
    margin-left: 0.6vw;
}

.optGroup2 > div > p {
    height: fit-content;
}

.mainMenu .small {
    font-size: 0.619vw;
    text-align: justify;
    margin-bottom: 1.3vw;
    color: var(--comp1);
}

.optGroup2 .separator input {
    padding: 0px;
    background: transparent;
    outline: none;
    border-radius: 0px;
    border: none;
    text-align: center;
    width: 1.3vw;
    font-size: 0.9vw;
}

button {
    background: var(--off);
    border: 0.1vw var(--primary) solid;
    color: var(--primary);
    border-radius: 0px;
    box-sizing: border-box;
    transition: all 0.15s ease-in-out;
}

button:hover {
    cursor: pointer;
    color: var(--comp2);
    background: var(--primary);
}

.generateBtn {
    font-size: 1.05vw;
    padding: 0.13vw 0.31vw;
    margin-top: 0.6vw;
}

.optGroup textarea {
    background: var(--comp2off);
    font-size: 0.75vw;
    border: 0.1vw var(--primary) solid;
    outline: none;
    margin-top: 0.6vw;
    box-sizing: border-box;
    padding: 0.66vw;
}

.outputEditor, .exports {
    position: relative;
    width: 100%;
    height: 100vh;
    left: 0px;
    top: 0px;
    z-index: 1;
    display: none;
}

.outputEditor.editing {
    z-index: 3;
    display: block;
}

.outputEditor #output {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#output ul li {
    transition: all 1s ease-in-out;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    position: relative;
    display: inline-flex;
}

#output ul li:hover {
    cursor: pointer;
}

.outputEditor .selector {
    position: absolute;
    box-sizing: border-box;
    display: none;
    border: var(--comp2) 0.1vw solid;
    filter: blur(1px);
}

.outputEditor .selector:hover {
    cursor: pointer;
}

.outputEditor .selector.selector-visible {
    display: unset;
}

.outputEditor.tools-visible #selector {
    display: none !important;
}

.outputEditor {
    --clipCord0_x: 0%;
    --clipCord0_y: 0%;
    --clipCord1_x: 0%;
    --clipCord1_y: 0%;
    --clipCord2_x: 0%;
    --clipCord2_y: 0%;
    --clipCord3_x: 0%;
    --clipCord3_y: 0%;
}

#hardSelector {
    z-index: 9;
    display: none;
}

.outputEditor.tools-visible #hardSelector {
    display: unset;
}

.outputEditor.tools-visible::after {
    z-index: 8;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    background: var(--comp3);
    opacity: 0.3;
    clip-path: polygon(0% 0%, 0% 100%, var(--clipCord3_x) 100%, var(--clipCord0_x) var(--clipCord0_y), var(--clipCord1_x) var(--clipCord1_y), var(--clipCord2_x) var(--clipCord2_y), var(--clipCord3_x) var(--clipCord3_y), var(--clipCord3_x) 100%, 100% 100%, 100% 0%);
}

.outputEditor .toolset {
    width: 11vw;
    filter: drop-shadow(0.1vw 0.1vw 0.44vw rgba(0, 0, 0, 0.15));
    position: absolute;
    z-index: 10;
    display: none;
}

.outputEditor.tools-visible .toolset {
    display: unset;
}

.outputEditor .toolset .toolsCont {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.44vw;
    border: 0.1vw var(--primary) solid;
    background: var(--off2);
}

.outputEditor .toolset .toolsCont div {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.1vw 0;
    width: calc(11vw - 0.88vw);
    justify-content: space-between;
}

.outputEditor .toolset .toolsCont div.tool-disabled {
    filter: saturate(30%);
    opacity: 0.4;
}

.outputEditor .toolset .toolsCont div.tool-disabled::after {
    position: absolute;
    content: '';
    left: 0px;
    z-index: 2;
    top: 0px;
    width: 100%;
    height: 100%;
}

.outputEditor .toolset .toolsCont div p {
    font-size: 0.55vw;
    z-index: 1;
}

.outputEditor .toolset .toolsCont div input {
    width: 3vw;
    outline: none;
    background: var(--comp2off);
    padding: 0.1vw 0.22vw;
    border-radius: 0px;
    border: 0.1vw var(--primary) solid;
    font-size: 0.55vw;
    z-index: 1;
}

.outputEditor .toolset .toolsCont div:last-of-type {
    padding-top: 0.5vw;
    justify-content: center;
}

.outputEditor .toolset .toolsCont div button {
    padding: 0.1vw 0.31vw;
    font-weight: 600;
}

.mainTools {
    filter: drop-shadow(0.1vw 0.1vw 0.44vw rgba(0, 0, 0, 0.15));
    position: absolute;
    width: 96vw;
    height: 3vw;
    left: 2vw;
    top: 1vw;
    z-index: 7;
    display: none;
}

.outputEditor.editing .mainTools {
    display: unset;
}
.mainTools::before, .mainTools::after {
    content: '';
    z-index: -1;
    background: var(--comp2off2);
    box-sizing: border-box;
    border: 0.1vw var(--comp2) solid;
    position: absolute;
    width: 100%;
    height: 100%;
}

.mainTools::after {
    left: -0.44vw;
    bottom: -0.44vw;
}

.mainTools::before {
    left: -0.88vw;
    bottom: -0.88vw;
}
.mainTools .mainToolsCont {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 1vw;
    background: var(--comp2off2);
    box-sizing: border-box;
    border: 0.1vw var(--comp2) solid;
}

.mainTools .mainToolsCont button {
    background: var(--comp2off1);
    border: 0.1vw var(--comp2) solid;
    color: var(--comp2);
    font-size: 0.9vw;
    padding: 0.13vw 0.31vw;
}

.mainTools .mainToolsCont button:hover {
    color: var(--off);
    background: var(--comp2);
}

.mainToolsCont div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainToolsCont > div > div {
    margin: 0 1vw;
}
.mainToolsCont > div > div:first-of-type {
    margin-left: 0vw;
}

.mainToolsCont > div > div p {
    font-size: 0.9vw;
    color: var(--comp2);
    margin-right: 0.5vw;
}

.mainToolsCont > div > div select {
    background: var(--off3);
    border-radius: 0px;
    border: 0.1vw var(--comp2) solid;
    color: var(--comp2);
    font-size: 0.9vw;
    padding: 0.13vw 0.31vw;
}

.exports.exportedTable {
    z-index: 3;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.exports .cont {
    position: relative;
    width: 32vw;
    filter: drop-shadow(0.1vw 0.1vw 0.44vw rgba(0, 0, 0, 0.15));
    height: 60vh;
}
.exports .cont > div {
    height: 100%;
    align-items: flex-start;
    justify-content: space-between;
}
.exports .cont > div p {
    height: 3vh;
}
.exports .cont > div > div {
    height: 57vh;
    overflow: scroll;
    width: calc(32vw - 30px);
    background: var(--comp2off);
    box-sizing: border-box;
    padding: 0.66vw;
    border: 0.1vw var(--primary) solid;
}

.exports .cont > div > div ul {
    padding-left: 0.66vw;
    margin-bottom: 0.66vw;
}
.exports .cont > div > div ul, .exports .cont > div > div ul li {
    font-family: serif;
    font-weight: 400;
    color: #000;
}
.exports .cont > div > div ul:last-of-type {
    margin-bottom: 0px;
}
.exports .cont > div > #exportedCss {
    white-space:pre;
    color: var(--comp2);
}

.exports .cont > div > #exportedCss u {
    text-decoration: none;
    color: var(--primary);
}