/* audiowide-regular - latin */
@font-face {
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: 400;
    src: url('./resources/audiowideFont/audiowide-v16-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./resources/audiowideFont/audiowide-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./resources/audiowideFont/audiowide-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./resources/audiowideFont/audiowide-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./resources/audiowideFont/audiowide-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./resources/audiowideFont/audiowide-v16-latin-regular.svg#Audiowide') format('svg'); /* Legacy iOS */
}

html {
    min-height: 100%;
    position: relative;
}

body {
    margin-bottom: 100px;
    background: rgb(4,0,70);
    background: linear-gradient(139deg, rgba(4,0,70,1) 0%, rgba(26,4,45,1) 49%, rgba(45,0,80,1) 100%);
    color: salmon;
    background-attachment: fixed;
    background-size: cover;
}

@keyframes eraseGrid {
    0% {transform:translate(5px, 10px); opacity: 0.5;}
    25% {transform:translate(-5px, 20px); opacity: 0.4;}
    50% {transform:translate(5px, 30px); opacity: 0.3;}
    75% {transform:translate(-5px, 40px); opacity: 0.2;}
    100% {transform:translate(5px, 50px); opacity: 0.1;}
}

.erase-grid {
    animation: eraseGrid 1s;
}

/* Header */

.header {
    margin-top: -20px;
}

h1 {
    text-align: center;
    font-family: 'Audiowide', sans-serif;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
    font-size: 70px;
    letter-spacing: 0.06em;
    background-image: url('./resources/images/textColor.png');
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 10%;
    background-color: hotpink;
    filter: drop-shadow(7px 3px 3px mediumblue);
}

/* Content */

.content {
    display: flex;
    align-items: center;
    gap: 100px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Content - Tools Bar */

.tools-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 220px;
    background-color: lightseagreen;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgb(0, 50, 50), 
                2px 2px 2px rgb(0, 55, 55),
                3px 3px 2px rgb(0, 60, 60), 
                4px 4px 2px rgb(0, 65, 65),
                5px 5px 2px rgb(0, 70, 70), 
                6px 6px 2px rgb(0, 75, 75),
                7px 7px 2px rgb(0, 80, 80), 
                8px 8px 2px rgb(0, 85, 85);
}

button {
    width: 120px;
    padding: 10px 20px;
    border: 1px solid white;
    border-radius: 5px;
    font-family: 'Audiowide', sans-serif;
    font-size: 17px;
    letter-spacing: 0.05em;
}

button,
.color-container {
    transition: transform 0.1s linear;
    box-shadow: 3px 3px 3px 2px black;
}

button:hover,
.color-container:hover {
    transform: scale(1.1);
}

button:active,
.color-container:active {
    transition: transform 0.05s ease-in-out;
    transform: scale(1);
}

.color-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}

.color-tool {
    border: 0;
    padding: 0;
    width: 200%;
    height: 200%;
    background-color: rgb(207, 3, 252);
    transform: translate(-25%, -25%);
}

.sizing-tool {
    -webkit-appearance: none;
    margin-top: 20px;
    transform: scale(1.5);
    width: 100px;
    height: 10px;
    box-shadow: 1.5px 1.5px 1.5px 1px black;
    border-radius: 5px;
}

.sizing-tool::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: salmon;
    border: 1px solid rgb(238, 134, 99);
    width: 13px;
    height: 20px;
    border-radius: 2px;
    box-shadow: 1px 1px 1px black;
}

.sizing-tool:hover {
    transform: scale(1.7);
}

.sizing-tool::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

.size-value {
    margin-top: -15px;
    color: black;
    font-family: 'Audiowide', sans-serif;
    font-size: 16px;
    letter-spacing: 0.05em;
}

/* Content - Etch Grid */

.etch-grid {
    display: grid;
    width: 600px;
    height: 600px;
    overflow: hidden;
    background-color: rgb(250, 240, 250);
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgb(250, 80, 246), 
                2px 2px 1px rgb(250, 90, 246),
                3px 3px 1px rgb(250, 100, 246), 
                4px 4px 1px rgb(250, 110, 246),
                5px 5px 1px rgb(250, 120, 246), 
                6px 6px 1px rgb(250, 130, 246),
                7px 7px 1px rgb(250, 140, 245), 
                8px 8px 1px rgb(250, 150, 246),
                9px 9px 1px rgb(250, 160, 245), 
                10px 10px 1px rgb(250, 170, 245), 
                11px 11px 1px rgb(250, 180, 246),
                12px 12px 1px rgb(250, 190, 246);
}

.grid-div {
    user-select: none;
}

/* Footer */

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
}

.footer > p {
    color: darksalmon;
    font-style: italic;
    letter-spacing: 0.03em;
}

.git-link {
    color: salmon;
    letter-spacing: 0.03em;
}