body {
  font-family: 'Nunito', sans-serif;
  min-width: 400px;
  min-height: 95vh;
}

h1, .highlight {
  font-family: 'Nunito', sans-serif;
  font-size: 30pt;
  font-weight: 700; /* 700 = bold */
}
h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 12pt;
  font-weight: 400;
}

.content{
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    min-width: 400px;
}

.head-wrapper {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 14px;
    align-items: center;
    background-image: linear-gradient(to right top, #9292bb, #9e88b4, #aa7ea8, #b47498, #bb6b83, #c26e76, #c57369, #c47a5d, #c58c5c, #c29e60, #bcb06b, #b3c27c);
    /* or try radial-gradient() for a circular effect */
    color: white;        /* adjust text color for contrast */
    padding: 0.5rem;
    margin: 0rem 0.5rem;
    
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

.banner-images {
    margin-left: auto; 
    display: flex;
    flex-direction: row;
}
.banner-item {
    height: 123px;
    margin-right: 0.5rem;
    border-radius: 5px;
    padding: 5px 5px 5px 5px;
    background-color: white;
}


.banner-item img {
    margin: 0;
    image-rendering: pixelated;
}

.input {
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    min-height: 2rem;
    border-radius: 14px;
    padding: 0.5rem;
    /*border-style: dashed;*/
    border-color: #ccc;
    margin: 0.5rem;
    align-content: center;
}

#btn {
    margin-right: 0.5rem;
}

.settings {
    padding: 0.5rem;
    margin: 0.5rem;
}

#textInput {
    width: min(40rem,100%);
    height: 1.2rem;
    
}
.canvas-wrapper{
    margin: auto;
    position: relative;
    width: 369px;
    height: 369px;
}
#canvas, #mask_canvas, #draw_canvas {
    width:369px; 
    height:369px; 
    image-rendering: pixelated;
    position: absolute;
    top: 0;
    left: 0;
}

.output-wrapper{
    margin: auto;
    position: relative;
    width: 369px;
    height: 369px;
}

#canvas2 {
    width:369px; 
    height:369px; 
    image-rendering: pixelated;
}

.container {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 14px;
    border-style: solid;
    border-color: #ccc;
    display: flex;        /* puts children side by side */
    gap: 0.5rem;            /* space between them */
    margin: 0.5rem;
    justify-content: center; 
}

.box {
  flex: 1;              /* each takes equal width */
  padding: 0.5rem;
}

#del_button {
    color: #eee;
    background-color: #f30;
    padding: 3px 10px;
}


#footer-container {
    background-image: linear-gradient(to right top, #9292bb, #9e88b4, #aa7ea8, #b47498, #bb6b83, #c26e76, #c57369, #c47a5d, #c58c5c, #c29e60, #bcb06b, #b3c27c);
    color: white;
    display: flex;
    flex-flow: row wrap;
    padding: 30px 30px 20px 30px;
    
    border-radius: 14px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding: 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#footer-container a {
  text-decoration: none;
}

#footer-container ul {
  list-style: none;
  padding-left: 0.5rem;
}


.footer__nav {
    color: #ddd;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 16px;
    display: flex;
    flex-flow: row wrap;
}

.footer__nav > * {
  margin-right: 1.25em;
}

.footer__nav a {
    color: #ddd;
}

.legal {
  margin-top: 16px;
  margin-left: auto; 
  margin-right: 0.5rem;
  display: flex;
  flex-direction: column;
}

.legal__links {
  display: flex;
  align-items: center;
}

/* ON MOBILE:  When screen is smaller than limit px, stack vertically */
@media (max-width: 800px) {
  .container {
    flex-direction: column;
  }
}