| Themenübersicht (Neueste zuerst) |
| Geschrieben von an Gaoth - 17.03.2026, 11:22 |
|
Black Unicorns
a supernatural fairy tale
![]() ![]()
<style>/* Hauptcontainer */#blackunicorns-daten {width: 500px;height: 600px;background-color: #141A18;box-sizing: border-box;position: relative;margin: auto;overflow: hidden;}/* Textbox */#blackunicorns-daten-content {width: 350px;height: 600px;overflow: hidden;box-sizing: border-box;padding: 0;position: relative;color: #BFC8C1;font-family: var(--inter-regular);font-size: 12px;line-height: 150%;text-align: justify;border-bottom: 1px #C9B68D solid;}/* Bilder */.blackunicorns-daten-bilder {width: 150px;height: 600px;float: right;position: relative;filter: grayscale(30%);}.blackunicorns-daten-bilder::before {content: "";display: block;background-image: linear-gradient(rgba(46, 74, 63, 0.6), rgba(79, 111, 96, 0.6));background-image: -moz-linear-gradient(rgba(46, 74, 63, 0.6), rgba(79, 111, 96, 0.6));background-image: -webkit-linear-gradient(rgba(46, 74, 63, 0.6), rgba(79, 111, 96, 0.6));background-image: -o-linear-gradient(rgba(46, 74, 63, 0.6), rgba(79, 111, 96, 0.6));position: absolute;top: 0;bottom: 0;left: 0;right: 0;}/* Überschrift */#blackunicorns-daten #blackunicorns-daten-titel {font-family: var(--cinzel-black);font-size: 60px;text-align: center;color: #C9B68D;position: absolute;z-index: 10;transition: 3s;letter-spacing: 3px;top: 270px;transform: rotate(-90deg);left: -65px;}#blackunicorns-daten:hover #blackunicorns-daten-titel {left: 37px;top: 15px;transition: 3s;color: #C9B68D;opacity: 1;transform: rotate(0deg);font-size: 30px;}/* Untertitel */#blackunicorns-daten #blackunicorns-daten-untertitel {width: 500px;font-family: var(--inter-regular);font-style:italic;font-size: 16px;text-transform: uppercase;color: #BFC8C1;position: absolute;z-index: 10;transition: 3s;letter-spacing: 2px;left: -75px;top: 250px;transform: rotate(-90deg);}#blackunicorns-daten:hover #blackunicorns-daten-untertitel {width: 300px;text-align: center;left: 28px;top: 55px;transition: 3s;color: #A5B4A7;opacity: 1;transform: rotate(0deg);font-size: 10px;letter-spacing: 1px;}/* Hover-Hintergrund */#blackunicorns-daten #blackunicorns-daten-bg {position: absolute;width: 350px;height: 600px;background-color: #4F6F60;box-sizing: border-box;left: 0px;transition: 2s;z-index: 5;}#blackunicorns-daten:hover #blackunicorns-daten-bg {width: 20px;height: 600px;background-color: #4F6F60;left: 340px;transition: 2s;}/* START TABS */#blackunicorns-daten-content .blackunicorns-daten-tabs input[type=radio] {position: absolute;display: none;}#blackunicorns-daten-content .blackunicorns-daten-tabs {float: none;list-style: none;position: relative;padding: 0;margin: auto;height: 600px;} /* Auswahl-Buttons */#blackunicorns-daten-content .blackunicorns-daten-tabs label {width: 30px;height: 80px;box-sizing: border-box;text-align: center;display: block;background: transparent;cursor: pointer;color: #4F6F60;font-size: 36px;padding-top: 10px;overflow: hidden;text-transform: uppercase;font-weight: bold;position:relative;top: 80px;left: 285px;z-index: 4;line-height: 90%;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}#blackunicorns-daten-content .blackunicorns-daten-tabs label:hover {color: #C9B68D;background: transparent;top: 80px;}#blackunicorns-daten-content [type=radio]:checked ~ label {background: transparent;color: #C9B68D;top: 80px;}#blackunicorns-daten-content [type=radio]:checked ~ label ~ .blackunicorns-daten-tab-content {display: block;}/* Tab-Boxen */#blackunicorns-daten-content .blackunicorns-daten-tab-content {z-index: 2;display: none;text-align: justify;width: 280px;height: 440px;overflow: auto;font-family: var(--inter-regular);font-size: 11px;padding: 15px;padding-top: 5px;box-sizing: border-box;color:#BFC8C1;background: transparent;position: absolute;top: 80px;left: 0;-webkit-animation-duration: 0.5s;-o-animation-duration: 0.5s;-moz-animation-duration: 0.5s;animation-duration: 0.5s;}/* Textformatierung */black-bold {font-family: var(--inter-black);text-transform: uppercase;color: #C9B68D;}aetheria-unterstrichen {color: #ECEDE8;border-bottom: 1px dashed #A5B4A7;}.cinzel-black {font-family: "Cinzel", serif;font-optical-sizing: auto;font-weight: 900;font-style: normal;}.inter-regular {font-family: "Inter", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}.inter-black {font-family: "Inter", sans-serif;font-optical-sizing: auto;font-weight: 700;font-style: normal;}:root{--cinzel-black:cinzel-black;--inter-regular:inter-regular;inter-bold:inter-bold;}</style> |