* {
    box-sizing: border-box;
    font-family: 'Verdana';
    line-height: 1.5;
}

.grid_1{
    display: grid;
    grid-template-columns: 75dvw 25dvw;
}
.grid_2{
    display: grid;
    grid-template-columns: 1fr 1fr ;
}



.test_container {
    display: grid;
    gap: 10dvh;
    
}

.container_h {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    

}
.main_container {
    display: grid;
    grid-template-columns: 4fr 1fr;
}


.container_v {
    display: grid;
    grid-template-rows: repeat(3,fr);
    grid-template-columns: repeat(2,auto);
    width: 25dvw;
    text-align: center;
    row-gap: 0;
}

.container_t {
    display: flex;
    flex-direction: column;
    width: 70dvw;
    text-align: center;
    
    
}

.container_converter {
    width: 25dvw;
}

#message_holder{
    width: 100dvw;
    
}
#mh{
    width:100dvw;
    text-align: center;
}
.container_top {
    width: 100 dvw;   
    display: flex;
    flex-direction: row;
    justify-content: right;
    text-align: center;
}

.cp {
    width: 8rem;
    height: 4rem;
    margin: 2dvh 0.5dvw;

}

.bt1 {
    width: 100%;
}

.bt2 {
  
   width: 9%;
}

.bt3 {
    width: 128px;
}

input {
    width: 100px;
    text-align: center;
    font-family: 'Verdana';
}

.wid input {
    
    width: 32%;
    text-align: center;
    font-family: 'Verdana';
}
.save_button{
    width: 146px;
}

label {
    display: inline-block;
    width: 40px;
    text-align: left;
    font-family: 'Verdana';
}

h1 {
        color: blueviolet;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 30px;
        }

.container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0.25dvw;
            }

#swatch {
    width: 100dvw;
    height: 100dvh;
}


.holder {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  
}

.edit_width {
    width:15dvw;
    font-size: 1.5rem;
    margin: 1dvh 0;
    
}
#db {
    color: red;
    font-size: 1.5rem;
    
}
#sb {
    
    border: none;
    background-color: oklch(1 0 0);
    font-size: 1.5rem;

}

.edit_width input {
    width: 10dvw;
    font-size: 1.1rem;
  
   
}
.edit_width label {
    width: 4.3dvw;
}
.patch {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 30dvh;
    font-size: large;
    text-align: center;
}

a {
    text-decoration: none;
}

.sort {
    display: flex;
    flex-direction: row;
    justify-content:left;
    width: 100dvw;
    
}

.sort2 {
    display: flex;
    flex-direction: row;
    justify-content:center;
    width: 100dvw;
    
}
.sort a {
    margin: 2dvh 2dvw;
    font-size: x-large;
}
.sort2 a {
    margin: 2dvh 2dvw;
    font-size: x-large;
}
.data {
   display: none;
}
h2 {
    text-align: center;
    font-size: xx-large;
}

#back1 {
    height: 150dvh;
    margin-bottom: 2dvh;
}

#back2 {
    height: 150dvh;
    margin-bottom: 2dvh;
}
#back3{
    height: 150dvh;
    margin-bottom: 2dvh;
    background-color: oklch(1 0 0);
}

#back4{
    height: 150dvh;
    margin-bottom: 2dvh;
    background-color: oklch(0 0 0);
}
.wid {
    width: 25dvw;
  
}

#r, #r_1, #r_2, #r_3 {
    background-color: red;
    color: white;
}

#g, #g_1 , #g_2, #g_3{
    background-color: green;
    color: white;

}

#b,  #b_1, #b_2, #b_3{
    background-color: blue;
    color: white;
}

.black {
    color: oklch(0 0 0);
}

.white {
    color: oklch(1 0 0);
}


.cb {
    margin: 0.5rem;
    width: 8rem;

}

.p0 {
    color: oklch(1 0 0);
}

.p1 {
    color: oklch(0 0 0);
}

#contrast{
    text-align: center;
    font-size: large;
    width: 25dvw;
    
}