* {
    transition: 2s all;
}
html {
    background: black;
    height: 100%;
    width: 100%;
    overflow-x: clip;
}
body {
    width: fit-content;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
    color:white;
}

p {
    margin: 0;
}
img {
    image-rendering: pixelated;
}
h1 {
    color: #fff;
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #f09, 0 0 82px #f09, 0 0 92px #f09, 0 0 102px #f09, 0 0 151px #f09;
    animation: pulsate 0.11s ease-in-out infinite alternate;
    font-family: 'YellowTail', sans-serif;
    font-weight: 400;
    margin: 10px 17px 10px 10px;
    font-size: 3em;
}
h2 {
    color: #ffffffc4;
    text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 20px #f09, 0 0 40px #f09, 0 0 50px #f09, 0 0 60px #f09, 0 0 70px #f09;
    font-family: 'YellowTail', sans-serif;
    font-weight: 400;
    font-size: 2em;
    font-size: 2em;
    text-align: center;
    box-sizing: border-box;
    width: fit-content;
    margin: auto;
    position: relative;
}
h2::before {
    content: '';
    position: absolute;
    width: 96%;
    height: 92%;
    border: 1px solid #f09;
    z-index: -1;
    margin: 2%;
    border-radius: 5px;
}
h3 {
    color: #ffffffc4;
    text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 20px #f09, 0 0 40px #f09, 0 0 50px #f09, 0 0 60px #f09, 0 0 70px #f09;
    font-family: 'YellowTail', sans-serif;
    font-weight: 400;
    text-align: center;
}
p.info {
    font-family: 'PerfectDos';
    padding: 5px;
    text-align: center;
    background: #8a1da8;
    color: aqua;
    border: 2px dashed #00a8a8;
    margin: 1em;
    background-image: url('./../../assets/bgs/3px-tile.png');
}
p.info a {
    color: white; 
}


header {
    z-index: 2;
    position: relative;
}
header::after {
    box-shadow: 0px 4px 10px 2px #02000f;
    z-index: -1;
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    bottom: 1px;
    height: 19px;
}
#roof {
    width: 325px;
    height: 40px;
    background: #af3bce;
    clip-path: polygon(92% 0, 100% 0, 100% 100%, 0 100%, 0 85%, 5% 85%);
    position: relative;
    box-sizing: border-box;
    border-right: 3px solid #21062d;
    background-image: url("./../../assets/bgs/3px-tile.png");
    z-index: 2;
}
#roof::before {
    width: 100%;
    height: 40px;
    background: #31083c;
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    clip-path: polygon(92% 0, 100% 0, 100% 100%, 0 100%, 0 85%, 5% 85%);
    left: 3px;
    border-right: 5px solid #21062d;
    border-bottom: 3px solid #2f0634;
    box-sizing: border-box;
    background-image: url("./../../assets/bgs/3px-tile.png");
    opacity: 0.8;
}
#billboard {
    width: fit-content;
    margin: auto;
    padding: 5px;
    background: black;
    border: 3px double #400e55;
    border-color: #4d1166 #21062d #310842 #a83fd5;
    border-radius: 5px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

#pillar-left, #pillar-right {
    position: absolute;
    height: 49px;
    width: 5px;
    background: #7e3d99;
    background: #400e55;
    bottom: -52px;
    border: 1px solid #390a4d;
    z-index: -1;
    border-color: transparent #21062d #390a4d #a83fd5;
}
#pillar-right {
    right: 6px;
}



main {
    background: #0c143c;
    width: 320px;
    position: relative;
    box-sizing: border-box;
    height: 750px;
    padding-top: 10px;
    text-align: center;
    margin-bottom: 30px;
}
main::before {
    content: '';
    position: absolute;
    width: 98%;
    height: 50%;
    border: 3px solid;
    display: block;
    top: 0;
    border-color: transparent #07062d #080942 #6e3fd5;
}

label input[type="radio"] {
    display: none;
}
label {
    background: #00ffff5e;
    background-image: url('./../../assets/bgs/3px-tile.png');
    padding: 4px 11px;
    font-family: Arial;
    font-size: 16px;
    cursor: pointer;
    z-index: 1;
    position: relative;
}
label:has(input:checked) {
    background-color: #f09;
}

#side {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;  
    margin-top: 5px;
}
#side section {
    width: 320px;
    height: 100%;
    position: absolute;
    border: none;
    box-sizing: border-box;
    background: #0c143c;
    border: 3px solid #4d6aff;
    border-color: transparent #07062d #080942 #6e3fd5;
    padding: 5px 5px 0;
}
#side .north  {
    transform: rotateY(0deg ) translateZ( 160px );
}
#side .south {
    transform: rotateY( 180deg ) translateZ( 160px );
}
#side .east  {
    transform: rotateY(  90deg ) translateZ( 160px );
}
#side .west   {
    transform: rotateY( -90deg ) translateZ( 160px );
}
#east:has(input:checked) ~ #side {
    transform: rotateY(-90deg);
}
#south:has(input:checked) ~ #side {
    transform: rotateY(-180deg);
}
#west:has(input:checked) ~ #side {
    transform: rotateY(-270deg);
}

section > article {
    margin-top: 10px;
    height: -moz-available;
    height: -webkit-fill-available;
    height: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 5px 0;
    background: #00ffff5e;
    background-image: url('./../../assets/bgs/3px-tile.png');
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 18px 0 5px;
}
section > article > a {
    height: 31px;
    width: 88px;
    color: #f09;
    display: block;
    line-height: 0.9;
    text-decoration: unset;
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
    justify-content: center;
    text-shadow: 0 0 5px black, 0 0 10px black, 0 0 20px black;
}

article.floor {
    display: flex;
    justify-content: space-evenly;
}
#ground-floor {
    position: absolute;
    bottom: 0;
    width: 85%;
    margin: auto;
    left: 0;
    right: 0;
}



.window {
    height: 60px;
    width: 90px;
    position: relative;
    background: black;
    box-sizing: border-box;
    border: 1px solid #023939;
}
.window:hover {
    border-color: aqua;
}
.clip-overflow {
    overflow: clip;
    height: 60px;
    width: 88px;
    box-sizing: border-box;
    position: relative;
}

.window img {
    margin-top: 25px;
    border-top: 2px solid;
    filter: grayscale(1);
    opacity: 0.5;
}
.window:hover img{
    filter: unset;
    opacity: 1;
}

.window::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    box-shadow: inset 0 0 10px black;
    pointer-events: none;
}
.curtains {
    height: 40px;
    position: absolute;
    width: 100%;
    border-bottom: 1px solid;
    top:0;
}





#door {
    height: 110px;
    width: 125px;
    background: #af3bce;
    border: 1px solid aqua;
    box-sizing: border-box;
    border-color: aqua aqua transparent aqua;
    display: flex;
    position: relative;
}

.door {
    flex-grow: 1;
    height: 100%;
    background: #371142;
    border: 1px solid black;
    z-index: 2;
}
#door:hover .door {
  background: #8b00ff;
}
#door:hover .door-left {
    margin-right: 40px;
}
#door:hover .door-right {
    margin-left: 40px
}

#announcement {
    position: absolute;
    font-family: monospace;
    width: 80px;
    margin: auto;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    color: aqua;
}


#vacancy .sign {
    color: #daffff;
    text-shadow: 0 0 7px aqua, 0 0 10px aqua, 0 0 21px aqua, 0 0 42px #bc13fe, 0 0 82px #bc13fe, 0 0 92px #bc13fe, 0 0 102px #bc13fe, 0 0 151px #bc13fe;
    animation: pulsate 1s infinite alternate;
    border: 1px solid aqua;
    box-shadow: 0 0 1px aqua, 0 0 4px aqua, 0 0 10px #bc13fe, 0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #9518c6;
    padding: 1px 10px 2px;
    text-align: center;
    font-family: 'YellowTail', sans-serif;
    width: fit-content;
    border-radius: 2rem;
    position: absolute;
    margin: auto;
    z-index: 0;
    top: 26px;
    left: 0;
    right: 0;
}
#vacancy.with-balcon:hover .sign {
    top: 23px;
}
.window.with-balcon:hover img {
margin-top: 15px;
}
.window .curtains, .mini-curtain {
    height: 55px;
    width: 100%;
    position: absolute;
    top: 0;
    --mask: radial-gradient(4.24px at 50% calc(100% - 6px),#000 99%,#0000 101%) calc(50% - 6px) 0/12px 100%, radial-gradient(4.24px at 50% calc(100% + 3px),#0000 99%,#000 101%) 50% calc(100% - 3px)/12px 100% repeat-x;
    mask: var(--mask);
    z-index: 1;
    pointer-events: none;
}
.window .curtains-top, .curtain-left, .curtain-right, .mini-curtain {
    background: repeating-linear-gradient(to left, #0c143c, #0c143c 3px, #371142 3px, #371142 6px);
    z-index: 1;
}
.window:hover .curtains-top {
    top: -38px;
}
.window .curtains-side {
    display: flex;
}
.curtains-side .curtain-left, .curtains-side .curtain-right {
    flex-grow: 1;
    height: 100%;
}
.window:hover .curtain-left {
    margin-right: 35px;
}
.window:hover .curtain-right {
    margin-left: 35px
}
.mini-curtain, #vacancy .curtains.mini-curtain, .tiny-curtain .curtains.mini-curtain {
    width: 100%;
    height: 20px;
    background-position: center;
    background-position: 3px;
}
.curtains .mini-curtain {
    z-index: 0;
}

.balcon {
    height: 9px;
    width: 90px;
    background: repeating-linear-gradient(to right, #481657, #481657 1px, #000 1px, #000 2px, transparent 2px, transparent 6px);
    position: absolute;
    bottom: -6px;
    z-index: 2;
    left: -3px;
    border-radius: 5px;
    border-style: solid;
    border-width: 3px 2px 8px;
    border-color: #481657 black black #611a67;
    pointer-events: none;
}
.window:hover .balcon {
    border-color: black black black #371142;
    background: repeating-linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 6px);
}
.drapes {
    width: 95px;
    height: 34px;
    position: absolute;
    top: -1px;
    background: repeating-conic-gradient( from 45deg at 50% -100%, #371142 0deg 3deg, #0c143c 3deg 6deg, #068a8a 6deg 9deg);
    left: -3px;
    clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
    border-bottom: 6px solid #000000a3;
    z-index: 2;
}
.window:hover .drapes {
    height: 20px;
    background: repeating-conic-gradient( from 45deg at 50% -100%, #972bb7 0deg 3deg, #243aa6 3deg 6deg, aqua 6deg 9deg);
}

.with-slanted-curtains .curtain-right {
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.with-slanted-curtains .curtain-left {
    clip-path: polygon(100% 0, 100% 43%, 45% 100%, 0 100%, 0 0);
}

.with-slanted-curtains .curtain-right {
    clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 43%, 0 0);
}

.window.with-slanted-curtains .curtains {
    height: 57px;
    pointer-events: none;
}

.window.with-slanted-curtains:hover img {
    margin-top: 15px;
    border: unset;
}
.window.window.with-slanted-curtains:hover {
    background: #4175b9 repeating-conic-gradient(#00ffff33 0 15deg, #bb00ff00 0 30deg);
}

.light-off img, .tiny-curtain img {
    opacity: 0.2;
}

.light-off:hover img, .tiny-curtain:hover img {
    opacity: 1;
    margin-top: 15px;
    border: unset;
}

.light-off:hover {
    background: #5e236f;
}
.light-off::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: transparent;
  
}
.light-off:hover::before {  
    background: conic-gradient(from -35deg at 50% -100%, #eee0 180deg, #f0f71b, #eee0 250deg);
    opacity: 0.35;
}
#highlight .window.with-balcon.tiny-curtain {
  margin: 0.25em auto 0;
}

#highlight {
  margin-top: 1em;
}

#highlight .tiny-curtain img {
  opacity: 0.8;
  margin-top: 20px;
}

footer {
    width: 100vw;
    background: #3e1b02;
    background-image: url('./../assets/bgs/grunge.png');
    background-size: 500px;
    position: relative;
}
footer::before {
    content: '';
    width: 100%;
    position: absolute;
    z-index: -1;
    height: 75px;
    top: -76px;
    background: unset;
    background-image: url('./../assets/bgs/grass.png');
    background-size: 100px;
    border-bottom: 1px solid #023702;
}
footer > div {
    width: 320px;
    background: #070c22;
    box-sizing: border-box;
    border-color: #1a022b #07062d #080942 #301273;
    padding: 5px;
    text-align: center;
    border-width: 3px;
    border-style: solid;
    margin: auto;
}