@charset "utf-8";
/* CSS Document */

:root {
  --pink: #AD69AF;
  --purple: #981D97;
}

		*, html, body {margin: 0; padding: 0; font-family: 'Lato', sans-serif; box-sizing: border-box;}
		body {background-image: url(leaf-top-left.png), url(leaf-top-right.png), url(bottom-right.png), url(bottom-left.png), url(bg.jpg);
    background-position: left -20px top, right top, bottom right, bottom left, top;
    background-repeat: no-repeat, no-repeat, no-repeat,  no-repeat, no-repeat;
    background-size: 160px, 120px, 200px, 150px, cover; min-height: 100dvh; overflow-x: hidden; }
		
		
		main { margin: 0 auto; padding: 0;} 
		.container { margin: 0 auto; padding: 0; width: 100%; max-width: 100%!important;}
		.wrapper { margin: 0 auto; padding: 0; width: 100%; max-width: 980px;}
		.logo { margin: 0 auto; width: 100%; max-width: 240px; padding-top: 10px;}
		.logo img {width: 100%; transform: none!important;}
		
		.narration h1 { color: var(--pink); font-weight: 300; text-align: center; padding-top: 20px; line-height: 1em;}
		.info h2 {color: var(--pink); font-weight: 300; padding: 10px 0 0 0; text-align: center;}
		
	
	/*	.dot{
  width:35px;
  height:35px;
  position:absolute;
  background: url(petal.png);
  background-size: 100% 100%; top: 0; z-index: 0;
}
		
		
		*/
		
	
		.lockUnlock { background: url("lock-shadow.png") no-repeat  right -20px top 0px; background-size: 140px; margin: 0 auto;
    width: 100%;
    max-width: 365px;
}
		
		.pic { margin: 0 auto; padding: 0; width: 100%;     max-width: 300px;    margin-top: 20px;}
		.pic img { width: 100%; transform: none!important; margin-top: -10px;}
		
		
		a.lunl { margin: 0 auto; padding: 10px 40px; display: block; border: 1px solid var(--purple); background: none; color: var(--purple); text-align: center; width: 100%; max-width: 350px; text-decoration: none; transition: 1s ease; position: relative; left: 0; right: 0; z-index: 1!important; cursor: pointer;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
a.lunl:hover {background: var(--purple); color: #FFF; transition: 1s ease;}




/*body.message .container { height: 100%!important; max-height: 100%!important; min-height: 100%!important;}*/


body.message .wrapper { padding: 60px 0; width: 100%; max-width: 490px;}
body.message h3 { color: var(--purple); font-weight: 400;}

.messageForm { padding: 20px 0 0 0;}
.senderDetails, .friedsDetails, .messageType { display: block;}
.friedsDetails { padding-top: 20px;}

.messageForm input, .messageForm textarea { display: block; width: 100%; padding: 15px; background: none!important; border: 1px solid var(--purple); margin-top: 10px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;} 

.messageForm textarea { height: 80px;}


.messageForm input::placeholder, .messageForm textarea::placeholder {
  color: var(--purple);
  opacity: 1; /* Firefox */
}

.messageForm input::-ms-input-placeholder, .messageForm textarea::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--purple);
}

.messageDisplay { margin-top: 30px; padding: 200px 20px 100px 120px; background: #000 url("letter3.jpg") no-repeat top center; background-size: cover; min-height: 655px;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.20);
-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.20);}

.messageType { padding: 20px 0 0 0;}

.messageForm input[type="submit"] { background: var(--pink)!important; color: #FFF; cursor: pointer; transition: 1s ease;}
.messageForm input[type="submit"]:hover { background: var(--purple)!important; transition: 1s ease;}
		
		
		@media only screen and (max-width: 991px) {
			
			
			/*body {background-size: 60%, 35%, cover;}*/
			.wrapper { padding-left: 40px; padding-right: 40px; max-width: calc(100% - 80px);}
			
		}
		
		@media only screen and (max-width:590px) {
			
			/*body {background-size: 40%, 25%, cover; background-position: left -20px top, right top, center top;}*/
			
			body {background-size: 120px, 80px, 180px, 100px, cover;}
			
			.wrapper { padding-left: 25px; padding-right: 25px; max-width: 100%;}
			.logo {max-width: 170px; padding-top: 40px;}
			.narration h1 {padding-top: 10px; font-size: 22px;}
			.info h2 {padding: 15px 0 0 0; font-size: 20px;}
			.lockUnlock {background-position: right top 5px; background-size: 120px; max-width: 260px;}
			.pic {max-width: 210px;}
			.pic img {margin-top: -20px;}
			/*a.lunl { margin-top: -20px;}*/
			
			footer { bottom: -20px;}
			
			
			
			
			
			body.message .wrapper {padding: 30px 30px 120px 30px;}
			
		}