Рождественская магия в коде: создайте открытку своими руками на HTML и CSS!

Время праздников — это отличная возможность добавить тепла и творчества в свои проекты. Что может быть лучше, чем рождественская открытка, созданная своими руками с помощью HTML и CSS?

Эта праздничная карточка сочетает в себе элегантный дизайн, минимализм и анимацию. Она прекрасно подходит для поздравления коллег, друзей или клиентов, если вы хотите удивить их чем-то нестандартным.

Особенности:

Анимация: Плавные движения элементов создают ощущение живой открытки.
Универсальность: Легко адаптируется для использования в письмах, на сайтах или в соцсетях.
Минимализм: Чистый и стильный дизайн, который фокусируется на самом важном — тёплом поздравлении.
Простота реализации: Код написан так, чтобы даже начинающий разработчик мог разобраться и создать свою версию.

Эта рождественская открытка станет прекрасным дополнением к любому веб-проекту, наполнив его атмосферой праздника и радости.

See the Pen [cpc] Happy Christmas! by Chris Bolson (@cbolson) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div class="envelope">
 
 <div class="envelope-inner">
 
 <div class="envelope-front">
 
 <div class="postage-stamp ">
 <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" xml:space="preserve">
 <path d="M253.98,257.652c0-8.568,8.568-17.748,17.136-18.361c-1.224-4.895-1.224-10.402-0.611-15.299 c-3.061,0.611-7.345,0-10.404-1.225c-6.12-3.061-9.792-9.18-9.792-15.912c0-9.18,7.956-20.807,17.136-21.42 c0-2.447,0.612-4.896,0.612-7.344s0.612-4.896,0.612-7.344c-7.956,3.061-17.137-4.283-18.973-12.24 c-1.836-9.792,4.284-17.748,12.853-21.42c-0.612-1.836-0.612-4.284-0.612-6.12c0-3.672,0-7.344,0.612-11.016 c-3.061,0-6.12-1.224-9.181-3.06c-4.283-3.06-6.731-7.344-7.344-12.24c0-0.612,0-1.836,0-2.448c0-9.792,8.568-15.3,17.136-16.524 c-0.611-3.672,0-7.956,0-11.628c0-3.06,0-6.12,0.612-9.18c-7.956,2.448-18.36-4.284-20.808-12.24 c-2.448-7.956,1.836-17.748,9.792-20.808c-1.225-3.06-1.225-6.732-1.225-10.404c0-3.06-0.611-6.732-0.611-9.792 c-9.792,12.24-39.168,4.284-40.393-9.18C205.632,3.672,200.124,1.836,195.84,0c0.611,9.18-7.956,17.748-17.137,17.748 c-9.18,0-16.523-6.732-18.359-15.3c-2.448,0-4.896,0-6.732-0.612c-2.448,0-4.896-0.612-7.956-1.224c0,4.284-2.448,9.18-5.508,12.24 c-3.672,3.672-9.18,6.12-14.076,6.12c-1.224,0-2.448,0-3.672-0.612c-5.508-1.224-12.24-4.896-14.076-11.016 c0-0.612,0-0.612,0-1.224c-4.896,0.612-11.016-0.612-15.912-2.448c-0.612,8.568-9.18,15.3-18.36,14.076 c-4.284-0.612-9.792-3.06-11.016-7.344c0-0.612,0-0.612,0-1.224c0,0,0,0.612-0.612,0.612c-3.672,3.06-8.568,2.448-12.852,1.836 c-1.224,0-2.448,0-3.672,0c1.224,0.612,1.836,1.836,2.448,2.448c3.672,4.896,5.508,11.016,3.06,17.136 c-3.06,8.568-14.076,12.24-22.032,9.18c0,1.224-0.612,1.836-0.612,3.06c-0.612,3.672-0.612,6.732-0.612,10.404 c9.792-1.224,22.644,1.224,23.868,12.852c0.612,5.508-3.06,11.016-8.568,12.852c-2.448,1.224-5.508,1.224-7.956,1.224 c-0.612,0-1.224,0-2.448-0.612c0,1.836,0,4.284,0,6.12c0,3.672,0.612,7.344-0.612,11.016l0,0c0.612,0,0.612-0.612,1.224-0.612 c11.628-3.672,23.256,7.344,19.584,18.972c-1.224,4.896-5.508,8.568-9.792,10.404c-3.672,1.224-6.732,1.836-10.404,1.836 c-0.612,1.836-0.612,3.06-1.224,4.896c-0.612,2.448-0.612,5.508-0.612,7.956c8.568-4.284,22.032-1.836,22.644,9.18 c0.612,9.179-10.404,24.48-21.42,23.869c0,1.223,0,3.059,0,4.283c0,2.447-0.612,4.896-0.612,7.957 c2.448-1.225,6.12-1.836,9.18-1.836c6.12,0.611,11.016,4.895,12.24,11.016c3.672,13.463-9.18,22.643-20.808,20.807 c-0.612,4.285-1.224,9.793-1.836,13.465c5.508-4.283,17.748-3.061,21.42,4.283c8.568,15.912-8.568,25.705-22.032,28.152 c0,4.896,0,10.404-1.224,15.301c7.344-4.285,18.36-4.285,25.704,0c7.956,4.896,11.628,13.463,11.628,22.031 c3.672-0.611,7.344-1.223,11.016-1.223c0-8.568,9.18-20.197,16.524-20.809c4.896-0.613,9.792,2.447,11.628,7.344 c1.836,4.283,1.224,9.791,3.06,14.076c0.612,0,1.224-0.611,1.836-0.611c3.06,0,4.896-0.613,7.344-1.838 c-0.612-1.836,0-3.672,0.612-6.119c1.224-4.896,5.508-9.18,10.404-10.404c11.016-3.061,19.584,4.896,22.645,14.688 c3.672-0.611,7.344-0.611,11.628-0.611c1.836,0,3.672,0,5.508,0.611c-2.448-8.566,4.284-18.971,13.464-19.584 c0.612,0,1.224,0,1.836,0c5.508,0,10.404,3.061,13.464,6.732c1.836,2.449,3.672,5.508,4.284,8.568c1.224,0,2.448,0,4.284,0 s3.672,0,5.508,0c1.224-7.955,9.792-14.076,17.748-14.688c7.956-0.613,15.912,3.672,19.584,11.016 c5.508-3.672,13.464-6.119,20.808-6.119c0-2.449,0-4.896,0-7.957C261.936,273.564,253.98,264.996,253.98,257.652z M243.576,266.221 c0,4.283-6.12,4.283-6.12,0l0,0c-3.672-77.725-4.896-155.449-9.792-233.173c-0.611,0.612-1.224,0.612-2.447,0.612 c-52.633,0-105.264,1.836-157.896,1.836c0,0,0,0-0.612,0c6.732,15.3,3.06,41.616,3.06,57.528c0,17.748,0,35.496,0,53.856 c0,39.78,0,79.56-1.224,119.341c0,1.836-1.224,3.059-2.448,3.672c50.796-12.854,115.668-14.076,167.688-6.732 c1.836,0.611,3.061,1.836,3.061,3.672s-1.225,4.283-3.672,4.896c-15.912,0.611-31.824,0.611-47.736,0.611 c-12.852,0-25.704,0-39.168,0.611c-26.316,1.225-53.856,4.285-79.56,0.613c-1.836,0-1.836-3.061,0-3.672 c-2.448,1.223-6.732,0-6.12-3.672c1.224-76.5-1.836-154.225,3.06-230.725c0-2.448,0-4.896,0.612-7.344c0-3.06,4.284-3.06,4.284,0 c0,0.612,0,1.224,0,1.224c19.584-2.448,39.168-3.672,59.364-4.896c33.048-1.224,66.097-1.224,98.532-0.612 c1.224,0,2.448,0.612,3.06,1.224c1.837-2.448,6.732-1.836,7.345,2.448c2.447,25.704,4.896,51.408,6.12,77.112 C244.8,158.508,246.024,212.977,243.576,266.221z M152.388,192.168c-3.06,1.836-6.732-0.611-7.344-3.061l0,0c0,0,0,0-0.612-0.611 c-30.6-7.957-63.036-45.9-55.692-77.112c3.06-12.852,15.3-26.316,29.988-22.032c12.852,3.672,22.032,19.584,28.152,32.436 c6.12-15.3,16.524-34.272,30.6-40.392c11.628-4.896,22.644,0,27.54,11.628C219.708,127.908,178.704,174.42,152.388,192.168z"></path>
 </svg>
 </div>
 
 <div class="address">
 <p><span>To:</span> <span>All CodePen developers</span></p>
 <p><span>From:</span> <span>Chris</span></p>
 </div>
 
 </div>
 
 <div class="envelope-back">
 <div class="top-fold"></div>
 
 <div class="letter">
 
 <svg class="snowman" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet" fill="#000000">
 <circle fill="#E1E8ED" cx="18" cy="26" r="10"></circle>
 <path fill="#E1E8ED" d="M12 11a6 6 0 1 1 12 0a6 6 0 0 1-12 0z"></path>
 <path fill="#414042" d="M23 6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4z"></path>
 <path fill="#231F20" d="M25 7a1 1 0 0 1-1 1H12a1 1 0 0 1 0-2h12a1 1 0 0 1 1 1z"></path>
 <path fill="#DD2E44" d="M22.5 15h-9a1.495 1.495 0 0 0-.5 2.908V25a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-7h6.5a1.5 1.5 0 1 0 0-3z"></path>
 <path fill="#414042" d="M19 24a1 1 0 1 1-1.998.002A1 1 0 0 1 19 24zm0 5a1 1 0 1 1-1.998.002A1 1 0 0 1 19 29z"></path>
 <path fill="#F4900C" d="M19 12a1 1 0 1 1-1.998.002A1 1 0 0 1 19 12z"></path>
 <path fill="#414042" d="M16 10a1 1 0 1 1-2 0a1 1 0 0 1 2 0zm6 0a1 1 0 1 1-2 0a1 1 0 1 1 2 0z"></path>
 <path fill="#FFAC33" d="M10.394 20.081l-3.452-1.479l-.547-2.866a1 1 0 0 0-1.965.375l.294 1.54l-1.33-.57a.999.999 0 1 0-.788 1.838l.743.318l-1.056 1.056a.999.999 0 1 0 1.414 1.414l1.621-1.621l4.278 1.833a.999.999 0 1 0 .788-1.838zm22.922-3.03l-1.465-.488l.855-.855a.999.999 0 1 0-1.414-1.414l-.751.751l-.572-2.287a.999.999 0 1 0-1.939.486l.862 3.45l-3.6 3.6a.999.999 0 1 0 1.415 1.413l3.563-3.563l2.413.805a.999.999 0 1 0 .633-1.898z"></path>
 <path d="M10.08 2.113a.5.5 0 0 0-.693-.138l-.887.591V1.5a.5.5 0 0 0-1 0v1.066l-.887-.591a.5.5 0 1 0-.554.831l1.04.694l-1.04.693a.5.5 0 0 0 .555.833l.886-.592V5.5a.5.5 0 0 0 1 0V4.434l.887.591a.5.5 0 1 0 .555-.832L8.901 3.5l1.04-.693a.5.5 0 0 0 .139-.694zm-4 7a.5.5 0 0 0-.693-.138l-.887.591V8.5a.5.5 0 0 0-1 0v1.066l-.887-.591a.5.5 0 1 0-.554.831l1.04.693l-1.04.693a.5.5 0 1 0 .555.832l.886-.59V12.5a.5.5 0 0 0 1 0v-1.066l.887.591a.5.5 0 1 0 .555-.832L4.901 10.5l1.04-.693a.5.5 0 0 0 .139-.694zm0 17a.5.5 0 0 0-.693-.139l-.887.592V25.5a.5.5 0 0 0-1 0v1.066l-.887-.591a.5.5 0 1 0-.554.832l1.04.693l-1.04.693a.5.5 0 1 0 .555.832l.886-.591V29.5a.5.5 0 0 0 1 0v-1.066l.887.591a.5.5 0 1 0 .555-.832L4.901 27.5l1.04-.693a.5.5 0 0 0 .139-.694zM33.901 9.5l1.04-.693a.5.5 0 1 0-.554-.832l-.887.591V7.5a.5.5 0 0 0-1 0v1.066l-.887-.591a.5.5 0 1 0-.554.832l1.04.693l-1.04.693a.5.5 0 1 0 .555.832l.887-.591V11.5a.5.5 0 0 0 1 0v-1.066l.887.591a.5.5 0 1 0 .555-.832L33.901 9.5zm.179 13.613a.5.5 0 0 0-.693-.139l-.887.592V22.5a.5.5 0 0 0-1 0v1.066l-.887-.591a.5.5 0 1 0-.554.832l1.04.693l-1.04.693a.5.5 0 1 0 .555.832l.887-.591V26.5a.5.5 0 0 0 1 0v-1.066l.887.591a.5.5 0 1 0 .555-.832l-1.04-.693l1.04-.693a.502.502 0 0 0 .137-.694zm-4.139-18.92l-1.04-.693l1.04-.693a.5.5 0 1 0-.554-.832l-.887.591V1.5a.5.5 0 0 0-1 0v1.066l-.887-.591a.5.5 0 1 0-.554.832l1.04.693l-1.04.693a.5.5 0 1 0 .555.832l.886-.591V5.5a.5.5 0 0 0 1 0V4.434l.887.591a.5.5 0 1 0 .554-.832z" fill="#88C9F9"></path>
 </svg>
 
 <p>Wishing all my fellow coders a Very Merry Christmas!</p>
 
 <svg class="bells" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="currentColor">
 
 <path d="M256.808,153.327c18.348,0,33.218-14.87,33.218-33.218c0-18.355-14.87-33.225-33.218-33.225 c-18.355,0-33.225,14.87-33.225,33.225C223.583,138.457,238.453,153.327,256.808,153.327z">
 </path>
 <path d="M118.284,145.153c18.399,3.065,97.11-3.065,97.11-3.065s-19.42-25.566,3.073-52.138 c0,0-28.551-25.037-54.182-44.98c-9.196-7.159-22.16-2.384-28.624,5.109c-16.239,18.826-33.283,62.349-34.754,67.472 C98.857,124.711,99.885,142.088,118.284,145.153z">
 </path>
 <path d="M295.403,142.088c0,0,78.718,6.13,97.117,3.065s19.428-20.442,17.377-27.602 c-1.472-5.123-18.515-48.646-34.754-67.472c-6.464-7.492-19.428-12.268-28.624-5.109c-25.631,19.942-54.182,44.98-54.182,44.98 C314.83,116.522,295.403,142.088,295.403,142.088z">
 </path>
 <path d="M223.141,426.273c0-1.224,0-2.515,0.13-3.674c-47.175-13.247-86.422-33.37-117.958-55.885 c-38.515-27.536-65.444-58.696-81.082-85.747c-6.688,4.42-13.5,10.862-20.674,21.102C1.782,304.641,0,308.322,0,313.655 c0,1.602,0.131,3.384,0.551,5.282c0.928,4.168,2.645,9.812,9.45,19.255c6.811,9.391,18.71,22.203,39.196,39.319 c3.123,2.58,24.406,19.746,41.522,31.956c5.703,4.051,11.036,7.551,14.725,9.689l0.608,0.37c3.558,2.392,9.08,5.58,15.218,8.892 c6.189,3.384,13.058,6.869,19.616,10.123c13.072,6.5,24.972,11.964,27.363,13.066c34.841,15.456,53.979,18.949,64.464,18.949 c1.957,0,3.616-0.116,5.095-0.305c-4.849-6.565-8.284-13.188-10.559-19.623C224.184,442.042,223.141,433.759,223.141,426.273z">
 </path>
 <path d="M113.458,352.7c29.928,21.406,67.226,40.544,112.125,53.363c0.608-4.239,1.405-7.913,1.899-11.044 c1.166-6.87,2.21-13.131,2.21-20.552c0-9.565-1.717-21.398-8.102-38.638c-10.674-28.645-16.13-55.015-16.13-78.755 c0-19.819,3.862-37.849,11.776-53.428l0.058-0.181l0.13-0.123c5.884-10.486,13.246-18.71,20.79-25.087 c-7.174-3.008-15.333-5.276-24.406-5.769h-0.928c-15.45,0-31.826,4.478-49.008,13.863c-17.174,9.384-35.08,23.616-53.051,42.631 c-12.21,12.877-22.819,20.978-32.573,26.312c-9.754,5.34-18.464,7.913-26.131,10.188c-5.514,1.587-10.79,3.182-16.065,5.515 C50.646,296.206,76.407,326.192,113.458,352.7z">
 </path>
 <path d="M511.935,316.851c-3.246-0.92-8.094-1.471-13.92-1.471c-14.783,0-35.95,3.434-58.95,10.79 c-0.304,0.064-0.551,0.188-0.855,0.311c-0.949,0.305-1.942,0.711-2.913,1.029c1.022,0.964,2,1.978,2.892,3.066 c5.275,6.131,8.34,14.036,8.34,22.688c0,19.566-15.826,35.392-35.392,35.392c-17.602,0-32.204-12.885-34.842-29.812 c-0.246-1.218-0.355-2.508-0.42-3.797c-2.486,1.507-4.971,3.116-7.406,4.739l-0.123,0.058 c-24.044,15.464-45.878,34.414-62.69,52.632c-16.74,18.095-28.58,35.631-32.566,46.921c-1.109,3.247-1.594,5.891-1.594,7.544 c0,0.493,0.065,0.92,0.123,1.224v0.066c2.087,0.427,4.659,0.732,8.16,0.797c10.486,0,29.624-3.493,64.399-18.95 c3.681-1.659,28.522-13.188,47.045-23.189c6.137-3.319,11.659-6.5,15.217-8.891l0.305-0.189l0.246-0.181 c3.739-2.145,9.072-5.646,14.782-9.696c5.703-4.108,11.9-8.71,17.667-13.123c11.587-8.892,21.768-17.109,23.797-18.834 c20.544-17.109,32.443-29.928,39.189-39.312c6.812-9.449,8.587-15.094,9.507-19.261c0.065-0.181,0.065-0.362,0.065-0.55H511.935z">
 </path>
 <path d="M247.786,382.569c3.065-4.109,6.377-8.283,10-12.514c18.516-21.899,43.972-45.392,72.987-64.284l0.065,0.065 c23.855-16.254,49.921-27.906,74.095-35.573c14.102-4.478,27.53-7.609,39.682-9.515c-3.747-1.405-7.725-3.181-11.906-5.456 c-9.746-5.334-20.356-13.435-32.566-26.312c-17.972-19.015-35.884-33.247-53.059-42.631c-17.174-9.384-33.552-13.863-49.001-13.863 h-0.862c-14.602,0.797-26.928,6.138-36.37,11.964l-0.246,0.116c-1.413,0.87-2.884,1.841-4.297,2.892 c-0.116,0.058-0.188,0.181-0.304,0.239c-0.123,0.066-0.304,0.188-0.492,0.312c-7.971,5.704-16.073,13.559-22.015,24.291 c-6.319,12.514-9.638,27.413-9.638,44.776c0,20.914,4.906,45.261,14.97,72.312c6.993,18.834,9.32,33.124,9.32,45.08 C248.149,377.352,248.033,379.99,247.786,382.569z">
 </path>
 <path d="M277.388,427.382c3.616-4.913,7.602-10,12.08-15.21c18.34-21.283,43.551-44.167,72.189-62.566 c0,0,0.065,0,0.065-0.059c5.029-3.376,10.181-6.507,15.334-9.507c16.377-9.449,33.182-16.935,49.501-22.638 c0.058,0,0.058,0,0.058,0c2.95-1.043,5.891-2.021,8.775-2.949c23.979-7.595,46.058-11.341,62.624-11.341 c4.717,0,9.014,0.304,12.877,0.979c-0.609-1.348-1.29-2.573-1.957-3.551c-7.55-10.797-14.724-17.363-21.717-21.776 c-0.732-0.55-1.53-1.043-2.269-1.471c-1.166-0.681-2.398-1.348-3.558-1.898c-2.949-0.492-6.442-0.739-10.427-0.739 c-15.029,0-36.436,3.435-59.617,10.913c-23.247,7.304-48.276,18.645-70.972,34.044h-0.058l-0.058,0.058 c-24.232,15.703-46.247,35.145-63.182,53.733c-13.428,14.725-23.674,29.138-29.312,40.239c-0.928,1.783-1.725,3.493-2.334,5.088 c-0.123,1.108-0.188,2.268-0.246,3.377c-0.065,0.855-0.065,1.782-0.065,2.637v0.979c0.123,5.514,0.92,11.225,3.008,17.174 c2.144,6.073,5.768,12.514,11.587,19.261c0.377-2.21,0.985-4.478,1.848-6.87c1.472-4.051,3.558-8.398,6.138-13 c1.956-3.5,4.225-7.116,6.797-10.805C275.424,430.135,276.402,428.729,277.388,427.382z">
 </path>
 
 </svg>
 </div>
 </div>
 </div>
 
</div>

        CSS
 
  
  Показать код CSS
  
         
@import url(https://fonts.bunny.net/css?family=nothing-you-could-do:400);
 
*,
::before,
::after {
 box-sizing: border-box;
}
body {
 font-family: "Nothing You Could Do", handwriting;
 
 background: radial-gradient(#005f8f, #001f3f, black);
 color: #4a4a4a;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 padding: 1rem;
}
 
.envelope {
 --duration: 1000ms;
 
 --shadow-width: calc(var(--envelope-width) * 0.85);
 --shadow-blur: 15px;
 
 --envelope-width: 300px;
 --envelope-height: 175px;
 --envelope-clr-bg: #d14d44;
 --envelope-clr-bg-side: #c24e46;
 --envelope-clr-bg-bottom: #e15349;
 --envelope-clr-bg-top: #d14d44;
 --envelope-clr-txt: #fff;
 
 /*--envelope-transform: rotateY(0deg);*/
 --envelope-transform-hover: rotateY(180deg);
 --evelope-rotate-delay: calc(var(--duration) / 1);
 --evelope-rotate-delay-hover: 0ms;
 
 --letter-clr-bg: #fff;
 --letter-clr-text: green;
 --letter-font-size: 1rem;
 --letter-delay: 0ms;
 --letter-delay-hover: calc(
 var(--duration) * 1.25
 ); /* delay before revealing card */
 
 --letter-height: calc(var(--envelope-height) - 2rem);
 --letter-height-hover: calc(var(--envelope-height) * 1.75);
 
 --fold-rotate: rotateX(0deg);
 /*--fold-zindex: 10;*/
 --fold-zindex-hover: 0;
 --fold-rotate-hover: rotateX(180deg);
 --fold-delay: calc(var(--duration) / 2); /* delay before opening top section */
 --fold-delay-hover: calc(var(--duration) * .75);
 
 --front-font-size: 1rem;
 --snowman-width: 50px;
 --bells-width: 30px;
 
 position: relative;
 height: var(--envelope-height);
 width: var(--envelope-width);
 perspective: 1000px;
 cursor: pointer;
}
 
@media (min-width: 720px) {
 .envelope {
 --envelope-width: 600px;
 --envelope-height: 350px;
 --letter-font-size: 1.6rem;
 --snowman-width: 130px;
 --bells-width: 60px;
 --front-font-size: 1.25rem;
 }
}
/* shadow */
.envelope::after {
 content: "";
 position: absolute;
 top: 110%;
 left: 50%;
 width: var(--shadow-width);
 height: 40px;
 transition: var(--duration) ease-in-out;
 transition-delay: var(--evelope-rotate-delay);
 transform: var(--shadow-transform);
 translate: -50% 0;
 border-radius: 50%;
 background: rgba(56, 6, 6, 0.4);
 filter: blur(var(--shadow-blur));
}
 
.envelope:hover {
 --envelope-transform: var(--envelope-transform-hover, 0deg);
 --evelope-rotate-delay: var(--evelope-rotate-delay-hover);
 --shadow-transform: rotateY(180deg);
 --fold-rotate: var(--fold-rotate-hover);
 --fold-delay: var(--fold-delay-hover);
 --fold-zindex: var(--fold-zindex-hover);
 --letter-height: var(--letter-height-hover);
 --letter-delay: var(--letter-delay-hover);
}
 
.envelope-inner {
 position: relative;
 width: 100%;
 height: 100%;
 
 transition: var(--duration) ease-in-out;
 transition-delay: var(--evelope-rotate-delay);
 transform-style: preserve-3d;
 transform: var(--envelope-transform);
 display: grid;
}
 
.envelope-front,
.envelope-back {
 position: relative;
 grid-area: 1/1;
 width: 100%;
 height: 100%;
 background-color: var(--envelope-clr-bg);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 perspective: 1000px;
 isolation: isolate;
}
 
.envelope-front {
 color: var(--envelope-clr-txt);
 display: grid;
 place-content: center;
}
.envelope-front .postage-stamp {
 position: absolute;
 top: 1em;
 right: 0.5em;
 width: 15%;
}
.envelope-front .address {
 text-align: left;
 font-size: var(--front-font-size);
}
.envelope-front .address > p > span:first-child {
 font-family: system-ui;
 font-weight: 200;
}
.envelope-front .address > p > span:last-of-type {
 font-weight: 800;
}
 
.envelope-back {
 /* start with back rotated*/
 transform: rotateY(180deg);
}
/* back folds */
.envelope-back::after {
 content: "";
 position: absolute;
 inset: 0;
 z-index: 3;
 background-image: conic-gradient(
 transparent 60deg,
 var(--envelope-clr-bg-side) 60deg 120deg,
 var(--envelope-clr-bg-bottom) 120deg 240deg,
 var(--envelope-clr-bg-side) 240deg 300deg,
 transparent 300deg
 );
}
/* top fold which folds up on hover */
.envelope-back .top-fold {
 position: absolute;
 inset: 0;
 z-index: var(--fold-zindex, 10);
 background-color: var(--envelope-clr-bg-top);
 clip-path: polygon(0% 0%, 50% 55%, 100% 0%);
 
 transform: var(--fold-rotate);
 transform-origin: top;
 transition: var(--duration) ease-in-out;
 transition-delay: var(--fold-delay);
}
 
.letter {
 position: absolute;
 bottom: 5px;
 left: 50%;
 width: 90%;
 height: var(--letter-height);
 font-size: var(--letter-font-size);
 transform: translateX(-50%);
 background: var(--letter-clr-bg);
 z-index: 2;
 padding: 2em 3em;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 align-items: center;
 text-align: center;
 transition: var(--duration) ease-in-out;
 transition-delay: var(--letter-delay);
 overflow: hidden;
}
.letter > svg.snowman {
 width: var(--snowman-width);
}
.letter svg.bells {
 width: var(--bells-width);
 color: orange;
}
.letter p {
 margin: 0;
 font-weight: bold;
 width: 32ch;
 color: var(--letter-clr-text);
}