@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;400&display=swap');

/* General styles */
body {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1145%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='rgba(4%2c 44%2c 70%2c 1)'%3e%3c/rect%3e%3cpath d='M819 870L818 1478' stroke-width='8' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M177 59L176 -303' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M381 446L380 -318' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1817 169L1816 -149' stroke-width='8' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1455 693L1454 -62' stroke-width='6' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1727 577L1726 1086' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1263 121L1262 774' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M400 418L399 1072' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M586 834L585 1424' stroke-width='8' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M572 738L571 1211' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1298 155L1297 494' stroke-width='6' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1513 153L1512 -412' stroke-width='8' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1469 312L1468 -293' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1082 517L1081 831' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M502 422L501 1193' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M640 763L639 32' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M35 900L34 1656' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1495 215L1494 820' stroke-width='8' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M888 852L887 496' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M883 630L882 273' stroke-width='6' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1476 382L1475 1120' stroke-width='8' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M933 866L932 1365' stroke-width='8' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1470 858L1469 120' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1475 800L1474 471' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1789 223L1788 -255' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1297 314L1296 1034' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1000 1073L999 440' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M325 949L324 238' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1111 582L1110 1045' stroke-width='8' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M702 462L701 1264' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M826 974L825 1775' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1748 429L1747 1061' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1140 2L1139 -336' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M188 1075L187 610' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M994 196L993 659' stroke-width='6' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M622 226L621 730' stroke-width='6' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M52 604L51 -122' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1201 111L1200 417' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M874 5L873 284' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M14 107L13 828' stroke-width='8' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1572 652L1571 49' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1065 564L1064 -42' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M465 339L464 -350' stroke-width='10' stroke='url(%23SvgjsLinearGradient1146)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M938 612L937 1253' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M798 777L797 150' stroke-width='6' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M968 964L967 218' stroke-width='10' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1419 374L1418 -193' stroke-width='8' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M51 747L50 209' stroke-width='8' stroke='url(%23SvgjsLinearGradient1147)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1145'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1146'%3e%3cstop stop-color='rgba(219%2c 40%2c 63%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(219%2c 40%2c 63%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient1147'%3e%3cstop stop-color='rgba(219%2c 40%2c 63%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(219%2c 40%2c 63%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    font-family: 'manrope', sans-serif;
    margin: 0;
    padding: 0;
	background-repeat: no-repeat;
	background-size: cover;
}

h1 {
    text-align: center;
    margin: 20px 0;
    font-family: 'Manrope', sans-serif;
	color: white;
	text-shadow: 2px 2px black;
}

/* Template container styles */
#template-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

/* Template styles */
.template {
    width: 30%;
    height: 30%;
    margin: 10px;
    padding: 20px;
    text-align: center;
    font-family: 'manrope', sans-serif;
    background: rgba(139, 23, 38, 0.78);
    border-radius: 5px;
    box-shadow: 2px 2px 5px #ccc;
    transition: background 0.3s ease;
}

/* Hover effect for template */
.template:hover {
    background: #b51e31;
    cursor: pointer;
}

.template.expanded {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    overflow: visible;
    height: auto;
    z-index: 100;
    background: #F3F5F6;
    padding: 20px;
    transition: all 0.3s ease;
    font-family: 'manrope', sans-serif;
}

.template.expanded h2 {
    color: black;
	text-shadow: none;
}

.template.expanded p {
    color: black;
}

.template h2 {
    margin: 0;
	color: white;
	text-shadow: 2px 2px black;
}

.template p {
    margin: 10px 0;
	color: white;
}

/* Copy button styles */
.copy-btn {
 width: 130px;
 height: 40px;
 font-size: 1.1em;
 cursor: pointer;
 background-color: #171717;
 color: #fff;
 border: none;
 border-radius: 5px;
 transition: all .4s;
}

.copy-btn:hover {
 border-radius: 5px;
 transform: translateY(-10px);
 box-shadow: 0 7px 0 -2px #f85959,
  0 15px 0 -4px #39a2db,
  0 16px 10px -3px #39a2db;
}

.copy-btn:active {
 transition: all 0.2s;
 transform: translateY(-5px);
 box-shadow: 0 2px 0 -2px #f85959,
  0 8px 0 -4px #39a2db,
  0 12px 10px -3px #39a2db;
}

.search {
background-color: #383838;
border: 1ex solid none;
border-top-width: 1.7em;
margin: center;
padding: center;
color: #383838;
word-wrap: break-word;
outline: 7px solid #383838;
height: 30px;
font-size: 17px;
text-align: center;
transition: all 1s;
max-width: 190px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
position: absolute;
top: 0;
right: 0;
margin-bottom: 10px;
}

.search:hover {
 border-top-width: 0.2em;
 background-color: #f1e8e8;
}

.search:focus {
 border-top-width: 0.2em;
 background-color: #f1e8e8;
}