@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Bree+Serif&family=Great+Vibes&family=Playball&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
/* 
  font-family: "Cormorant Garamond", serif;
  font-family: "Playfair Display", serif;
  font-family: "Playball", cursive;
  font-family: "Crimson Pro", serif;
  font-family: "Great Vibes", cursive; 
  font-family: "Bree Serif", serif;
  */

:root {
  --bg-color: #000000;
  --bg-second-color: black;
  --main-color: #d4aa6e;
  --text-color: #ffffff;
}

.namatamu {
color: #f0a;
font-family:sans-serif;
font-size: 32rem;
color: var(--main-color);
margin-bottom: -50px;
margin-top: 20px;
}


.border-ucapan {
background-image: url('../gmb/bg-ultah.jpg');
background-repeat: repeat;
background-size: contain;
width: 100%;
height: auto -webkit-fill-available;
display: block;
padding: 13px;
margin-top: -20px;
border-radius: 20px;
border: solid 2px #2c839e;
}

/* Mendefinisikan class CSS dengan nama "hover-button" */      
.hover-button:hover {
color: #000;
font-family:sans-serif;
font-size: 1.4rem;
}

.container-ucapan {
color: #000;
height: 100%;
font-family:sans-serif;
margin-top: 22px;
border-radius: 50px;
}

.container-ucapan-nama {
color: #000;
border-radius: 15px;
height: 70%;
width: 100%;
font-family:sans-serif;
font-size: 2rem;
}

.container-ucapan1 {
color: #000000;
border-radius: 15px;
width: 100%;
font-family:sans-serif;
font-size: 1rem;
margin-top: 4px;
padding: 1px;
margin-bottom: -1px;
margin-top: 15px;
}

.container-ucapan-doa {
color: #000;
border-radius: 5px;
border: solid 2px #c9c0c0;
width: 100%;
font-style: italic!important;
font-size: 1rem;
padding: 8px;
margin-bottom: -8px; 
box-shadow: -2px 2px 2px #0000002e, 0 0px 0px #eae6e6;
}

.container-kirim-ucapan {
color: #000000;
background-color: rgb(146 227 234);
border-radius: 10px;
border: solid 1px #878787;
width: 60%;
position:absolute;
justify-self: center;
text-align: center;
left:0;
right:0;
font-family:sans-serif;
font-size: 1.5rem;
box-shadow: -3px 3px 2px #0000002e, 0 0px 0px #eae6e6;
}

.container-kirim-ucapan:hover {
color: #fff;
background-color: #118ff7;
border-radius: 10px;
border: solid 1px #878787;
width: 60%;
position:absolute;
justify-self: center;
text-align: center;
left:0;
right:0;
font-family:sans-serif;
font-size: 1.5rem;
position: center;
box-shadow: -3px 3px 2px #0000002e, 0 0px 0px #eae6e6;
}


.container-tabel-ucapan-nama {
color: #3a7fbc;
background-color: rgb(255 255 255 / 70%);
border: solid 2px #46999fe3;
border-radius: 10px;
font-family:sans-serif;
height: 100%;
padding-inline: 6px;
display: grid;
margin-bottom: 4px;  
font-size: 0.8rem;
word-wrap: anywhere;
margin-top: -15px;
}

.container-hadir {
color: #fff;
font-family:sans-serif;
font-size: 1.5rem;
}

.status-kehadiran{
font-style: normal;
font-family: arial;
display: inline-block;
padding: .2em .8em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.7rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: #fffff8;
background-color: #513fc0;
border-color: #020a23;
}

.container-date {
font-size: 1.8vh;
justify-content: right;
top:0;
bottom: 0;
left: 0;
color: #000000;
display: flex;
position: relative;
}

.container-nama {
color: #000;
font-family:sans-serif;
font-size: 1rem;
text-align: center;
}
              
.container-status {
max-width: 100%;
width: 100%;
color: #000000;
font-family:sans-serif;
font-size: 0.8rem;
margin-bottom: 5px;
padding: 13px;
background: #5b505024;
border-radius: 10px;

text-align: center;
word-break: break-word!important;
justify-content:center;
}

.pagination {
color: #000;
font-family: Arial;
font-size: 1.2rem;
text-align: center;
align-self: center;
border-radius: 5px;
justify-content: center;
margin-block: 1px;
padding: 4px 15px;
} 

.page-link {
color: #3600ff;
font-family: Arial;
padding: 0px 5px;
margin-left: 1px;
border: solid 3px #bbbbbb9e;
}

.page-link:visited {
color: #312e99;
font-family: Arial;
padding: 1px 1px;
margin-left: 4px;
border: solid 3px #bbbbbb9e;
}

.page-item {
font-family:sans-serif;
padding: 0px 5px;
}

.btn-close-rsvp {
text-align: center;
word-wrap:break-word;
z-index: 1;
font-family: sans-serif;
text-decoration:none;
font-weight:700;
background:#93e5e9;
letter-spacing:.5px;
padding:8px 15px;
height: 1px;
padding-top: 8px;
margin-top: -30px;
color:#fff;
font-size:2vh;
border-radius: 25px;
transition:all 0.3s ease-out;
color:#000000;
border: solid 2px #2c839e;
text-decoration: none;
}