/**____________BEGINNING OF KEY VERSE AND SYNOPSIS____________________________**/
.me {
  	background-image: url(Picture_Center/site-logo-center/main-logo_CLEAR-bg-color_20-size.png);
  	background-size: cover; background-size: contain;
	background-repeat: no-repeat;
	}

.container-key-verse {
  	align-items: center;
  	/*       background: #F1EEF1;
  		border: 1px solid #D2D1D4;
  	*/      display: flex;
  	666666666666width: 360px; max-width: 360px;
  	666666666666height: 360px; max-height: 360px;
  	justify-content: center;
	}

.email { 
  	background: #DEDBDF; background-color: #17151d;  
  	border-radius: 16px;
  	height: 32px;
  	overflow: hidden;
  	position: relative;
  	width: 162px;
  	-webkit-tap-highlight-color: transparent;
  	transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    		height 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    		box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
   		border-radius 300ms cubic-bezier(0.4, 0.0, 0.2, 1);  
	}

.email:hover {
 	color: #F8F8F8 !important;
  	background: radial-gradient(#480D35 ,#17151d) !important;
	border: 1px solid #C2C0C2;
	}

.email:not(.expand) {
  	cursor: pointer; 
	}

.email:not(.expand):hover {
  	background: #C2C0C2;
	}

.from { WIDTH: 100%; 
  	position: absolute; 
  	transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
	}

.from-contents {
  	display: flex;
  	flex-direction: row;
  	transform-origin: 0 0;
  	transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
	}

.to {
  	opacity: 0;
  	position: absolute;
  	transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
	}

.to-contents {
  	transform: scale(.55);
  	transform-origin: 0 0;
  	transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
	}

.avatar {
  	border-radius: 12px;
  	width: 24px;
  	height: 24px;
  	left: 6px;
  	position: relative;
  	top: 4px;
	} 

.name {
	font-family: "Alegreya Sans SC", sans-serif; /**IMPORTANT**/  
  	font-size: 14px; 
	FONT-WEIGHT: 900;
  	line-height: 32px;
  	22margin-left: 10px;  margin-left: 22px;
	color: #F8F8F8; 
	}

.top {
  	111background: #6422EB; background: radial-gradient(#480D35 ,#17151d);
  	display: flex;
  	flex-direction: row;
  	height: 70px;
  	transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
  	width: 300px;
  	box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.75);
	}

.avatar-large {
  	border-radius: 21px;
  	width: 42px;
  	height: 42px;
  	margin-left: 12px; padding-top: 6px; padding-left: 2px;
  	position: relative;
  	top: 14px;
	}

.name-large {
	font-family: "Alegreya Sans SC", sans-serif; /**IMPORTANT**/ 
	FONT-WEIGHT: 900 !IMPORTANT;
  	color: #efd8ef;
  	font-size: 16px; FONT-SIZE: 20PX;
  	line-height: 70px;
  	margin-left: 20px;
	}

.x-touch {
  	align-items: center;
  	align-self: center;
  	cursor: pointer;
  	display: flex;
  	height: 50px;
  	justify-content: center;
  	margin-left: auto;
  	width: 50px;
	}

.x {
  	background: #BA87F9;
  	border-radius: 10px;
  	height: 20px;
  	position: relative;
  	width: 20px;
	}

.x-touch:hover .x {
  	background: #CB9AFB;
	}

.line1 {
  	background: #6422EB;
  	height: 12px;
  	position: absolute;
  	transform: translateX(9px) translateY(4px) rotate(45deg);
  	width: 2px;
	}

.line2 {
  	background: #6422EB;
  	height: 12px;
  	position: absolute;
  	transform: translateX(9px) translateY(4px) rotate(-45deg);
  	width: 2px;
	}

.bottom {
  	background: #FFF;
  	color:  #444247;
  	font-size: 14px;
  	height: 200px;  
  	padding-top: 5px;
  	width: 300px;
	}

.row-notice {
  	align-items: center;
  	display: flex;
  	flex-direction: row;
  	111height: 60px; height: 100%; pading-top: 0px !important;
	}

666666666666.twitter {
  margin-left: 16px;
  height: 30px;
  position: relative;
  top: 0px;
  width: 30px;
}

??????????????????????????. {
  height: 30px;
  margin-left: 16px;
  position: relative;
  width: 30px;
}
111111111111111111.link {
  margin-left: 16px;
}
11111111111111111.link a {
  color:  #444247;
  text-decoration: none;
}
.link a:hover {
  color:  #777579;
}
.email.expand { 
	z-index: 12000000000000000000 !important;  
  	border-radius: 6px;
  	box-shadow: 0 10px 20px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.16);
  	height: 200px;
  	width: 300px;
	box-shadow: rgb(85, 91, 255) 0px 0px 0px 1px, rgb(31, 193, 27) 0px 0px 0px 1px, rgb(255, 217, 19) 0px 0px 0px 1px, rgb(255, 156, 85) 0px 0px 0px 1px, rgb(255, 85, 85) 0px 0px 0px 1px;
	}

.expand .from {
  	opacity: 0;
  	transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1); 
	}

.expand .from-contents {
  	transform: scale(1.91); 
	}

.expand .to {
  	opacity: 1;
  	transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
	}

.expand .to-contents {
  	transform: scale(1);  
	}
/**____________END OF END OF KEY VERSE AND SYNOPSIS____________________________**/











/**TO MAKE THE LOGO VISIBLE ON DARK BACKGROUND**/
#visibility {
  	background: linear-gradient(270deg, #073763, #0b5394, #3d85c6, #6fa8dc, #9fc5e8, #c8bede, #b3a6d5, #8675b8, #674ea7, #351c75, #741b47, #a64d79, #c27ba0, #d5a6bd, #d8aca4, #dd7e6b, #cc4125, #a61c00, #85200c, #571407);
  	background-size: 2000% 2000%;
  	-webkit-animation: colors 30s ease infinite;
          	animation: colors 30s ease infinite;
	}

@-webkit-keyframes colors {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes colors {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/**END OF TO MAKE THE LOGO VISIBLE ON DARK BACKGROUND**/












/**ANIMATED BORDER**/
.email {
  111width: 60vmin;
  111height: 50vmin;
  display: grid;
  place-content: center;
  color: white;
  text-shadow: 0 1px 0 #000;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
      from var(--border-angle),
      #213,
      #112 5%,
      #112 60%,
      #213 95%
    );
  border: solid 5px transparent;  border: solid 1px transparent;
  border-radius: 2em;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
  background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  background-position: center center;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.box:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}
/**END OF ANIMATED BORDER**/