/* @import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap'); */

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


@font-face {
	font-family: content;
	src: url('../fonts/Jersey10-Regular.ttf');
}

:root {
	--color-accent0:#000000;
	--color-accent1:#786858;
	--color-accent2:#E3DEAC;
	--color-accent3:#709166;
	--color-accent4:#B3DEC9;
	--color-accent5:#4C8D8F;
	--color-accent6:#2f4f4f;
    --color-cosmos: #000000;
	
	/* --button-border: solid 2px #786858;
	--button-padding: 5px;
	--button-gap: 2px; */

	--space-small : 5px;
	--space-medium : 10px;
	--space-large : 20px;
    --space--ultralarge : 100px; 
	--main-height: calc(100vh - 53px);
}

* {
	font-family: inherit;
	color: inherit;
}

body {
	font-family: content;
	font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 28px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

input, button {
    font-size: 18px;
    padding: var(--space-small);
}

/***** buttons *****/
.button {
    width: 32px;
    height: 32px;
    box-shadow: 2px 2px 0px;
    background-color: var(--color-accent3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.button:hover, .button.on {
    box-shadow: none;
    transform: translate(2px, 2px);
}

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

.buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: var(--space-medium)
}

/*****
HEADER
*****/
#main-header {
	padding: var(--space-small);
	background: var(--color-accent5);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#level-selector {
    display: flex;
    align-items: baseline;
}

#level-selector .button {
    width: auto;
    padding: 0 var(--space-small);
}

/*****
FOOTER
*****/
#main-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: var(--space-medium) var(--space-large);
    text-align: right;
    color: #ffffff;
}


/*****
PAGE
*****/
#page {
	display: grid;
	grid-template-columns: 1fr 4fr;
	height: var(--main-height);
}

/*****
ASIDE
*****/
#sidebar {
	background-color: var(--color-accent2);
	color: var(--color-accent1);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-height: var(--main-height);
	width: 100%;
}

/***** header *****/
#sidebar > header {
	background-color: var(--color-accent1);
	color: var(--color-accent2);
}

#sidebar > header > nav {
	padding: var(--space-medium) var(--space-large);
	padding-bottom: 0;
	display: flex;
	gap: var(--space-small);
	/* border-bottom: var(--button-border); */
}

#sidebar > header > nav > a {
	background-color: var(--color-accent1);
	padding: var(--space-small);
	/* margin-bottom: -2px; */
	text-decoration: none;
}

#sidebar > header > nav > a.on {
	background-color: var(--color-accent2);
	color: var(--color-accent1);
}

/***** tabs *****/
#tabs {
	padding: var(--space-small);
	overflow: auto;
	/* border: solid 5px var(--color-accent2); */
}

#tabs .tab:not(.on) {
	display: none;
}

.catalog .box {
    border: solid 3px;
    padding: var(--space-small);
    margin-bottom: var(--space-medium);
    position: relative;
}

/* filters */
span.color {
    display: block;
    width: 25px;
    height: 25px;
}

.attributes li {
    display: flex;
    align-items: center;
}

.attributes li label {
    display: block;
    width: 50%;
    margin-left : var(--space-large)
}

/* album */
#album-tab .catalog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--space-medium);
}

#album-tab .catalog .box {
    aspect-ratio: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

#album-tab .catalog .box:before {
    content: attr(data-type);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    text-transform: capitalize;
}

#album-tab .box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#album-tab .box h4 {
    position: relative;
    z-index: 10;
}

/* help */
#help-tab li {
    padding-left: var(--space-small);
    list-style-type: square;
    list-style-position: outside;
}

#help-tab ul {
    padding-left: var(--space-large);
}

/*****
MAIN
*****/
#main-content {
	background-color: var(--color-accent6);
	position: relative;
}

#main-content canvas {
    position: absolute;
    top: 0;
    left: 0;
}


#cosmos {
    background-color: var(--color-cosmos);
}

#telescop {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#telescop canvas{
    background-color: #2226;
    border: solid 2px red;
    transform: translate(-2px, -2px);
}

#telescop .reticle {
    width: 250px;
    height: 250px;
    position: relative;
}

#telescop .reticle li {
    background-color: red;
    position: absolute;
}

#telescop .reticle li:nth-child(1) {
    right: 0;
}

#telescop .reticle li:nth-child(2) {
    bottom: 0;
}

#telescop .reticle li:nth-child(even){
    width : 2px;
    height : 100px;
    left: calc(50% - 1px);
}
#telescop .reticle li:nth-child(odd){
    width : 100px;
    height : 2px;
    top: calc(50% - 1px);
}


/***** actions bar *****/
#actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: var(--space-medium) var(--space-large);
    background-color: var(--color-accent4);
    justify-content: space-between;
    align-items: center;
    z-index : 100
}

#actions ul {
    display: flex;
    gap: var(--space-small);
}

#actions #tools li {
    text-align: right;
    justify-content: flex-end;
    align-items: flex-end;
}

#zoom {
    background-image: url('../images/btnZoom.png');
}

#speed {
    background-image: url('../images/btnSpeed.png');
}

#pic {
    background-image: url('../images/btnCam.png');
}

#position {
    min-width: 200px;
    text-align: right;
}

/*****
MODAL
*****/
.modal {
    display: flex;
    position: fixed;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space--ultralarge);
    background-color: #000C;
    align-items: center;
    justify-content: center;
}

.modal:not(.on) {
	display: none;
}

.modal-content {
	display: flex;
	flex-direction: column;
	padding: var(--space-large);
    gap: var(--space-medium);
	background-color: var(--color-accent5);
}

.modal-content img {
    aspect-ratio: 1;
    width: 200px;
    margin: auto;
}