html{
    height:100%;

}

body{
    box-sizing: border-box;

    height:100%;
    background:#1d062c;
    display:flex;
    align-items: center;
    justify-content: center;
    margin:0;
    padding:0;
    color:white;
    font-family: sans-serif;



}

#mainthing{
    background: #1F2937;
    display:flex;
    flex-direction: column;
    padding:1.25em 1em 1.25em 1em;

    width:32%;
    height:65%;
    min-height:60%;
    border-radius:7px;
}
#huh{
    overflow:hidden;
    width:100%;
    z-index: 1;
    height:13%;
    align-items: flex-start;
    justify-content: center;
}

  /*God bless the guy on Stackoverflow who showed me
 how get a good-looking colour input field*/
input[type=color]{

    width: 65px;
    min-width: 65px;
    height: 7vh;
    border:none;
    background: none;

}
input[type="color"]::-webkit-color-swatch {
    border: 0.1em solid white; 

}

input[type="color"]:hover {
    cursor: pointer;
}




select{
    font-size:1.09em;
    background: #1F2937;
    border-color: #cacaca;
    color:white;
    height:6vh;
    width:50%;
    border-radius:2px;


}



#thisform{
    display:flex;
    align-items: center;
    justify-content: center;

}

.form-item-not-first{
    margin-left:2%;
}

input[type="button"]{
    height:6vh;
    font-size:1.05em;
    border-radius:2.5px;
    border-color:transparent;
    color:white;
    background: #3D4B60;


}
input[type="button"]:hover{
    cursor:pointer;
}




#sometext{
    height:4%;
    font-size:0.9em;
    color:rgb(219, 219, 219);
    padding-bottom:4px;
    opacity: 85%;
}
#heh{
    overflow: hidden;
    height:85%;
    display:flex;
    z-index: 0;

}
#hah{
    height:3%;
    overflow:hidden;
    display: flex;


}

.colors{
    overflow:hidden;
    width:20%;
}
.colors:hover{
    cursor:pointer;
}




.hex{
    text-align: center;
    font-size:0.6em;
    padding:3px;
    width:20%;
    opacity: 85%;

}
.hex:hover{
    cursor:pointer;
}



@media(max-width:900px){

    body{
        overflow:hidden;
    }
    #mainthing{
        width: 95%;
        height:95%;
    }


    input[type="button"]{
      min-height:100%;  
      font-size: 0.7em;
    }

    select{
        min-height:100%;  
        font-size:1.1em;

        }
    input[type=color]{
        min-height:100%;  

    }

    #huh{
        height:10%;
    }
}