html, body {
	overflow-x:         hidden;
}

:root{
	--bg:              	#d5dde8;		/*background*/
	--paper:           	#fbfaf8;		/*iframe background*/
	--text:     	      #808691;		
	--title:           	#ffffff;	  /*main title*/
	--h1:       	      #D8BFD8;
	--h2:       	      #4B4B4B;
	--h3:		            #EDF2F6;
	--links:    	      #b7c1cd;
	--hover:     	      #ffffff;
	--border:           #FFF0F5;
	--accent:   	      #D8BFD8;    
	--accent2:  	      #FFB6C1;    /*light pink*/
	--accent3:  	      #ffbfb4;    /*peach*/
	--accent4:          #C8A2C8;    /*thistle lilac*/
	--accent5:          #EDF2F6;    /*light blue*/
	--accent6:          #DBCADF;    /*between accent 4 and 5*/
	--shadow:	          #b8b8b8;
	--font:		          'Open Sans', sans-serif, 'calibri', verdana, arial;  
	--fontsize:	        12px;
	--titlefont:	      'Corinthia',cursive;
	--selection:	      #000000;
	--selectionbg:      #FFF0F5;
}

/*=== SCROLLBAR ===*/
*::-webkit-scrollbar { 
  width:              4px; 
  height:             4px; }
*::-webkit-scrollbar-track { 
	background:         transparent; }
*::-webkit-scrollbar-thumb {  
	background-color:   #bbbbbb; 
	border-radius:      0px;}
.desc::-webkit-scrollbar, .musedesc::-webkit-scrollbar { 
  width:              1px; }

/*=== CURSOR ===*/
* {
	cursor:             url('https://cdn.cursors-4u.net/previews/small-grey-outline-pointer-6a97f823-32.webp') 32 32, auto !important;	}


/** GENERAL STYLING **/
body { 
	color:		          #555555; 
	font-size:	        var(--fontsize); 
	font-family:	      var(--font);
	font-weight:      	400; 
	text-align:	        left; 
	overflow-y:	        auto;
	overflow-x:       	hidden;
	background:	        var(--paper); 
	line-height:      	140%; 
	word-wrap:        	break-word; 
	margin:           	0; 
	padding: 	          0;	
	} 

::-moz-selection { 
	color:		          var(--selection);
	background:	        var(--selectionbg);}
::selection {
	color:	          	var(--selection);
	background:       	var(--selectionbg);	}

blockquote { 
	padding:          	0 0 0 1em; 
	border-left:      	2px solid #bbbbbb; 
	margin:	          	24px 0px 24px 24px;	
	}

hr {
	height:	          	1px; 
	border: 	          none; 
	box-shadow: 	      none; 
	background-color:   #bbbbbb;	
	} 

pre {
  white-space:        pre-wrap; 
}

textarea {
  font:               10px monospace;
  margin:             10px;
  padding:            5px;
  border:             1px solid var(--border);
  background:         var(--accent5);
  color:              var(--text);
  resize:             none; 
  width:              200px;
  box-sizing:         border-box;
  line-height:        1.4;
}

a {
	text-decoration:    none; 
	text-transform:	    uppercase; 
	color:		          var(--links); 
	font-weight:	      700; 
	cursor:		          pointer; 
	-webkit-transition: all 0.7s ease; 
	transition: 	    	all 0.7s ease; 
	-moz-transition:  	all 0.7s ease; 
	-o-transition:		  all 0.7s ease;	
	} 

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

p {
	margin:		          10px 0 10px 0;	
	} 

b, strong {
	font-size:        	var(--fontsize); 
	text-transform:	    uppercase; 
	color:		          var(--accent2); 
	font-weight:	      800;
	letter-spacing:	    0px;	
	}

em {
	font-size: 	        var(--fontsize); 
	color:	          	var(--accent3);
	text-transform:	    lowercase;
	font-style:     	  italic;	
	} 

u {
	background: linear-gradient(  transparent 60%,		#DBCADF 100% );
	text-decoration: none;
  }

mark {
	color:	          	#ffffff;
	background-color:   #DBCADF;
	padding:          	0px 3px;	
	}

small { 
	font-size: 	        9px;	}

big {	
  font-size:	        calc(var(--fontsize) + 1px);	}

h1 { 
	font-size:	        85px; 
	line-height:	      90px; 
	text-align:	        left; 
	font-family:	      var(--titlefont); 
	font-weight:	      700;
	padding: 	          0px 5px 20px 5px; 
	color:		          var(--accent);	}

h2 { 
	font-size:	        75px; 
	font-weight:	      700; 
	letter-spacing:	    2px; 
	line-height:	      80px; 
	text-align:	        left; 
	font-family:	      var(--titlefont); 
	border-bottom:	    1px solid var(--border); 
	color:		          var(--accent2);  }

h3 { 
	font-size:	        65px; 
	font-weight:	      700; 
	letter-spacing:	    2px; 
	line-height:	      70px; 
	text-align:	        left; 
	font-family:      	var(--titlefont); 
	border-bottom:	    1px solid var(--border); 
	color:	          	var(--text);	}

h4 { 
	text-transform:	    uppercase; 
	font-size:	        25px; 
	font-weight:	      900; 
	letter-spacing:	    2px; 
	line-height:	      30px; 
	text-align:	        left; 
	font-family:      	var(--font); 
	border-bottom:	    1px solid var(--border); 
	color:	          	var(--accent4);	}
	
h5 { 
	text-transform:	    uppercase; 
	font-size:	        15px; 
	font-weight:	      900; 
	letter-spacing:	    2px; 
	line-height:	      30px; 
	text-align:	        left; 
	font-family:	      var(--font); 
	border-bottom:	    1px solid var(--border); 
	color:		          var(--accent3);	}
	
h6 { 
	text-transform:	    uppercase; 
	font-size:	        15px; 
	font-weight:	      900; 
	letter-spacing:	    2px; 
	line-height:	      30px; 
	text-align:	        left; 
	font-family:	      var(--font); 
	border-bottom:	    1px solid var(--border); 
	color:		          var(--accent4);	}


/*=== IFRAME ===*/
article { 
	Width: 		          640px;
	margin-left: 	      0px; 
	margin-top:	        -5px;
	background-color:   #fbfbfc; 
	font-size:	        11px;
	border-radius: 	    0px 0px 0 0;	} 

* {
	margin: 	0;
	padding: 	0; 
	box-sizing: 	border-box;	}

p {
	margin:		16px 0;	}


/*=== content ===*/
#containeriframe {
	display: 	flex;
	height: 	auto;
	width: 		640px;	}

/*=== likes and dislikes ===*/
.like-dislike,
.hobbies,
.list2, 
.commissions{
	display:	          grid;
	grid-template-columns:50% 50%;	}

.like-dislike ul,
.hobbies ul,
.list2 ul,
.commissions{
  list-style:         none;
  margin:             0;
	padding:	          20px;
	overflow-y:	        auto;
	max-height:	        210px;    }

.like li::before,
.dislike li::before,
.hobbies li::before,
.list2 li::before,
.commissions li::before{
	margin-right:	      20px;
	font-family:	      var(--titlefont);
	font-size:          20px;   }

.do li::before{
  content:            'V';
  color:              #22C55E;  }

.dont li::before{
  content:            'X';
  color:              #EF4444;  }

.like li::before{
	content:	          'V';	
	color: 		          #22C55E;  }

.dislike li::before{
	content:	          'X';
	color:		          #EF4444;	}

	
.listleft li::before{
	content:	          '•';	
	color:		          var(--accent6);	}

.listright li::before{
	content:	          '•';
	color:		          var(--accent6);	}
	
.hobbiesleft li::before{
  content:            '♥';
  color:              var(--accent3);  }

.hobbiesright li::before{
  content:            '♥';
  color:              var(--accent3);  }
  
.like li,
.dislike li,
.hobbies li,
.list2 li,
.commissions li{
	margin-bottom:	    5px;	}


/*=== 06: GALLERY SETTINGS ===*/
.gallery-container{
	width:		100%;
	padding:	15px;
	box-sizing:	border-box;	}

.gallery-title{
	margin:		0 0 20px;
	font-size:	14px;
	text-transform:	uppercase;
	letter-spacing:	2px;
	color:		var(--accent);	}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,50px);
    gap:15px;
}

.gallery-grid a{
    width:50px;
    height:50px;
    overflow:hidden;
    display:block;
    border-radius:50%;
}

.gallery-grid a img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:50%;
    transition:.25s ease;
}

.gallery-grid a:hover img{
    transform:scale(1.15);
    box-shadow:0 0 12px var(--accent2);
}

/*=== ARTWORK PAGE ===*/
.art-page{
	padding:	15px;	}

.art-image{
	display:	block;
	max-width:	100%;
	margin:		0 auto 20px;
	image-rendering:pixelated;
	image-rendering:crisp-edges;	}

.art-page h1{
	margin:		0 0 15px;
	font-size:	14px;
	text-transform:	uppercase;
	letter-spacing:	2px;
	color:		var(--accent);	}

.art-info p{
	margin:		0 0 10px;
	line-height:	1.5;	}

/*=== LIGHTBOX ===*/
.art-image{
	cursor:		zoom-in;	}

#lightbox{
	position:	fixed;
	inset:		0;
	display:	none;
	justify-content:center;
	align-items:	center;
	background:	rgba(0,0,0,.9);
	z-index:	9999;	}

#lightbox.active{
	display:	flex;	}

#lightbox-image{
	max-width:	95vw;
	max-height:	95vh;
	image-rendering:pixelated;
	image-rendering:crisp-edges;
	cursor:		zoom-out;	}

	
/*=== new social icons ===*/
.social-icons a i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  margin: 4px;
  transition: all 0.2s ease;
}

.social-icons a:hover i {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.social-icons a:active i {
  transform: scale(0.95);
}

.social-icons a:focus-visible i {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/*=== LINK buttons ===*/
.link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.link-buttons a {
  display: inline-block;
}

.link-buttons img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/*=== commissions ===*/
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 30px;
}

.step {
  text-align:       center;
  padding:          8px;
  border:           1px solid var(--border);
  background:       transparent;
  border-radius:    6px;
  width:            110px;
}

.step:hover {
  transform: translateY(-3px);
}

.step img {
  width: 40px;   /* smaller icons */
  height: auto;
  margin-bottom: 6px;
  opacity: 0.9;
}

.step h5 {
  font-size: 11px;
  margin: 0 0 4px;
  letter-spacing: 1px;
}

.step p {
  font-size: 10px;
  line-height: 1.4;
  margin: 0;
  color: var(--text);
}

/*=== prices ===*/
.price-header {
  text-align: left;
  margin-bottom: 30px;
}

.price-header h3 {
  margin-bottom: 10px;
}

/* GRID */
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: 100%;
  align-items: start;
}

/* CARD */
.card-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.card-info {
  flex: 1;
}

.card-media {
  width:250px;  }
  
.card-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

/*-- old card--*/
.price-card {
  background: var(--accent5);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* TITLE */
.price-card h4 {
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--accent);
  border: none;
}

/* LIST */
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.price-card li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--text);
  font-size: 12px;
}

.price-card li span {
  color: var(--accent4);
  font-weight: 600;
}

/* IMAGE */
.price-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  margin-top: 10px;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 700px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

/*=== 06: RESPONSIVE SETTINGS ===*/
@media only screen and (
	max-height: 600px) {
		main {
			transform: scale(0.85);
			left:-50px;	}
	}

@media only screen and (max-width: 900px) {
    main {
        transform: scale(1);
        left: 0;
    }
}

@media only screen and (max-width: 600px) {
:root { --container-width:98vw; --container-height:98vh; --post-size:450px;}
main:before { display:none }
}

@media only screen and (max-width: 400px) { :root { --post-size:300px;} }