@font-face {
    font-family: 'Viga';
    src: url(./assets/viga.ttf);
}

html, body {
    width: 100%;
    height: 100%;
}

:root {
	--blue: #706fd3;
	--darkblue: #4948bc;
	--red: #ff5252;
	--black: #1e272e;
}

body {
    margin: 0;
    background-color: var(--black);
    color: white;
}

body, .button {
    font-family: 'Viga';
}

.button {
	border-radius: 20px;
	min-width: 100px;
	cursor: pointer;
	background-color: var(--blue);
    border: 4px solid var(--blue);
	font-weight: bold;
	color: black;
    outline: none;
}

.button:hover {
    background-color: var(--darkblue);
}

#camera {
    display: none;
    position: relative;
}

#canvas {
    display: none;
}

#exit {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 1rem;
}

#file {
    display: none;
}

#gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, max-content));
    gap: 0.5rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 90%;
    justify-content: center;
}

#gallery div {
    aspect-ratio: 1 / 1;
    max-width: 6rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    cursor: pointer;
}

#home, #camera, #image, #ui, #video {
    width: 100%;
    height: 100%;
}

#home {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#image {
    opacity: 0.2;
    background: url() center/contain no-repeat;
    width: 100%;
    height: 100%;
}

#level {
    margin-bottom: 2rem;
}

#old, #ui, #video {
    position: absolute;
    top: 0;
    left: 0;
}

#select {
    padding: 1rem;
}

#shot {
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    background: url(assets/shot.png) #fff center center/50% no-repeat;
    border: 4px solid var(--darkblue);
}

#ui {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}


/******** INPUT RANGE CSS ********/
/* https://range-input-css.netlify.app/ */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 20rem;
}
  
/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}
  
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
    background-color: #bf4040;
    border-radius: 0.5rem;
    height: 1rem;
}
  
/* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -8px; /* Centers thumb on the track */
    background-color: var(--darkblue);
    border: 4px solid var(--blue);
    border-radius: 0.5rem;
    height: 2rem;
    width: 2rem;
}
  
input[type="range"]:focus::-webkit-slider-thumb {
    outline: 4px solid #fff;
    outline-offset: 0.125rem;
}
  
/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
    background-color: #bf4040;
    border-radius: 0.5rem;
    height: 1rem;
}
  
/* slider thumb */
input[type="range"]::-moz-range-thumb {
    background-color: var(--darkblue);
    border: none; /*Removes extra border that FF applies*/
    border: 4px solid var(--blue);
    border-radius: 0.5rem;
    height: 2rem;
    width: 2rem;
}
  
/* input[type="range"]:focus::-moz-range-thumb{
    outline: 4px solid #fff;
    outline-offset: 0.125rem;
} */