:root {
	--main_color_light: hsl(130, 50%, 70%);
	--main_color_medium: hsl(133, 35%, 25%);
	--main_color_dark: hsl(135, 30%, 15%);
	--secondary_color_light: hsl(140, 70%, 69%);
	--secondary_color_dark: hsl(140, 40%, 37%);
	--link_color_main: hsl(130, 50%, 50%);
	--warning_color: hsl(50, 70%, 70%);
	--error_color: hsl(340, 70%, 70%);
	--error_color_dark: hsl(340, 60%, 30%);
}

@font-face {
	font-family: mainFont;
	src: url(font/main.ttf);
}

html {
	font-family: mainFont;
}

body {
    background-color: var(--main_color_dark);
	color: var(--main_color_light);
    background-position: center;
    background-repeat: repeat;
    background-size: 100% 100%;
	margin: 0px;
}
a {
	color: var(--link_color_main);
	transition: 0.1s;
}

a:hover{
	color: var(--secondary_color_dark);
}

ul {
	margin: 0px 0px 8px 0px;	
}

h1 {
    text-align: center;
	font-size: 40px;
}
h2 {
    margin: 8px 0px 16px 0px;
    font-size: 25px;
}
h3 {
	margin: 8px 0px 8px 0px;
    font-size: 22px;
}

p {
    margin: 0px;
    font-size: 20px;
}

input[type="file"] {
  display: none;
}

footer {
	padding-top: 32px;
	padding-bottom: 16px;
	background-color: #000000;
}

main {
	margin: 8px;
	min-height: 90dvh;
	padding-bottom: 128px;
	box-sizing: border-box;
}
img {
	border-radius: 3px;
}
label {
    font-size: 20px;
}

.bg {
	height: 100%;
	width: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(8px);
	opacity: 0.1;
	top: 0px;
	left: 0px;
	z-index: -1;
	position: fixed;
}

@keyframes slide-in-left {
	0% { transform: translateX(-200px); opacity: 0; } 
	100% { transform: translateX(0); opacity: 1;} 
}
.slide-in-left {
	animation: slide-in-left 0.6s
}

@keyframes slide-in-top {
	0% { transform: translateY(-50px); opacity: 0; } 
	100% { transform: translateY(0); opacity: 1;} 
}

.slide-in-top {
	animation: slide-in-top 0.4s
}

.form-label {
	margin-top: 4px;
}

.text-input {
	background-color: var(--main_color_light);
	color: var(--main_color_dark);
	border: 2px solid var(--main_color_light);
	border-radius: 3px;
	font-family: mainFont;
}

.warning-text {
	color: var(--warning_color);
	font-size: 14px;
}

.error-text {
	color: var(--error_color);
	font-size: 14px;
}


.header {
    overflow: hidden;
    padding-top: 8px;
    padding-bottom: 8px;
	padding-left: 10px;
	padding-right: 10px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 3px solid var(--secondary_color_light);
    background: var(--main_color_medium);
	color: var(--secondary_color_light);
	box-sizing: border-box;
	display: flex;
	z-index: 1;
}

.header-text {
	font-family: mainFont;
	text-align: left;
	width: fit-content;
	display: inline-block;
	margin: 0;
	font-size: 30px;
	margin-right: auto;
}

.header-search {
	padding: 0px 64px 0px 64px;
	flex-grow: 1;
	display: flex;
	max-width: 50%;
	
}

.header-form {
	flex-grow: 1;
	display: flex;
}

.header-form-item {
	font-family: mainFont;
	margin: 0px 4px 0px 4px;
}

.header-search-input {
	font-size: 20px;
	font-family: mainFont;
    background-color: var(--secondary_color_light);
	color:  var(--main_color_dark);
    border: 2px solid var(--secondary_color_light);
    border-radius: 3px;
	font-weight: 400;
	height: 100%;
	cursor: pointer;
    line-height: 100%;
	box-sizing: border-box;
	margin-top: auto;
	margin-bottom: auto;
}

.footer-text {
	font-family: mainFont;
	font-size: 12px;
	text-align: center;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.header-button-group {
	margin-left: auto;
}

.button-header {
	font-family: mainFont;
	font-size: 20px;
    background-color: var(--secondary_color_light);
	color:  var(--main_color_dark);
    border: 2px solid var(--secondary_color_light);
    border-radius: 3px;
	font-weight: 400;
	height: 100%;
	cursor: pointer;
	transition: 0.1s;
    line-height: 100%;
	box-sizing: border-box;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 2px;
	margin-left: 2px;
}

.button-header:hover {
	color:  var(--main_color_light);
	background-color: var(--secondary_color_dark);
}

.button-main:hover {
	color:  var(--main_color_light);
	background-color: var(--secondary_color_dark);
}

.button-main {
    font-size: 20px;
	font-family: mainFont;
	margin: 4px;
    background-color: var(--secondary_color_light);
	color:  var(--main_color_dark);
    border: 2px solid var(--secondary_color_light);
    border-radius: 3px;
	transition: 0.1s;	font-weight: 400;
}

.button-warning {
    font-size: 20px;
	font-family: mainFont;
	margin: 4px;
    background-color: var(--error_color);
	color:  var(--error_color_dark);
    border: 2px solid var(--error_color);
    border-radius: 3px;
	transition: 0.1s;	font-weight: 400;
}
.button-warning:hover {
	color:  var(--error_color);
	background-color: var(--error_color_dark);
}

.button-submit {
	margin-top: 8px;
	font-size: 20px;
	margin: 4px;
	font-family: mainFont;
    background-color: var(--secondary_color_light);
	color:  var(--main_color_dark);
    border: 2px solid var(--secondary_color_light);
    border-radius: 3px;
	transition: 0.1s;
}

.button-submit:hover {
	color:  var(--main_color_light);
	background-color: var(--secondary_color_dark);
}

.button-back {
	font-family: mainFont;
    font-size: 20px;
    margin: 4px;
    background-color: var(--secondary_color_light);
    border: 2px solid var(--secondary_color_light);
    border-radius: 3px;
}

.form-footer {
	margin-top: 4px;
	font-size: 16px;
}

.pack-link {
	width: 125px;
	height: 125px;
}

.pack-icon:hover {
	transform: scale(1.1);
	z-index: 1;
}
.pack-icon {
	transition: 0.2s;
	width: 100%;
	height: auto;
}

.pack-gallery {
	background-color: var(--secondary_color_light);
    overflow: hidden;
	flex-wrap: wrap;
    background: var(--main_color_medium);
	color: var(--secondary_color_light);
	box-sizing: border-box;
	display: flex;
	min-height: 125px;
}