Pro for La Deesee

/* Profile By AlthIndor */
/* Artwork © RachAlGhul */

:root {
  --color-brwn: #2C1C12;
  --color-dark: #206020;
  --color-gold: #DAA04A;
  --color-lite: #EABA6A;
  --color-teal: #508658;
  --top-offset: calc(50% - 306px);
}

html, body {
  background: url('https://i.ibb.co/9vcbWj5/wallpaper.png') top center #002800;
  min-height: 800px;
}
body {position: relative;}
body a {text-decoration: none !important;}

::selection {
  background: var(--color-teal);
  color: #FFFFFF;
}

/* Atlas Control */

#columns, #viewer #gaia_header, #id_contact li:hover, .media_panel:hover, .custom_panel i, .custom_panel b, .custom_panel .clear {background: url('https://i.ibb.co/pvB0zZS/layout.png') 0 0;}
#viewer #gaia_header, #id_contact li:hover, .media_panel:hover {background-position-y: -664px;}
.custom_panel i, .custom_panel b, .custom_panel .clear {background-position-x: right;}
.custom_panel b:nth-of-type(3) {background-position-y: -70px;}
.custom_panel .clear {background-position-y: -31px;}

/* Fonts */

@font-face {
  font-family: 'PT Serif Caption';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif Caption'), local('PT-Serif-Caption'), url('https://fonts.gstatic.com/s/ptserifcaption/v15/ieVl2ZhbGCW-JoW6S34pSDpqYKU019K7DQ.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: local('Font Awesome 5 Free Solid'), local('Font-Awesome-5-Free-Solid'), url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff2') format('woff2');
}

/* Header */

#viewer #gaia_header {
  height: 33px !important;
  padding: 0 3px !important;
  position: absolute !important;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, var(--color-lite), var(--color-gold), var(--color-lite), var(--color-gold), var(--color-lite)) 3;
  box-sizing: border-box;
}
#gaia_header li.spacer {display: none !important;}
#gaia_header li, #header_left::after {margin: 0 5px;}

#gaia_header #header_left, #gaia_header #header_right {
  background: none !important;
  width: auto !important;
  font: 400 0/30px 'PT Serif Caption', serif !important;
}
#gaia_header #header_right {float: right;}

#gaia_header img {
 -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 3px;
  mask: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 3px;
  background: #FFFFFF;
  width: 0 !important;
  padding: 0 34px 0 0;
}
#header_left li:nth-of-type(2) a {filter: drop-shadow(0 -1px var(--color-dark)) drop-shadow(0 1px var(--color-dark)) drop-shadow(-1px 0 var(--color-dark)) drop-shadow(1px 0 var(--color-dark));}
#header_left li:nth-of-type(2) a:hover img {background: var(--color-lite);}

#gaia_header a, #header_left::after {
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 400;
  text-transform: uppercase;
  text-shadow: 0 -1px var(--color-dark), 1px 0 var(--color-dark), 0 1px var(--color-dark), -1px 0 var(--color-dark), -1px -1px var(--color-dark), 1px -1px var(--color-dark), 1px 1px var(--color-dark), -1px 1px var(--color-dark);
}
#gaia_header a:hover {color: var(--color-lite) !important;}
#header_left::after {content: 'Art©RachAlGhul';}

/* Columns */

#columns, #columns .column {
  float: none;
  font-size: 0;
  margin: 0;
  overflow: visible;
}
#columns, #column_1 {width: 400px;}
#column_3 {display: none;}

#columns {
  height: 654px;
  top: var(--top-offset);
  left: calc(50% - 200px);
}

#column_1 {
  display: block;
  height: 400px;
}

#column_2 {
  display: grid;
  grid-template: repeat(2, max-content) / 1fr repeat(4, max-content) 1fr;
  grid-gap: 10px;
  gap: 10px;
  background: linear-gradient(to left, #2C1C1240, var(--color-brwn), var(--color-brwn), #2C1C1240);
  width: 372px;
  padding: 10px 0;
  position: absolute;
  top: 505px;
  left: 13px;
}

#column_2::before {
  grid-column: 1/-1;
  content: 'LA DEESEE';
  font: 27px/20px 'PT Serif Caption', serif;
  color: #FFFFFF;
  text-align: center;
}

#column_2::after {
  content: '';
  grid-area: 2/1/3/2;
}

/* Panels */

.panel {
  padding: 0;
  margin: 0;
}
.panel h2 {display: none;}

/* Contact and Media */

#id_contact, #id_contact ul {display: contents;}
#id_contact span {display: none;}

#id_contact li, #id_contact a, .media_panel {
  height: 30px !important;
  width: 30px;
}
#id_contact li, #id_contact a {font-size: 0;}

#id_contact li, .media_panel {
  background: var(--color-gold);
  color: var(--color-brwn);
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
}
#id_contact li {position: relative;}

#id_contact li:hover, .media_panel:hover {color: #FFFFFF;}
#id_contact li:hover::before, .media_panel:hover::before {text-shadow: 0 -1px var(--color-dark), 1px 0 var(--color-dark), 0 1px var(--color-dark), -1px 0 var(--color-dark), -1px -1px var(--color-dark), 1px -1px var(--color-dark), 1px 1px var(--color-dark), -1px 1px var(--color-dark);}

#id_contact li::before, .media_panel::before {font: 18px/30px 'Font Awesome 5 Free';}
#id_contact li:nth-of-type(1)::before {content: '';}
#id_contact li:nth-of-type(2)::before {content: '';}
#id_contact li:nth-of-type(3)::before {content: '';}

.media_panel::before {
  content: '';
  position: relative;
  left: -1px;
}

#id_contact a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.media_panel iframe {
  position: absolute;
  bottom: -3px;
  left: -14px;
  opacity: .001;
}

/* Flower Animation */

@keyframes Bounce {
  from {transform: translateY(-10px);}
  to {transform: translateY(2px);}
}

@keyframes Glow {
  000% {opacity: .75;}
  005% {opacity: .75;}
  010% {opacity: .70;}
  015% {opacity: .80;}
  020% {opacity: .70;}
  025% {opacity: .90;}
  030% {opacity: .80;}
  035% {opacity: .70;}
  040% {opacity: .75;}
  045% {opacity: .75;}
  050% {opacity: .90;}
  055% {opacity: .75;}
  060% {opacity: .70;}
  065% {opacity: .75;}
  070% {opacity: .85;}
  075% {opacity: .70;}
  080% {opacity: .75;}
  085% {opacity: .90;}
  090% {opacity: .75;}
  095% {opacity: .60;}
  100% {opacity: .75;}
}

@keyframes Stars {
  from {opacity: 0;}
  to {opacity: 1;}
}

.custom_panel, .custom_panel h2 + div, .custom_panel ul:nth-of-type(1) {
  width: 100%;
  height: 100% !important;
}

.custom_panel, .custom_panel * {overflow: visible;}
.custom_panel * {position: absolute;}
.custom_panel br {display: none;}
.custom_panel ul {margin: 0 !important;}
.custom_panel {background: none;}

.custom_panel ul:nth-of-type(1) {
  top: -15px;
  left: -15px;
}

.custom_panel i {
  width: 30px;
  height: 30px;
  animation: Stars 2s ease-in-out infinite alternate;
}

.custom_panel i:nth-of-type(01) {top: 268px; left: 347px; transform: rotate(111deg) scale(0.99); animation-duration: 2.4s; animation-delay: -1.5s;}
.custom_panel i:nth-of-type(02) {top: 142px; left: 264px; transform: rotate(038deg) scale(0.35); animation-duration: 2.4s; animation-delay: -1.6s;}
.custom_panel i:nth-of-type(03) {top: 301px; left: 274px; transform: rotate(161deg) scale(0.57); animation-duration: 1.5s; animation-delay: -0.2s;}
.custom_panel i:nth-of-type(04) {top: 167px; left: 129px; transform: rotate(200deg) scale(0.33); animation-duration: 2.4s; animation-delay: -0.8s;}
.custom_panel i:nth-of-type(05) {top: 148px; left: 269px; transform: rotate(078deg) scale(0.96); animation-duration: 3.0s; animation-delay: -0.7s;}
.custom_panel i:nth-of-type(06) {top: 304px; left: 335px; transform: rotate(125deg) scale(0.93); animation-duration: 1.7s; animation-delay: -0.9s;}
.custom_panel i:nth-of-type(07) {top: 079px; left: 190px; transform: rotate(103deg) scale(0.49); animation-duration: 3.0s; animation-delay: -2.8s;}
.custom_panel i:nth-of-type(08) {top: 313px; left: 089px; transform: rotate(106deg) scale(0.89); animation-duration: 1.6s; animation-delay: -1.2s;}
.custom_panel i:nth-of-type(09) {top: 127px; left: 122px; transform: rotate(103deg) scale(0.72); animation-duration: 1.2s; animation-delay: -0.5s;}
.custom_panel i:nth-of-type(10) {top: 321px; left: 300px; transform: rotate(076deg) scale(0.44); animation-duration: 2.9s; animation-delay: -2.1s;}
.custom_panel i:nth-of-type(11) {top: 178px; left: 278px; transform: rotate(093deg) scale(0.69); animation-duration: 2.5s; animation-delay: -2.1s;}
.custom_panel i:nth-of-type(12) {top: 257px; left: 085px; transform: rotate(195deg) scale(0.67); animation-duration: 2.2s; animation-delay: -0.9s;}
.custom_panel i:nth-of-type(13) {top: 159px; left: 308px; transform: rotate(165deg) scale(0.73); animation-duration: 1.5s; animation-delay: -1.5s;}
.custom_panel i:nth-of-type(14) {top: 193px; left: 072px; transform: rotate(197deg) scale(0.56); animation-duration: 2.8s; animation-delay: -1.4s;}
.custom_panel i:nth-of-type(15) {top: 221px; left: 305px; transform: rotate(017deg) scale(0.39); animation-duration: 2.1s; animation-delay: -2.1s;}
.custom_panel i:nth-of-type(16) {top: 156px; left: 069px; transform: rotate(229deg) scale(0.37); animation-duration: 2.1s; animation-delay: -0.8s;}
.custom_panel i:nth-of-type(17) {top: 221px; left: 066px; transform: rotate(338deg) scale(0.30); animation-duration: 1.6s; animation-delay: -0.4s;}
.custom_panel i:nth-of-type(18) {top: 288px; left: 333px; transform: rotate(199deg) scale(0.43); animation-duration: 2.4s; animation-delay: -0.3s;}
.custom_panel i:nth-of-type(19) {top: 315px; left: 291px; transform: rotate(117deg) scale(0.41); animation-duration: 2.8s; animation-delay: -0.0s;}
.custom_panel i:nth-of-type(20) {top: 268px; left: 050px; transform: rotate(174deg) scale(0.72); animation-duration: 1.7s; animation-delay: -0.2s;}
.custom_panel i:nth-of-type(21) {top: 158px; left: 301px; transform: rotate(322deg) scale(0.96); animation-duration: 1.1s; animation-delay: -1.1s;}
.custom_panel i:nth-of-type(22) {top: 335px; left: 086px; transform: rotate(197deg) scale(1.00); animation-duration: 1.1s; animation-delay: -0.7s;}
.custom_panel i:nth-of-type(23) {top: 155px; left: 065px; transform: rotate(085deg) scale(0.62); animation-duration: 2.9s; animation-delay: -2.5s;}
.custom_panel i:nth-of-type(24) {top: 216px; left: 102px; transform: rotate(004deg) scale(0.52); animation-duration: 3.0s; animation-delay: -3.0s;}
.custom_panel i:nth-of-type(25) {top: 176px; left: 301px; transform: rotate(030deg) scale(0.48); animation-duration: 1.0s; animation-delay: -1.0s;}
.custom_panel i:nth-of-type(26) {top: 122px; left: 260px; transform: rotate(083deg) scale(0.91); animation-duration: 2.9s; animation-delay: -0.0s;}
.custom_panel i:nth-of-type(27) {top: 184px; left: 311px; transform: rotate(214deg) scale(0.44); animation-duration: 2.3s; animation-delay: -0.1s;}
.custom_panel i:nth-of-type(28) {top: 339px; left: 108px; transform: rotate(243deg) scale(0.55); animation-duration: 2.9s; animation-delay: -0.2s;}
.custom_panel i:nth-of-type(29) {top: 103px; left: 194px; transform: rotate(011deg) scale(0.95); animation-duration: 2.8s; animation-delay: -0.9s;}
.custom_panel i:nth-of-type(30) {top: 237px; left: 339px; transform: rotate(004deg) scale(0.45); animation-duration: 1.0s; animation-delay: -0.1s;}

.custom_panel ul:nth-of-type(2), .custom_panel b:nth-of-type(1) {
  width: 50px;
  height: 50px;
}

.custom_panel ul:nth-of-type(2) {
  top: 200px;
  left: 245px;
  animation: Bounce 3s ease-in-out infinite alternate;
}

.custom_panel b:nth-of-type(1) {
  background: salmon;
  border-radius: 50%;
  filter: blur(7px);
  animation: Glow 8s -4s linear infinite;
}

.custom_panel b:nth-of-type(2) {
  background: gold;
  width: 30px;
  height: 30px;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  filter: blur(7px);
  animation: Glow 8s linear infinite;
}

.custom_panel b:nth-of-type(3) {
  width: 25px;
  height: 33px;
  top: 18px;
  left: 16px;
  filter: drop-shadow(0 0 5px gold);
}

.custom_panel .clear {
  width: 23px;
  height: 38px;
  top: 231px;
  left: 242px;
}

/* Enter Screen */

.text_decoration:first-of-type, .text_decoration:first-of-type .spoiler-wrapper, .text_decoration:first-of-type .spoiler-title {display: contents;}
.text_decoration:first-of-type p, .text_decoration:first-of-type span, .text_decoration:first-of-type .spoiler-revealed {display: none;}

.text_decoration:first-of-type .spoiler-control-show {
  background: url('https://i.ibb.co/4SPKdcR/enter-layer-2.png') bottom right / cover no-repeat,
    url('https://i.ibb.co/1vGTShg/enter-layer-1.png') center / contain no-repeat,
    linear-gradient(red, red), url('https://i.ibb.co/9vcbWj5/wallpaper.png') top center #000;
  background-blend-mode: normal, normal, color, normal, normal;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  border: none;
  outline: none;
  z-index: 10000;
}

/* Misc */

#pictures_container, #texts_container {
  width: 0;
  height: 0;
  position: absolute;
  top: var(--top-offset);
  left: 50%;
}