/*

        :root {
        --background:#3B1E54;
        --foreground:#EEEEEE ;

        --primary:#D4BEE4;
        --on-primary:#D4BEE4;

        --secondary:#9B7EBD;
        --container:#9B7EBD;

        }

        */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-tertiary: #17a2b8;

  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-inverted: #ffffff;

  --color-background: #ffffff;
  --color-background-secondary: #f8f9fa;
  --color-surface: #e9ecef;

  --color-border: #dee2e6;
  --color-border-muted: #ced4da;

  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;

  --color-link: #007bff;
  --color-link-hover: #0056b3;
  --color-button-primary: #007bff;
  --color-button-primary-hover: #0056b3;
  --color-button-secondary: #6c757d;
  --color-button-secondary-hover: #5a6268;


}

:root {

  --color-primary: #7e57c2; /* Deep Purple */
  --color-secondary: #4a148c; /* Dark Purple */
  --color-tertiary: #311b92; /* Even Darker Purple */

  --color-text-primary: #e0e0e0; /* Light Gray */
  --color-text-secondary: #bdbdbd; /* Muted Gray */
  --color-text-inverted: #000000; /* Black */

  --color-background: #1a1a1a; /* Dark Gray */
  --color-background-secondary: #2c2c2c; /* Slightly Lighter Dark Gray */
  --color-surface: #3a3a3a; /* Medium Dark Gray */

  --color-border: #5e35b1; /* Purple Border */
  --color-border-muted: #6a1b9a; /* Muted Purple */

  --color-success: #43a047; /* Green */
  --color-warning: #ffb300; /* Amber */
  --color-error: #e53935; /* Red */
  --color-info: #29b6f6; /* Light Blue */

  --color-link: #7e57c2; /* Purple */
  --color-link-hover: #b39ddb; /* Lighter Purple */
  --color-button-primary: #6a1b9a; /* Deep Purple */
  --color-button-primary-hover: #8e24aa; /* Brighter Purple */
  --color-button-secondary: #311b92; /* Darker Purple */
  --color-button-secondary-hover: #4527a0; /* Slightly Brighter Dark Purple */

}

:root{
  --padding: 1em;
  --border: 2px;
  --margin: 2em;
  --radius: 2em;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: Roboto;
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

img {
	width: 100%;
}


.title {
    text-align: center;
    font-size:2rem;
}

.container {
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    margin-top:var(--margin);
    margin-bottom:var(--margin);
}

#controls {

    display: flex;
    flex-wrap: wrap;

    /*align-items: stretch;*/


    /*display: grid;*/
    /*grid-template-rows: 30vw;*/
    /*grid-template-columns: repeat(auto-fit,minmax(300px,1fr));*/
    /*justify-content: space-around;*/
    /*grid-gap: var(--padding)*/

}


#drop_zone {
    position: relative;
    border: 1px solid;
    height: 30vw;

    flex: 2;

    /*width: 100%;*/
    /*height: 100%;*/
    min-width:300px;
    padding: var(--padding);
    margin: auto;

    /*grid-column: 1/span 2;*/
    /*grid-row: 1/span 2;*/

    border-color: var(--color-border);
    border-radius:  var(--radius);

    background: var(--color-background-secondary);
}

#drop_zone>div{
    position: absolute;
    inset: var(--padding);

    border: 1px solid;
    padding: var(--padding);
    border: var(--color-border) dashed;
    border-radius: calc(var(--radius) - var(--padding));

    display: flex;
    justify-content: center;
    align-items: center;
    

}
#drop_zone.dragover {
    background-color: var(--color-surface);
}


.drop_zone_text {
    font-size: 2em;
    color: #6c757d;
    text-align: center;
}



#preview_area {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    grid-gap: var(--padding)
}


#preview_area canvas {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

#convert {
   width: 100%;
   /*justify-self: stretch;*/
   /*align-self: center;*/
   /*width: 90%;*/
   /*margin: 0 var(--margin) ;*/
}

.button {
    background-color: var(--color-button-primary);
    color: var(--color-text-primary);
    font-size: 1rem;
    border-radius: var(--radius);
    height: calc(var(--padding)*2);

}

.button:hover {
    background-color: var(--color-button-primary-hover)
}

#controls_side {
    flex: 1;
    min-width:300px;
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    /*margin: 0 var(--margin);*/
    justify-content: space-around;
}

#discription {
    text-align:center;
    /*text-align:justify;*/
    font-size: 1.5rem;
    margin: 1rem;
    margin-bottom: 1.5rem;
}


.box {
    position: absolute;
    border: 2px solid rgba(255, 0, 0, 0);
    pointer-events: none;
    animation: fadeInBox 1s forwards;
}

.preview-container {
    position: relative;
    display: inline-block;
    margin: 10px;
    border: 1px solid #ddd;
}
.preview-container img {
    display: block;
}