/* -- ROOT SETTINGS -- */
: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*/
	--shadow:	    #b8b8b8;
	--font:		    'Open Sans', sans-serif, 'calibri', verdana, arial;  
	--fontsize:	  11px;
	--titlefont:	'Corinthia',cursive;
	--selection:	#000000;
	--selectionbg:#FFF0F5;
}

/* -- TEXT STYLES -- */
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 { 
	font-family:       	var(--font); 
	white-space:      	pre-wrap; 
	white-space:       	-moz-pre-wrap; 
	white-space:      	-pre-wrap; 
	white-space:       	-o-pre-wrap; 
	word-wrap:        	break-word;	
	}

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);	}


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(--accent3);	}

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);	}

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

/* -- RESET -- */
*{
    box-sizing: border-box;}

html, body{
    width:      100%;
    height:     100%;
    margin:     0;
    font-family: var(--font); 
}

body{
    overflow:   hidden;
    display:    flex;
    justify-content:center;
    align-items:center;
    background: var(--bg);
    font-family:var(--font);
    color:      var(--text);
}

/* -- MAIN CONTAINER -- */
#container{
    position:   relative;
    width:      780px;
    height:     600px;
}

/* -- MAIN IMG -- */
#character{
    position:   absolute;
    left:       -375px;
    bottom:     -50px;
    z-index:    10;
}

#character img{
    height:     660px;}

/* -- TITLE -- */
#header{
    margin-left:120px;
    margin-bottom:10px;
}

#header h1{
    margin:     0;
    font-family:'Corinthia',cursive;
    font-size:  82px;
    line-height:1;
    color:      var(--title);
}

#header p{
    margin:     0;
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:  11px;
    padding-lefT: 5px;
}

/* -- MAIN FRAME -- */
#frame{
    margin-left:120px;
    width:      660px;
    height:     550px;
    background: var(--paper);
    border:     1px solid var(--border);
    box-shadow: 0 8px 20px var(--shadow);
    display:    flex;
    flex-direction:column;
}

/* -- NAVIGATION -- */
#nav{
    height:     20px;
    border-bottom:1px solid var(--border);
    display:    flex;
    align-items:left;
    gap:        20px;
    flex-shrink:0;
    margin:     0;
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:  11px;
    padding-left:5px;
}

#nav a{
    cursor:     pointer;
    text-decoration:none;
    color:      var(--accent);
    font-size:  11px;
    transition: .3s;
}

#nav a:hover{
    opacity:    .6;
}

.dropdown {
    position:   relative;
    display:    inline-block;
    display:    inline-block;
    font:       11px;
    text-transform:uppercase;
    padding:    2px; 
    padding-left:5px;
    padding-right:5px;
    letter-spacing:1px;
    color:      var(--links);
    line-height:11px;}
}

.dropdown span {
    cursor:     pointer;
}

.dropdown-content {
    display:    none;
    position:   absolute;
    top:        100%; 
    left:       0;
    background: var(--paper);
    min-width:  120px;
    border-radius: 2px;
    padding:    2px 0;
    z-index:    999; 
}

.dropdown-content a {
    color:      var(--hover);
    padding:    2px 2px;
    text-decoration: none;
    display:    block;
    font-size:  11px;
}

.dropdown-content a:hover {
    background-color: var(--bg);
}

.dropdown:hover .dropdown-content {
    display:    block;
}

/* -- CONTENT -- */
#content{
    flex:1;
    padding:10px;
    border-bottom:1px solid var(--border);
}

#content iframe{
    width:100%;
    height:100%;
    border:none;
    background: var(--paper);
}

/* -- LISTS -- */
ul{
    padding-left:18px;
}

li{
    margin-bottom:4px;
}

/* -- SCROLLBAR -- */
::-webkit-scrollbar{
    width:6px;
}

::-webkit-scrollbar-thumb{
    background:var(--border);
}


/*=== 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;
}



/* -- FOOTER -- */
.credit a {
    font-size:10px;
    bottom:15px;
    right:20px;
    position:fixed;
    text-transform:uppercase;
    color: var(--links)
}