@font-face {
    font-family: 'AlexBrush';
    src: url('../fonts/AlexBrush-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Allura';
    src: url('../fonts/Allura-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Amita';
    src: url('../fonts/Amita-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'AvenirLT';
    src: url('../fonts/AvenirLTProMedium.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'Baskerville';
    src: url('../fonts/Baskerville-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Cookie';
    src: url('../fonts/Cookie-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Didot';
    src: url('../fonts/Didot.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'FranklinGothic';
    src: url('../fonts/FranklinGothic.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Frutiger';
    src: url('../fonts/Frutiger.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'FuturaCyrillic';
    src: url('../fonts/FuturaCyrillicMedium.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'GothamRegular';
    src: url('../fonts/GothamRegular.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'GrapeNuts';
    src: url('../fonts/GrapeNuts-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Lobster';
    src: url('../fonts/Lobster.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'MinionPro';
    src: url('../fonts/MinionPro-Regular.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'NewYork';
    src: url('../fonts/NewYork.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'NewsGothicStd';
    src: url('../fonts/NewsGothicStd.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Pacifico';
    src: url('../fonts/Pacifico.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'RockSalt';
    src: url('../fonts/RockSalt.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'SerendityScript';
    src: url('../fonts/SerendityScript.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'UniversRegular';
    src: url('../fonts/UniversRegular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Garamond';
    src: url('../fonts/garamond.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Georgia';
    src: url('../fonts/georgia.ttf');
    font-weight: normal;
}


.font-avenirlt{
    font-family: 'AvenirLT';
}

.font-helvetica{
    font-family: 'Helvetica';
}

.font-alexbrush{
    font-family: 'AlexBrush';
}

.font-allura{
    font-family: 'Allura';
}

.font-amita{
    font-family: 'Amita';
}

.font-baskerville{
    font-family: 'Baskerville';
}

.font-cookie{
    font-family: 'Cookie';
}

.font-croissantone{
    font-family: 'CroissantOne';
}

.font-didot{
    font-family: 'Didot';
}

.font-franklingothic{
    font-family: 'FranklinGothic';
}

.font-frutiger{
    font-family: 'Frutiger';
}

.font-futuracyrillic{
    font-family: 'FuturaCyrillic';
}

.font-gilroy{
    font-family: 'Gilroy';
}

.font-GothamRegular{
    font-family: 'GothamRegular';
}

.font-grapenuts{
    font-family: 'GrapeNuts';
}

.font-lobster{
    font-family: 'Lobster';
}

.font-minionpro{
    font-family: 'MinionPro';
}

.font-montserrat{
    font-family: 'Montserrat';
}

.font-newyork{
    font-family: 'NewYork';
}

.font-newsgothicstd{
    font-family: 'NewsGothicStd';
}

.font-pacifico{
    font-family: 'Pacifico';
}

.font-rocksalt{
    font-family: 'rocksalt';
}

.font-serendityscript{
    font-family: 'serendityscript';
}

.font-universregular{
    font-family: 'universregular';
}

.font-garamond{
    font-family: 'Garamond';
}

.font-georgia{
    font-family: 'Georgia';
}

.editor {
    margin: 20px;
}

canvas {
    border: 1px solid #000;
}

#tshirt {
    width: 200px;
    height: 400px;
    margin: 20px auto;
    background-color: #ffffff;
    border: 2px solid #000;
    position: relative;
}

.tshirt-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #000;
}

.tshirt-container{
    position: relative;
    display: inline-block;
    /* width: 400px; */
    height: 400px;
    background-size: cover; 
    overflow: hidden;
}

.tshirtCanvasFront
.tshirtCanvasBack {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    width: 30em;
    height: 100%;
    z-index: 2;
    border: 1px solid #000;
    /* background-color: transparent; */

    /* mix-blend-mode: hue; */

}

.tshirt_image{
    position: absolute;
    z-index: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.color{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    mix-blend-mode: multiply;
}

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

.column{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.hidden {
    display: none;
}

.active {
    display: block;
}

#frontCanvas, #backCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: 1px solid #000;
}

.canvas-container{
    position: absolute !important;
}

.colors-container{
    display: flex;
    gap: .5rem;
    justify-content: normal;
    flex-wrap: wrap;
}

.color-block{
    display: flex;
    width: 2rem;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

#colorSelect, #fontPicker + .nice-select .list {
    max-height: 200px;
    overflow-y: scroll !important;
}

.zero-padding-l {
    padding-left: 0 !important;
}

.button-padding {
    padding: .375rem .75rem;
}

#imageUpload {
    width: 100%;
}

.nice-select {
    padding-left: 10px !important;
}