@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

/* font from https://www.dafont.com/game-over.font */
@font-face {
    font-family: gameover;
    src: url('game_over.woff') format('woff'),
         url('game_over.ttf') format('ttf');
  }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-color: #ffffff;
}

/* this is the class that is applied to the grid when it is cleared.
after 1.5 seconds the class is removed */

/* multiple classes so that some pixels will fade faster than others */
.clear-fade {
    background-color: var(--bg-color) !important;
    transition: background-color 1.5s ease; 
}

.clear-fade-2 {
    background-color: var(--bg-color) !important;
    transition: background-color 1.4s ease; 
}

.clear-fade-3 {
    background-color: var(--bg-color) !important;
    transition: background-color 1.3s ease; 
}

.clear-fade-4 {
    background-color: var(--bg-color) !important;
    transition: background-color 1.2s ease; 
}

.clear-fade-5 {
    background-color: var(--bg-color) !important;
    transition: background-color 1.1s ease; 
}

.clear-fade-6 {
    background-color: var(--bg-color) !important;
    transition: background-color 1.0s ease; 
}


body {
    background-color: #181818;
}

.header {
    margin-top: 50px;
    color: rgb(62, 166, 255);
    font-size: 100px;
    text-align: center;
    font-family: gameover;
}

.grid-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 660px;
    height: 660px;
    background-color: #202020;
    border-radius: 4px;
}

.grid-container {
    /* box-sizing: content-box; */
    display: grid;
    height: 600px;
    width: 600px;
    /* background-color: rgb(156, 156, 156); */
    border: 1px solid rgb(156, 156, 156);
    /* border-radius: 4px; */
    /* margin-left: auto;
    margin-right: auto; */
}

.wrapper {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
.main {
    display: flex;
    justify-content: space-evenly;
}

input[type="color"] {
    display: block;
    outline: none;
    border: none;
    /* border: 1px solid rgb(62, 166, 255); */
    background-color: rgba(0,0,0,0);
    border-radius: 2px;
    width: 200%;
    /* padding: 4px 8px; */
    height: 200%;
    transform: translateX(-10px) translateY(-10px);

}

.color-box {
    height: 36px;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid rgb(62, 166, 255);
    width: 35%;
    margin-bottom: 10px;
    
    /* transform: translateY(-10px); */


}

.color-card {
    font-family: roboto;
    font-weight: 500;
    font-size: 14px;
    color: rgb(62, 166, 255);
    display: flex;
    position: relative;
    
}

.color-card span {
    margin-left: 9px;
    position: absolute;
    top: 10px;
    left: 88px;
    
}



button {
    display: block;
    color: rgb(62, 166, 255);
    font-weight: 500;
    font-family: roboto;
    background-color: rgba(0,0,0,0);
    font-size: 14px;
    outline: none;
    border: 1px solid rgb(62, 166, 255);
    border-radius: 2px;
    padding: 9px 15px;
    width: 100%;
    margin-bottom: 10px;
}

.cc2 {
    margin-bottom: 25px;
}

#color-grabber {
    margin-bottom: 34px;
}

#lighten-btn {
    margin-bottom: 31px;
}

.slider-box {
    margin-bottom: 10px;
}

.grid-size {
    font-family: roboto;
    font-weight: 500;
    font-size: 14px;
    color: rgb(62, 166, 255);
    text-align: center;
    margin-bottom: 10px;
}

#grid-btn {
    margin-bottom: 30px ;
}

#clear-grid {
    margin-bottom: 0px;
}

.btn-on {
    background-color: rgb(62, 166, 255);
    color: #202020;
}

.grid-item {
    /* background-color: rgb(255, 255, 255); */
    user-select: none;
}

.border-top-left {
    border-top: 1px solid rgb(156, 156, 156);
    border-left: 1px solid rgb(156, 156, 156);
}

.border-right {
    border-right: 1px solid rgb(156, 156, 156);
}

.border-bottom {
    border-bottom: 1px solid rgb(156, 156, 156);
}

.slider-box {
    position: relative;
    width: 100%;
}

#range-value {
    /* position: absolute;
    top: 2px;
    right: 0px;
    padding: 2px;
    width: 40px; */
    /* background: #fff; */
    text-align: center;
}

/* #range-value::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    left: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
} */

.main {
    margin-top: 60px;
    margin-bottom: 60px;
}

.controls {
    width: 300px;
    background-color: #202020;
    border-radius: 4px;
    padding: 30px;
}
input[type="range"] {
    width: 100%;
    height: 2px;
    background: #404040;
    appearance: none;
    outline: none;
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(62, 166, 255);
}

#progress-bar {
    width: 40%;
    height: 2px;
    background-color: rgb(62, 166, 255);
    border-radius: 2px;
    position: absolute;
    top: 12px;
    left: 0;
}