html, body {
overscroll-behavior-x: none;
}

html {
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
max-width: 100vh;
max-height: 0px;
overflow-y: hidden;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

body {
font-family: courier new;
font-weight: bold;
font-size: 14.6px;
line-height: 1.2;
letter-spacing: -.4px;
text-rendering:geometricPrecision;
font-kerning: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

body::-webkit-scrollbar {
display: none;
}

a {
color: black;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

form, button, input {
font-size: inherit;
display: inline;
border: none;
background: transparent;
margin: 0px;
padding: 0px;
cursor: pointer;
color: black;
font-family: courier new;
font-weight: bold;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

input {
cursor: text;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

/* Ensure no background color in any state */
input:focus {
  background-color: transparent !important;
  box-shadow: none !important;
}

button {
text-decoration: underline;
}

.hair {
position: absolute;
top: 40px;
left: 10vh;
display: block;
}

.frame, .card, .box {
max-width: 80vh;
margin: auto;
display: block;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
cursor: auto;
}

.frame, .card {
padding: 80px 0 0 0;
}

.box {
padding: 40px 0px 120px 0px;
}

.about {
max-width: 420px;
top: 20px;
left: 10vh;
position: relative;
text-transform: uppercase;
padding-bottom: 50vw;
}

.small {
display: block;
font-size: 11px;
}

.lowercase {
text-transform: lowercase;
}

.image-container img {
display: none; /* Hide all images initially */
}

.image-container img.active {
display: block; /* Show only the active image */
}

.text-content {
position: relative;
}

.room {
position: absolute;
left: 0;
top: 0;
width: 100vh;
object-fit: cover;
z-index: -3;
overflow-x: hidden;
overflow-y: hidden;
}

.room img {
width: auto;
height: 100vw;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

img {
width: 100%;
cursor: pointer;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

.cross {
float: right; 
text-align: right; 
display: block;
position: relative;
font-size: 26px;
padding: 50px 10vh 0px 0px;
margin: 0px;
line-height: 0px;
z-index: 77;
}

#catalogue {
display: block;
z-index: -99;
position: absolute;
height: 100vw;
margin-top: -10px;
visibility: hidden;
}

@media screen and (max-width: 760px) {

html {
transform: none;
transform-origin: 0 0;
max-width: 100vh;
overflow-y: visible;
}

.hair {
top: 20px;
left: 20px;
position: relative;
}

.about {
padding-bottom: 90vh;
left: 20px;
}

.card {
padding-top: 40px;
}

.text-content {
margin: auto;
}

.hair, .frame, .box, .card, .about, .text-content {
max-width: 86vw;
}

.room {
max-width: 100vw;
min-height: 100vh;
overflow-y: hidden;
}

.room img {
min-height: 100vh;
}

.frame, .box, {
padding-top: 20px;
}

.cross {
padding-top: 30px;
padding-right: 20px;
}

}