html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: rgb(94, 94, 94);
    font-family: Avantgarde, Verdana, Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#image-space {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    margin: auto;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
}

#image {
    background-color: rgb(128,128, 128);
    height: 50vh;
    width: 50vh;
    overflow: clip;
    clip-path: margin-box;
    position: relative;
}

#save-image {
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
}

.layer {
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: contain;
}

#transforms-space {
    position: absolute;
    bottom: 52vh;
    right: 2vh;
    height: 48vh;
    display: flex;
    gap: 2vh;
    flex-direction: column;
    justify-content: flex-end;
}

#actions-space {
    position: absolute;
    bottom: 52vh;
    left: 2vh;
    height: 48vh;
    display: flex;
    gap: 2vh;
    flex-direction: column;
    justify-content: flex-end;
}

.float-button {
    height: 6vh;
    width: 6vh;
    border: 0px;
    border-radius: 1vh;
    background-color: rgb(233, 50, 56);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    cursor: pointer;
}

.float-button:hover {
    background-color: rgb(255, 89, 95);
}

.float-button:active {
    background-color: rgb(230, 2, 9);
}

#vertical-button {
    background-image: url(icons/vertical.svg);
}

#horizontal-button {
    background-image: url(icons/horizontal.svg);
}

#scale-button {
    background-image: url(icons/grow.svg);
}

#rotation-button {
    background-image: url(icons/rotate_right.svg);
}

#download-button {
    background-image: url(icons/download.svg);
}

#randomize-button {
    background-image: url(icons/random.svg);
}

#reset-button {
    background-image: url(icons/delete.svg);
}

#option-space {
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
}

#color-select {
    background-color: rgb(208, 208, 208);
    width: 100%;
    height: 9vh;
}

.color-tab {
    width: auto;
    height: 9vh;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    white-space: nowrap;
    padding-left: 1vh;
}

.color-tab:hover{
    overflow-x: auto
}

@media(pointer: coarse) {
    .color-tab {
        overflow-x: auto;
    }
}

.color {
    width: 7vh;
    height: 7vh;
    border: 0.5vh solid rgb(255, 255, 255);
    border-radius: 1.5vh;
    margin-top: 1vh;
    margin-right: 1vh;
    display: flex;
    cursor: pointer;
    overflow: clip;
    color: transparent;
    padding-block: 0;
    padding-inline: 0;
    flex-shrink: 0;
}

.color:hover {
    border-color: #ececec;
}

.color-selected {
    border: 1vh solid rgb(255, 255, 255);
}

#tab-select {
    background-color: rgb(239, 239, 239);
    width: 100%;
    height: 10vh;
}

#tabs {
    width: auto;
    height: 10vh;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    white-space: nowrap;
    padding-left: 0.5vh;
}

#tabs:hover {
    overflow-x: auto;
}

@media(pointer: coarse) {
    .tabs {
        overflow-x: auto;
    }
}

.tab {
    width: 10.2vh;
    height: 8.5vh;
    border-width: 0;
    border-radius: 0.5vh;
    margin-top: 0.5vh;
    margin-right: 0.5vh;
    display: flex;
    cursor: pointer;
    overflow: clip;
    color: transparent;
    padding-block: 0;
    padding-inline: 0;
    flex-shrink: 0;
    background-size: 73.53%;
    background-repeat: no-repeat;
    background-position: center;
}

.tab:hover {
    background-color: rgb(247, 247, 247);
}

.tab-selected {
    background-color: rgb(255, 255, 255);
    border: 0.5vh solid rgb(233, 50, 56);
    background-size: 83.33%;
}

.tab-selected:hover {
    background-color: rgb(255, 255, 255);
    border: 0.5vh solid rgb(255, 89, 95);
}


#option-select {
    background-color: rgb(221, 221, 221);
    width: 100%;
    height: 31vh;
    overflow-y: hidden;
    overflow-x: hidden;
}

@media(pointer: coarse) {
    #option-select {
        overflow-y: auto;
    }
}
    
#option-select:hover {
    overflow-y: auto;
}

.option-tab {
    width: calc(100vw - 2vh);
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12vh, 1fr));
    gap: 0.75vh;
    margin: 0.75vh 0.5vh 0.75vh 0.75vh;
}

.option {
    width: auto;
    height: 12vh;
    border-width: 0;
    border-radius: 0.5vh;
    display: flex;
    cursor: pointer;
    overflow: clip;
    color: transparent;
    background-color: rgb(255, 255, 255);
    padding-block: 0;
    padding-inline: 0;
    background-size: auto 85%;
    background-repeat: no-repeat;
    background-position: center;
}

.option:hover {
    background-color: rgb(247, 247, 247);
}

.option-selected {
    border: 0.75vh solid rgb(233, 50, 56);
    background-size: auto 97.1428%;
}

.option-selected:hover {
    border: 0.75vh solid rgb(230, 2, 9);
}

#modal-large {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    -webkit-user-select: none;
}

#modal-small {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
}

.blocker {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.dialog {
    background-color: rgb(255, 255, 255);
    border: 1vh solid rgb(199, 199, 199);
    border-radius: 1.5vh;
    z-index: 4;
    text-align: center;
    font-size: 2vh;
}

.dialog p {
    margin-top: 0.5vh;
    margin-bottom: 4vh;
}

.dialog img {
    height: 10vh;
}

.dialog-large {
    width: 60vw;
    padding: 3vh 5vw 3vh 5vw;
    height: fit-content;
    margin: auto;
}

.dialog-button {
    border-width: 0;
    border-radius: 1vh;
    font-size: 2vh;
    padding: 1vh 3vh 1vh 3vh;
    display: block;
    margin: 1vh auto;
    cursor: pointer;
}

.accept-button {
    background-color: rgb(233, 50, 56);
    font-weight: 800;
    color: rgb(255, 255, 255);
}

.accept-button:hover {
    background-color: rgb(255, 89, 95);
}

.accept-button:active {
    background-color: rgb(230, 2, 9);
}

.back-button {
    background-color: rgb(199, 199, 199);
    font-weight: 500;
    color: rgb(0, 0, 0);
}

.back-button:hover {
    background-color: rgb(219, 219, 219);
}

.back-button:active {
    background-color:rgb(173, 173, 173);
}

.dialog-small {
    padding: 0.75vh 2vh 0.75vh 2vh;
    height: fit-content;
    margin: 2vh 5vw 0 5vw;
    gap: 2vh;
    display: flex;
}

.slider-container {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    width: 4vh;
    height: 6vh;
}

.transform-button {
    height: 6vh;
    width: 6vh;
    border: 0px;
    border-radius: 1vh;
    background-color: rgb(233, 50, 56);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.transform-button:hover {
    background-color: rgb(255, 89, 95);
}

.transform-button:active {
    background-color: rgb(230, 2, 9);
}

.transform-back {
    background-image: url(icons/close.svg);
    background-color: rgb(199, 199, 199);
}

.transform-back:hover {
    background-color: rgb(219, 219, 219);
}

.transform-back:active {
    background-color: rgb(173, 173, 173);
}

.inactive {
    background-color: rgb(199, 199, 199);
    cursor: default;
}

.inactive:hover {
    background-color: rgb(199, 199, 199);
}

.inactive:active {
    background-color: rgb(199, 199, 199);
}

.marker-container {
    position: absolute;
    width: calc(100% - 3vh);
    height: 100%;
    z-index: -1;
}

.marker {
    position: relative;
    left: 50%;
    margin-top: 0.5vh;
    width: 3vh;
    height: 5vh;
    border-radius: 0.75vh;
    background-color: rgb(199, 199, 199);
}

input[type="range"] {
    background-color: transparent;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    margin: 0;
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2vh;
    background-color:rgb(199, 199, 199);
    border-radius: 0.75vh;
}

input[type="range"]::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    height: 5vh;
    width: 3vh;
    border-radius: 0.75vh;
    background-color: rgb(233, 50, 56);
    cursor: pointer;
    margin-top: -1.5vh;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: rgb(255, 89, 95);
}

input[type="range"]::-webkit-slider-thumb:active {
    background-color: rgb(230, 2, 9);
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2vh;
    background-color:rgb(199, 199, 199);
    border-radius: 0.75vh;
}

input[type="range"]::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    height: 5vh;
    width: 3vh;
    border-radius: 0.75vh;
    background-color: rgb(233, 50, 56);
    cursor: pointer;
    margin-top: -1.5vh;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: rgb(255, 89, 95);
}

input[type="range"]::-webkit-slider-thumb:active {
    background-color: rgb(230, 2, 9);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2vh;
    background-color:rgb(199, 199, 199);
    border-radius: 0.75vh;
}

input[type="range"]::-moz-range-thumb {
    position: relative;
    height: 5vh;
    width: 3vh;
    border-radius: 0.75vh;
    background-color: rgb(233, 50, 56);
    cursor: pointer;
    margin-top: -1.5vh;
    outline: none;
    border-width: 0;
}

input[type="range"]::-moz-range-thumb:hover {
    background-color: rgb(255, 89, 95);
}

input[type="range"]::-moz-range-thumb:active {
    background-color: rgb(230, 2, 9);
}

::-webkit-scrollbar{
	width: 1vh;
    height: 1vh;
}

::-webkit-scrollbar-thumb{
	background-color: #929292;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover{
	background-color: #828282;
}

@media (min-aspect-ratio: 1) {
    body {
        flex-direction: row;
    }

    #image-space {
        flex-direction: column;
    }

    #image {
        width: 50vw;
        height: 50vw;
    }

    #transforms-space {
        bottom: unset;
        height: unset;
        top: 2vw;
        right: 52vw;
        width: 48vw;
        flex-direction: row;
    }
    
    #actions-space {
        left: unset;
        height: unset;
        bottom: 2vw;
        right: 52vw;
        width: 48vw;
        flex-direction: row;
    }

    .float-button {
        height: 6vw;
        width: 6vw;
        border-radius: 1vh;
    }

    #color-select {
        height: calc(4.5vh + 4.5vw);
        width: 50vw;
    }

    .color-tab {
        height: calc(4.5vh + 4.5vw);
        padding-left: calc(0.5vh + 0.5vw);
    }

    .color {
        width: calc(3.5vh + 3.5vw);
        height: calc(3.5vh + 3.5vw);
        border-width: calc(0.25vh + 0.25vw);
        border-radius: calc(0.75vh + 0.75vw);;
        margin-top: calc(0.5vh + 0.5vw);
        margin-right: calc(0.5vh + 0.5vw);
    }

    .color-selected {
        border-width: calc(0.5vh + 0.5vw);
    }

    #tab-select {
        width: 50vw;
        height: calc(5vh + 5vw);
    }
    
    #tabs {
        height: calc(5vh + 5vw);
        padding-left: calc(0.25vh + 0.25vw);
    }
    
    .tab {
        width: calc(5.1vh + 5.1vw);
        height: calc(4.25vh + 4.25vw);
        border-radius: calc(0.25vh + 0.25vw);
        margin-top: calc(0.25vh + 0.25vw);
        margin-right: calc(0.25vh + 0.25vw);
    }
    
    .tab-selected {
        border-width: calc(0.25vh + 0.25vw);
    }
    
    .tab-selected:hover {
        border-width: (0.25vh + 0.25vw);
    }

    #option-select {
        width: 50vw;
        height: calc(99.5vh - 10.5vw)
    }
    
    .option-tab {
        width: calc(49vw - 1vh);
        gap: calc(0.375vh + 0.375vw);
        margin: calc(0.375vh + 0.375vw);
        margin-right: calc(0.25vh + 0.25vw);
        grid-template-columns: repeat(auto-fill, minmax(calc(6vh + 6vw), 1fr));
    }
    
    .option {
        height: calc(6vh + 6vw);
        border-radius: calc(0.25vh + 0.25vw);
    }
    
    .option-selected {
        border-width: calc(0.375vh + 0.375vw); 
    }
    
    .option-selected:hover {
        border-width: calc(0.375vh + 0.375vw); 
    }

    .dialog {
        border-width: calc(0.5vh + 0.5vw);
        border-radius: calc(1vh + 1vw);
        font-size:  calc(1vh + 1vw)
    }

    .dialog p {
        margin-top: calc(0.25vh + 0.25vw);
        margin-bottom: calc(2vh + 2vw);
    }

    .dialog img {
        height: calc(5vw + 5vw);
    }

    .dialog-button {
        border-radius: calc(0.5vh + 0.5vw);
        font-size: calc(1vh + 1vw);
        padding-top: calc(0.5vh + 0.5vw);
        padding-bottom: calc(0.5vh + 0.5vw);
        padding-left: calc(1.5vh + 1.5vw);
        padding-right: calc(1.5vh + 1.5vw);
        margin: calc(0.5vh + 0.5vw) auto;
    }

    #modal-small {
        top: 0%;
        left: 50%;
        width: 50%;
        height: 100%;
    }

    .dialog-small {
        padding-top: calc(0.375vh + 0.375vw); 
        padding-bottom: calc(0.375vh + 0.375vw); 
        padding-left: calc(1vh + 1vw);
        padding-right: calc(1vh + 1vw);
        margin: 2vh 3vw 0 3vw;
    }
    
    .transform-button {
        height: calc(3vh + 3vw);
        width: calc(3vh + 3vw);
        border-radius: calc(0.5vh + 0.5vw);
    }

    .slider-container {
        width: calc(2vh + 2vw);
        height: calc(3vh + 3vw);
    }

    
    .marker-container {
        width: calc(100% - 1.5vh - 1.5vw);
    }

    .marker {
        margin-top: calc(0.25vh + 0.25vw);
        width: calc(1.5vh + 1.5vw);
        height: calc(2.5vh + 2.5vw);
        border-radius: calc(0.375vh + 0.375vw);
    }
    
    input[type="range"]::-webkit-slider-runnable-track {
        height: calc(1vh + 1vw);
        border-radius: calc(0.375vh + 0.375vw);
    }
    
    input[type="range"]::-webkit-slider-thumb {
        height: calc(2.5vh + 2.5vw);
        width: calc(1.5vh + 1.5vw);
        border-radius: calc(0.375vh + 0.375vw);
        margin-top: calc(-0.75vh - 0.75vw);
    }

    input[type="range"]::-moz-range-track {
        height: calc(1vh + 1vw);
        border-radius: calc(0.375vh + 0.375vw);
    }
    
    input[type="range"]::-moz-range-thumb {
        height: calc(2.5vh + 2.5vw);
        width: calc(1.5vh + 1.5vw);
        border-radius: calc(0.375vh + 0.375vw);
        margin-top: calc(-0.75vh - 0.75vw);
    }

    ::-webkit-scrollbar{
        width: calc(0.5vh + 0.5vw);
        height: calc(0.5vh + 0.5vw);
    }
}