:root{
	--color-purple: #6f6bfe;
	--color-purple-hover: #5350BF;
	--color-purple-20: #ebebff;
	--color-pink: #ff6a87;
	--color-pink-hover: #BF5065;
	--color-pink-hover-opac: rgba(255, 106, 135, 0.6);
	--color-light: #fff;
	--color-light-hover: rgba(255, 255, 255, 0.8);
	--color-dark-grey: #1D1C43;
	--primary-font-color: #100F25;
	--primary-font-family: 'Elms Sans', sans-serif;
	--headline-font-family: 'Indie Flower', sans-serif;
}

*{margin: 0; padding: 0; font-family: var(--primary-font-family); color: var(--primary-font-color); font-size: 18px;}
body{min-height: 320px;}
.content{min-height: calc(100vh - 123px); padding-top: 100px; position: relative;}
.container{max-width: 1160px; padding: 0 20px; margin:auto;}

/* Development Login */
.overlay-wrapper{background: var(--color-pink); height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; display:grid; align-items: center;}
.overlay-inner{width: 280px; margin: auto; padding: 10px; border-radius: 10px; background: var(--color-light);}
/* Ende Development Login */

h1{font-family: 'Indie Flower'; font-size: 44px;}
.content-grid h1{color: var(--color-light); margin-bottom: 40px; text-transform: uppercase; line-height: 1.1em; text-shadow: 2px 0px var(--color-dark-grey);}
h2{font-family: 'Indie Flower'; font-size: 30px;}
p{margin-bottom: 10px;} 
ul {margin-left: 30px;}
ul li{margin-bottom: 5px;}
.grid-twice .btn{margin-top: 10px;}

header{background: var(--color-purple); position: fixed; top:0; left: 0; right:0; padding: 5px 0; z-index: 999;}
.header-container{display: flex; justify-content: space-between; align-items: center;}
.logo-link{display:block; line-height:0;}
nav{display:flex; gap: 20px; align-items: center; position: relative; z-index:99;}
nav .user-info{text-align: right;}
.menu-toggle{ width: 30px; height: 30px; display: grid; align-content: space-around; border-radius: 30px; padding: 10px; cursor:pointer;}
.stroke{height: 4px; background: var(--color-light);}
.menu-main{position: fixed; top:60px; bottom: 0; right: -320px; width: 280px; background: var(--color-purple); z-index:9; padding: 20px; overflow: auto; transition: all 0.5s ease;}
.menu-main.open{right:0;}

.menu-item{display:block; color: var(--color-light); text-decoration: none; font-size: 28px; font-family: 'Indie Flower'; padding: 10px;  border-bottom: 2px solid var(--color-light); transition: all 0.5s ease;}
.menu-item:hover{background: var(--color-purple-hover);}

footer{background: var(--color-pink); }
footer .container{color: var(--color-light);}

form label{margin-bottom: 3px;}
.form-border{margin-bottom:60px; border: 2px solid var(--color-dark-grey); padding: 30px; border-radius: 10px;}
.formhead{background: var(--color-purple); padding: 5px 30px; position: relative; margin-bottom: -15px; margin-left: -10px; z-index: 9; width: fit-content; color: var(--color-light); border-radius: 10px 10px 10px 0; font-size: 30px;}
.form-group{margin-bottom: 20px;}
.form-group label{display: block; }
input[type=text], input[type=password], input[type=email]{width: calc(100% - 12px); padding: 5px; border: 1px solid var(--color-dark-grey); border-radius: 5px; background: var(--color-purple-20);}
textarea{width: calc(100% - 10px); height: 100px; border-radius: 10px; background: var(--color-purple-20); padding: 5px;}
select{width: 100%;     background: var(--color-purple-20);}
.form-border .btn{margin-left: auto;}

.btn{background: var(--color-purple); border:none; padding: 5px 20px; width: 100%; font-weight: 600; font-family:var(--headline-font-family); letter-spacing: 1px; color: var(--color-light); border-radius: 5px; text-decoration: none; font-size:24px; transition: all 0.3s ease; cursor: pointer; display:block; width: fit-content; box-shadow: 3px 3px 0 var(--color-dark-grey);}
.btn:hover{background: var(--color-purple-hover); box-shadow:none;}
.btn-pink{background:var(--color-pink);}
.btn-pink:hover{background: var(--color-pink-hover);}
.btn-light{background:var(--color-light);  color: var(--color-purple);}
.btn-light:hover{background:var(--color-light-hover);}
.btn-small {width: fit-content; padding: 5px 10px; font-size: 20px; line-height: 20px; height: fit-content;}
.btn-centered{margin: auto;}
.icon-btn {padding: 2px 8px; line-height: 1; width:30px;}

.start-background{background: linear-gradient(135deg, #ff6a87 0%, #6f6bfe 50%, #ff6a87 100%); background-size: 200% 200%; position: absolute; top: 0; left:0; right:0; bottom: 0; z-index:-1; filter: brightness(1.2); opacity: 0.8;}

.content-grid{display:grid; height: calc(100vh - 170px); align-items: center; text-align: center;}
.img-wrapper{position: relative; display:block; width: fit-content; margin: 60px auto;}
.logo-brackground { position: absolute; top: -40px; left: -44px; z-index: -1; opacity: 0.8; transform: rotate(-2deg);}

.user-name{color: var(--color-light);}
.user-name .link{color: var(--color-light); margin-right:5px;}

.pattern-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 60px; margin-bottom: 60px; margin-top: 20px;}
.pattern{padding:30px; border-radius: 30px 30px 0px 30px;  border: 4px solid var(--color-pink); position: relative; transition: all 0.3s ease; text-decoration:none;}
.additional-col{display:flex; gap: 10px;}
.category {padding: 5px 6px 3px; background: var(--color-purple); width: fit-content; color: var(--color-light); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 6px; display:block;}
.level {padding: 3px 6px; color: var(--color-purple); width: fit-content; border: 2px solid var(--color-purple); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 6px; display:block;}
.pattern .title{font-family: 'Indie Flower'; font-size: 30px;}
.premium-box {position: absolute; bottom: 0; right: 0; width: 50px; height: 50px; background: var(--color-pink); border-radius: 30px 0 0 0;}
.pattern .galery {display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;}
.pattern-content .galery {display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 20px 0;}
.galery a {line-height:0; transition: all 0.5s ease; overflow: hidden; position: relative; border: 2px solid var(--color-dark-grey); border-radius: 10px;} 
.gal-img{width: 100%; height: 100px; object-fit: cover;}
.galery a:hover img{transform: scale(1.1);} 
.edit-img {width: 100px; height: 100px; object-fit: cover;}

/*.pattern-comments { border: 2px solid var(--color-dark-grey); padding: 30px; border-radius: 10px; margin-top:40px;}*/
.pattern:hover{background: var(--color-pink-hover-opac);}
.additional-info{padding: 20px; border-radius: 10px; background: var(--color-purple-20); margin-bottom: 20px;}
.col{display: flex; justify-content: space-between; margin-bottom: 10px;} 
.additional-info .col-content{display: flex; gap:10px; margin-top:5px;}
.pattern-comments { border-top: 4px dotted var(--color-dark-grey); padding:30px 20px; margin-top:60px;}
.form-create-wrapper { background: var(--color-purple-20); margin-bottom: 20px; border-radius: 10px 10px 0 10px;}
.comment{padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--color-dark-grey);}
.comment-info{display:flex;  font-size: 0.9em; margin-bottom: 5px; justify-content: space-between; align-items: center;}
.comment-galery {display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top:10px;}
.author-info, .edit-wrapper{display:flex; gap: 10px;}
.author, .create-date, .comment-status{font-size:14px;}

.profil-head{padding: 20px; border-radius: 10px; background: var(--color-purple-20); margin-bottom: 30px;}
.filter-wrapper{padding: 20px; border-radius: 10px; background: var(--color-purple-20); margin-bottom: 30px;}
.filter-group{margin-bottom:10px;}
.filter-group label{display:block; margin-bottom: 3px;}
.btn-filter { display: inline-block; font-size: 14px; font-family: var(--primary-font-family); padding: 3px 8px; box-shadow: initial; background: none; color: var(--primary-font-color); border: 2px solid var(--color-purple); margin-bottom: 5px;}
.btn-filter:hover{color: var(--color-light); }
.btn-filter.active{color: var(--color-light); background-color:var(--color-purple);}

.my-comments{margin-top: 60px; margin-bottom: 60px;}
.my-comments .edit-wrapper { margin-left: auto; display: flex; width: fit-content; margin-bottom: 5px;}

.abo-link { color: var(--color-light);  font-weight: 700;}

.grid-twice{display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 30px;}
.grid-twice .col{display:block;}

.premium-user:after,
.premium-box:after,
.btn-edit:before{font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.premium-user:after{content: "\e907";}
.btn-edit:before{content: "\e900"; font-size:16px;}
.premium-box:after{content: "\e907"; color: var(--color-light); font-size: 26px; position: absolute; left: calc(50% - 13px); top: calc(50% - 13px);}

@media(max-width:1023px){
	.pattern-grid{grid-template-columns: repeat(1, 1fr); gap:20px;}
	.pattern .galery{grid-template-columns: repeat(6, 1fr);}
}

@media(min-width:768px){
	.user-info-menu{display:none;}
}
@media(max-width: 767px){
	.comment-galery{grid-template-columns: repeat(6, 1fr);}
	nav .user-info{display:none;}
}



@media(max-width:560px){
	.logo-start{width: 100%;}
	.logo-brackground{width: 130%; top: -35px}
	.pattern .galery{grid-template-columns: repeat(3, 1fr);}
	.pattern-content .galery{grid-template-columns: repeat(3, 1fr);}
	.comment-galery{grid-template-columns: repeat(4, 1fr);}
	
}