:root{
    --background-color: #eeeeee;
    --color: #222222;
    --font-size: 1rem;
    --svg-border-gray: #aaaaaa;
    --transform-distance: calc( ( sqrt(2) - 1 ) * 75px / sqrt(2) ) ;
    --ttime: 0.3s;
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Lekton';
    src: url('/lekton.regular.ttf') format('truetype');
}


body{
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
    margin-top: 0;
    margin-bottom:0;
    max-inline-size: 40em;
    margin-left: auto;
    margin-right: auto;
    font-family: Lekton;
    padding-left: 5vw;
    padding-right: 5vw;
    background-color: #eeeeee;
    color: #222222;
}

a{
    color:#ff2222;
    text-decoration: none;
}


nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1{
    font-size: 1rem;
    font-weight: bold;
    text-decoration: underline;
}

 /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input{
    width: 5rem;
    background-color: var(--background-color);
    color: var(--color);
}


.input{
    padding: 0.5rem;
    line-height: 2;
    
    border: solid 0.1vh black;
    /* border: none; */
    /* border-top: solid 0.3vh grey; */
    /* border-bottom: solid 0.3vh grey; */
    /* border-left: solid 0.3vh grey; */
    /* border-bottom: solid 0.3vh grey; */
    display: block;
    background-color: var(--background-color);
    color: var(--color);
    resize:none;
    width: 80%;
    height: 10vh;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    outline: none;
    :focus{
	outline: none;
    }
}

.comments{
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: var(--font-size);
    
    :nth-child(1){
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
    }

    :nth-child(2){
	margin-top: 0.5rem;
	margin-left:auto;
	margin-right: auto;
	max-width: 70%;
	font-style: italic;
	text-align: center;
    }
    
}

#info{
    max-height: 2rem;
    width: 70%;
    border: none;
    border-bottom: dotted 0.3vh grey;
    margin-top: 1vh;
    margin-bottom: 1vh;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    padding-left: 1rem;
    
}

#info::before{
    content: "";
}


input:focus{
    outline: none;
}

.department_status {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,auto);
    column-gap: 0.3rem;
    /* font-weight: bold; */

    :nth-child(1){
	grid-column:1;
	grod-row: 1;
    }
    
    :nth-child(2){
	grid-column:2;
	grod-row: 1;
    }

    :nth-child(3){
	grid-column:3;
	grod-row: 1;
    }

    :nth-child(4){
	grid-column:4;
	grod-row: 1;
    }
    
    :nth-child(5){
	grid-column:1;
	grod-row: 2;
    }

    :nth-child(6){
	grid-column:2;
	grod-row: 2;	
    }

    :nth-child(7){
	grid-column:3;
	grod-row: 2;
    }

    :nth-child(8){
	grid-column:4;
	grod-row: 2;
    }

}


.two_departments{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5%;
}

.red_border{
    border: solid 0.1vh red;
}

.blue_border{
    border: solid 0.1vh blue;
}


.symbol{
    font-size: var(--font-size);
}

.number{
    font-size: var(--font-size);
}

.compositions{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    input{
	border: none;
	border-bottom: solid grey 0.1vh;
	text-align: center;
    }
    border-style: dashed;
    border-color: grey;
    border-width: 0.1vh;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1vh;
}

.composition{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.label-input-pair{
    display: grid;
    grid-template-columns: 1fr 6fr;
    justify-items: center;
    column-gap: 0;    
}

#output{
    flex: 1;
    margin-top: 1rem;
    overflow-y: scroll;
    overflow-x: visible;
    width: 100%;
}

#controls{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: solid grey 0.1rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    button{
	background-color: var(--background-color);
	border: solid 0.1rem grey;
	padding: 0.3rem;
	
    }
}

.hide-button{
    position: absolute;
    right: 0;
    top: 0;
    width: 1rem;
    height: auto;
    padding: 0.1rem;
    border: 0.1rem solid black;

    path{
	stroke: black;
	stroke-width: 10;
	stroke-linecap: round;
	transition: transform var(--ttime);
    }

    .hide-middle{
	opacity: 1;
	/* display: block; */
	transition: all var(--ttime) 0.2s;
    }

}

.closed{    
    .hide-middle{
	/* display: none; */
	opacity: 0;
	transition: all var(--ttime);
    }

    .hide-upper{
	transform: rotate(45deg) translate( var(--transform-distance), var(--transform-distance))  ;
	transform-origin: calc( -75px + var(--transform-distance) )  calc( -75px   + var(--transform-distance) );
	transition: transform var(--ttime);
    }

    .hide-lower{
	transform: rotate(-45deg) translate( var(--transform-distance), calc(-1*var(--transform-distance)))  ;
	transform-origin: calc( -75px + var(--transform-distance) )  calc( 75px - var(--transform-distance));
	transition: transform var(--ttime);
    }
}

.hidden {
    display: none;
}

nav{
    
}