Popup Tutorial 02

/* POPUP BY PILLOW THEMES / CARA / PT / 2019 */
/* The text to click to show the popup */
.activator {
color:{color:text};
}

/* The background when you click on the text to show the popup */
.overlay {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.6); /* 0.6 is the opacity */
transition:opacity 0.5s;
visibility:hidden;
opacity:0;
transition:all 0.5s ease-out;
}

.overlay:target {
visibility:visible;
opacity:1;
transition:all 0.5s ease-out;
}

/* Popup box customizations */
.popup {
width:750px;
height:350px;
margin:150px auto 100px auto;
background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
position:relative;
transition:all 0.5s ease-in-out;
padding:20px;
}

/* Close the popup customizations */
.popup .close {
position:absolute;
top:-10px;
right:-60px;
transition:all 0.5s ease-out;
font-size:25px;
color:#fff;
text-align:center;
}

/* DO NOT TOUCH MY CREDITS */
#carapillowthemes {
width:150px;
margin-top:-80px;
margin-left:320px;
text-transform:uppercase;
color:#000;
text-align:center;
}

#carapillowthemes a {
color:#fff;
/* DO NOT TOUCH MY CREDITS */
}

#leftbox {
width:375px;
height:350px;
float:left;
background-color:#fff;
}

#est {
width:300px;
margin-top:20px;
margin-bottom:40px;
margin-left:50px;
font-family: 'Walkway';
font-size:30px;
text-decoration:underline #faaca8;
text-align:left;
}

#data {
width:250px;
height:170px;
margin:-10px auto;
padding:20px;
border:1px solid #f6f6f6;
overflow:scroll;
overflow-x:hidden;
}

#rightbox {
width:375px;
height:350px;
float:right;
background-color:#f6f6f6;
}

#stamp {
width:90px;
height:90px;
margin-top:50px;
margin-left:50px;
}

#stamp img {
width:90px;
height:90px;
border-radius:50%;
background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
padding:10px;
}

#marker {
width:100px;
height:5px;
background-color:#fff;
position:absolute;
margin-left:140px;
margin-top:-30px;
}

#marker1 {
width:100px;
height:5px;
background-color:#fff;
position:absolute;
margin-left:140px;
margin-top:-40px;
}

#quote {
width:280px;
margin-top:40px;
margin-left:50px;
}

#love {
width:280px;
margin-top:10px;
margin-left:50px;
font-family: 'Walkway';
font-size:30px;
text-decoration:underline #faaca8;
}
/* POPUP BY PILLOW THEMES / CARA / PT / 2019 */