/*center body elements*/
html {
    hyphens: auto;
    font-family: "Comic Sans MS", "Comic Sans",'Chalkboard SE', 'Comic Neue', monospace;
    background-color: rgb(11,12,30)/*rgb(11,12,30)*/;
    color: #FF7878/*#68a0be;*/
}

h1 {
    font-size: x-large;
    text-align: center;
}

.promptclass{
    margin-top: 2.5vh;
    height:4.5vh;
}

h2 {
    font-size:large;
    margin-bottom: 0;
}

p {     
    margin-top: 0;
    margin-bottom: 1.5vh;
}

.content {
    text-align: left;
    width: min(80vh, 90vw);
    margin: 0 auto;
}

.interface {
    text-align: center;
    width: min(80vh, 90vw);
    margin: 0 auto;
}

#boxes {
    width:min(60vh, 90vw);
    height: min(60vh, 90vw);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin-bottom: 2vh;
    /*margin-bottom: 2vh;
    /*margin-top: 2vh;*/
}

#boxes img {
    width: min(15vh, 22.5vw)/*size= (boxes_width - 8xborder_width)/4*/;
    height: min(15vh, 22.5vw)/*min(27vh, 27vw)*/;
    border: min(0.25vh, 0.25vw) solid #FF7878/*FF7878*/;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

#boxes video {
    width:min(60vh, 90vw);
    height: min(60vh, 90vw);
}

#pieces {
    width: min(60vh, 90vw)/*why???size=boxes_width-3xborder_width)*/;
    height: min(13.25vh, 20.75vw)/*min(27vh, 27vw)*/;
    border-bottom: none;
    margin: 0 auto;
    margin-bottom: 1.5vh;
    display: flex;
    overflow: scroll;
    overflow-y: hidden;
    scrollbar-width: thin;
}

#pieces img {
    width: min(12.25vh, 19.75vw)/*min(27vh, 27vw)*/;
    height: min(12.25vh, 19.75vw)/*min(27vh, 27vw)*/;
    /* margin-right: min(0.25vh, 0.25vw);
    margin-left: min(0.25vh, 0.25vw); */
    border: min(0.25vh, 0.25vw) solid #FF7878/*FF7878*/;
    box-sizing: border-box;
}

/* #pieces img:last-child{
    border-right:none;
}

#pieces img:first-child{
    border-left:none;
} */

#boxes .highlighted {
    border: min(0.5vh, 0.5vw) solid #68a0be; /*#68a0be;*/
    /*box-sizing: border-box;/*border: 0.25vh solid #68a0be/*#68a0be;*/
}

#pieces .highlighted {
    border: min(0.5vh, 0.5vw) solid #68a0be; /*#68a0be;*/
    box-sizing: border-box;
    /*overflow: auto;*/
}

a:link {
    color:#FF7878/*#68a0be;*/
}

a:visited{
    color: #FF7878/* #68a0be;*/
}

a:hover{
    color: #68a0be;/*#68a0be*/;
}

input {
    background-color: rgb(11,12,30);
    color: #FF7878;/*#68a0be;*/
    padding: 5px; cursor: pointer;
    font-family: "Comic Sans MS", "Comic Sans",'Chalkboard SE', 'Comic Neue', monospace;
    border: 2px solid;
    border-radius: 1em; /* for round corners */
    margin-bottom: 2vh;
}

input:hover {
    background-color: #68a0be;
    color:rgb(65,99,117); 
}

.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
  }

/*scrollbar styling*/
.customized-scrollbar::-webkit-scrollbar {
    /*display: none; if u wanna hide it*/
    height: min(0.5vh, 0.5vw);
    background:rgb(11,12,30);
}
.customized-scrollbar::-webkit-scrollbar-thumb{
    background: #68a0be;
    /*border-radius: 8px; if you want a rounded scrollbar*/
}

footer {
    text-align: center;
}