body 
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
* 
{
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input[type="range"]
{
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
    width: auto;
}
input[type="range"]::-webkit-slider-thumb 
{
    -webkit-appearance: none; 
    appearance: none;
}
input[type="range"]::-moz-range-thumb 
{
    border: none; 
    border-radius: 0; 
}

/* Layout */
.container
{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background: url('../img/floor.jpg') no-repeat;
    background-size: cover;
}
.grid
{
    width: 600px;
    height: 600px;
    display: flex;
    flex-flow: column nowrap;
}
.grid:hover
{
    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
}
.grid .row
{
    width: 100%;
    max-height: 100%;
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
}
.grid .col
{
    width: 1rem;
    height: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    background-color: #E3F2FD;
}
.grid .pen
{
    background-color: #64B5F6;
}
.group-buttons
{
    display: flex;
    flex-flow: column;
}
.set-size
{
    margin-bottom: 1rem;
}

/* Typography */
.page-title
{
    text-align: center;
    font-size: 4rem;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    position: fixed;
    width: 100%;
    top: 2rem;
    color: #E3F2FD;
    font-weight: 900;
}

/* Components */
.btn
{
    margin-bottom: 2rem;
    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
    border-radius: 0.5rem;
    border-style: none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    height: 4rem;
    padding: 0 2.6rem;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
    transition: all .5s;
}
.btn:hover
{
  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
  transition-duration: .1s;
}
.btn[disabled]
{
    cursor: no-drop;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.7);
}
.active
{
    background-image: linear-gradient(92.88deg, #FFFFFF 9.16%, white 43.89%);
    color: #5643CC;
    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
    font-weight: bold;
}
.size-grid
{
    margin-bottom: 0.5rem;
}
.label-size-grid
{
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
}
.input-size
{
    font-size: 2rem;
    font-weight: bolder;
    text-align: center;
    width: 6rem;
    padding: 0.5rem 0;
}
.label-size
{
    font-size: 2rem;
    margin-right: 1rem;
    font-weight: bolder;
}
.pen-color 
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0 auto 2rem;
    display: block;
    width: 5rem;
    height: 5rem;
    border: none;
    cursor: pointer;
}
.pen-color::-webkit-color-swatch 
{
    border-radius: 50%;
}
.pen-color::-moz-color-swatch 
{
    border-radius: 50%;
}
.size-grid::-webkit-slider-runnable-track 
{
    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
    margin: 1rem 1rem 0.6rem;
    height: 0.5rem;
    border-radius: 0.5rem;
}
.size-grid::-moz-range-track 
{
    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
    margin: 1rem 1rem 0.6rem;
    height: 0.5rem;
    border-radius: 0.5rem;
}
.size-grid::-webkit-slider-thumb 
{
    background-color: white;
    height: 2rem;
    width: 0.75rem;
    margin-top: -12px;    
 }
.size-grid::-moz-range-thumb 
{
    background-color: white;
    height: 2rem;
    width: 0.75rem;
    margin-top: -12px;    
}

/* Devices with resolutions under 1600x900 */
@media only screen and (max-width: 1599px)
{
    .grid
    {
        width: 500px;
        height: 500px;
    }
    .page-title
    {
        font-size: 3.5rem;
        top: 1rem;
    }
    .btn
    {
        height: 3rem;
        padding: 0 1.8rem;
    }
    .label-size, 
    .input-size,
    .label-size-grid
    {
        font-size: 1.5rem;
    }
    .input-size
    {
        width: 4rem;
    }
}