* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Helvetica;
}
.topContainer {
display: flex;
justify-content: center;
flex-wrap: wrap;     
align-items: center;  
position: relative;
flex-direction: column; 
gap: 1rem;           
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin-top: 2vw;
}
h1 {
font-size: 50px;
font-family: Helvetica;
margin-bottom: 1rem;
text-align: center;
z-index: 1100; 
}
h2 {
margin-top: 0rem;
font-size: 35px;
font-family: Helvetica;
margin-bottom: 1rem;
}
h3 {
margin-top: 0rem;
font-size: 35px;
font-family: Helvetica;
margin-bottom: 1rem;
}
p {
font-family: Helvetica;
margin-bottom: 1rem;
}
.circa_title {
color: rgb(0, 0, 0);
font-weight: bold;
text-align: center;
font-size: 95px;
margin-bottom: 0.5rem;
text-shadow: #000;
}
.login{
margin-bottom: 1.5rem;
}
.login_form {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem; 
margin-top: 1rem;
margin-bottom: 1rem; 
height: auto;
width: 80vw;
}
#key {
padding: 0.8rem 1rem;
border: 2px solid #000000;
border-radius: 8px;
font-size: 2rem;
width: 100%;
height: 80px;
max-width: 400px;
}
#key:focus {
border: 2px solid rgb(25, 159, 25);  
outline: none;            
}
.error_message {
color: red;
text-align: center;
bottom: 20px;
}
.no-key {
text-align: center;
margin-top: 1.3rem;
font-size: 1.2rem;
color: #000000; 
}
.no-key a {
color: #000000;      
text-decoration: underline; 
font-weight: bold;
}
.no-key a:hover {
color: #000000;    
text-decoration: underline; 
}
button.login_btn {
border-radius: 10px;
width: 215px;
height: 80px;
color: white;
background-color: #000;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
font-weight: bold;
font-size:2rem ;
cursor: pointer;
}
.start_page {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap:2rem;
}
button.start_btn {
border-radius: 10px;
color: white;
background-color: #000;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
font-weight: bold;
font-size:6rem ;
cursor: pointer;
padding: 1rem 2rem;
width: 500px;
height: 150px;
}
.info { 
margin-bottom: 2rem;
}
.info button{
border-radius: 10px;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
font-weight: bold;
font-size:1.5rem ;
cursor: pointer;
padding: 1rem 2rem;
margin-bottom: 1rem;
width: 300px;
height: 60px;
}
.info-box {
overflow: hidden;
height: 0;
opacity: 0;
transform: scale(0.98);
transition: height 0.5s ease, opacity 0.4s ease, transform 0.4s ease;
background: #ffffff;
border: 2px solid #000;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 0 1rem; 
width: 50vw;
}
.info-box.ready {
padding: 1rem;
margin-bottom: 1rem;
} .pick_theme { 
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
margin-bottom: 2rem;
}
.pick_theme button {
width: 90%;
max-width: 800px;
height: 120px;
padding: 1rem;
color: white;
border: none;
border-radius: 10px;
font-weight: bold;
paint-order: stroke fill;
-webkit-text-stroke: 5px #000000;
text-shadow: 2px 2px 2px black;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
white-space: normal;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 4rem;
line-height: 1.2;
cursor: pointer;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
} .back_btn {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2000; 
display: inline-block; 
}
.back_btn_2 {
position: absolute;
top: -0.5rem;
left: -0.5rem;
z-index: 2000; 
display: inline-block;   
}
.back_btn button,
.back_btn_2 button {
display: inline-block;  
max-width: 450px;
padding: 1rem 2rem;
margin-left: 1rem;
border: none;
border-radius: 8px;
font-family: Helvetica;
font-size: 2rem;
background-color: #000;
color: white;
font-weight: bold;
cursor: pointer;
box-shadow: 0 8px 13px rgba(0, 0, 0, 0.3);
text-align: center;
white-space: nowrap;
z-index: 2001;
}
.sub_category {
display: flex;
justify-content: center;
justify-items: center; 
}
.knapp-grid {
display: grid;
gap: 1.5rem 0.5rem; 
max-width: 1200px;
width: 70%;
margin: 1rem;
justify-content: center;   
justify-items: center;    
}
.knapp-grid.four {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 150px; 
gap: 2.5rem 2.5rem; 
}
.knapp-grid.four button {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.6rem;
padding: 2rem;
white-space: normal;
word-break: break-word;
text-align: center;
}
.knapp-grid.col {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.knapp-grid.col button {
width: 70%;
}
.knapp-grid button {
min-height:100px;
max-height: 250px;
align-items: center;
text-align: center;
padding: 2rem;
font-size: 3rem;
color: white;
border: none;
border-radius: 10px;
font-weight: bold;
paint-order: stroke fill;
text-shadow: 2px 2px 2px #000;
-webkit-text-stroke: 5px #000;
box-shadow: 10px 8px 16px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
cursor: pointer;
white-space: normal;
word-break: break-word;
hyphens: auto;
line-height: 1.2;
text-align: center;
}
.divider {
display: flex;
align-items: center;
text-align: center;
gap: 1rem;
margin: 2rem 0;
padding-left: 8rem;
padding-right: 8rem;
}
.divider hr {
flex: 1;
border: none;
border-top: 1px solid #ccc;
}
.divider span {
font-weight: bold;
font-size: 30px;
padding: 0 1rem;
white-space: nowrap;
}
.randomize {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.randomize button {
height: 80px;
width: 380px;
font-size: 1.7rem;
font-weight: bold;
padding: 1rem 2rem;
border: none;
border-radius: 8px;
background-color: #000;
color: white;
cursor: pointer;
box-shadow: 0 6px 10px rgba(46, 27, 27, 0.3);
text-align: center;
white-space: norwrap;
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.music_video button {
flex: 1 1 calc(50% - 2.5rem);
height: 80px;
font-size: 2rem;
padding: 1rem 3rem;
border: none;
border-radius: 8px;
font-size: 2rem;
background-color: #000;
color: white;
cursor: pointer;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
text-align: center;
white-space: nowrap;
margin-left: 1rem;
margin-right: 2rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.blandat { 
display: flex; 
justify-content: center;
align-content: center;
flex-direction: column; 
gap: 16px; 
}
.blandat_vy{
display: flex; 
justify-content: center;
align-content: center;
width: auto;
}
.blandat_vy button {
flex: 1;
width: 50vw;   
min-height: 140px;
font-size: 3rem;
padding: 1.5rem 3rem; 
border: none;
border-radius: 8px;
background-color: #000;
color: white;
cursor: pointer;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
text-align: center;
white-space: nowrap;
margin-left: 1rem;
margin-right: 2rem;
margin-top: 1rem;
margin-bottom: 1rem;
} .slide_show {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
z-index: 0; 
min-height: calc(100vh - 80px);
padding: 2.5rem 0 2rem;         
}
.title_container{
width: 100%;
max-width: 90%;
margin: 0 auto;           
display: flex;
justify-content: center; 
align-items: center;
text-align: center;
}
#slideshow_title {
border-radius: 8px;
text-align: center;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
text-wrap: balance;
pointer-events: none;  
margin-top: 1rem;
}
.image_container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: auto;
max-width: 90vw;
margin: 0.5rem auto;
border: none;
background: transparent;
overflow: visible; 
}
.img_wrapper {
top: 1rem;
margin-top: 1rem;
position: relative;
background: transparent;
overflow: visible;
display: flex;  
justify-content: center;
align-items: center;
}
.img_wrapper.with-transition { 
transition: transform 0.4s ease-in-out; 
}
.img_wrapper.zoomed {
transform: scale(1.35);
transform-origin: center;
overflow: visible;  
}
.img_wrapper.superZoom { 
transform: scale(1.6); 
transform-origin: center;
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible;  
}
.img_wrapper.miniZoom  {
transform: scale(1.26); 
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible;  
}
.img_wrapper.extra_miniZoom  {
transform: scale(1.25); 
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible;  
}
.img_wrapper.extra_superZoom  {
transform: scale(2); 
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible;  
}
.current_img.superZoom {
object-fit: contain;
max-width: 98vw;
max-height: 90vh;
}
.current_img.miniZoom {
object-fit: contain;
max-width: 98vw;
max-height: 90vh;
}
.current_img {
display: block;
max-width: 100%;
max-height: 75vh;
height: auto;
}
.img_inner {
position: relative; 
}
.zoom_btn {
position: absolute;
top: -20px;
right: -13px;
width: 100px;
height: 100px;
border-radius: 50%;
background-size: 100% 100%;     
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
border-color: #000;
background-color: transparent;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
} .music_wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 80vw;
height: 50vh;
border-radius: 12px;
margin: 3rem auto 0 auto; 
}
.music_wrapper audio {
width: 100%;
max-width: 900px;
}
.controls {
display: flex;
justify-content: center;
gap: 4rem;
margin-top: 3rem;
}
.round-btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
}
.round-btn img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none;          
}
.round-btn_2{
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: #000;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
}
.round-btn_2 img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none;          
}
#play_btn{
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
#next{
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.round-btn:hover {
transform: scale(1.05);
}
.round-btn_2:hover {
transform: scale(1.05);
} .video_wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 80vw;
height: 80vh;
margin-top: 2rem;
border-radius: 12px;
margin: 0 auto; 
position: relative; 
overflow: hidden;
}
.video_wrapper video {
width: 100%;
max-width: 900px;
}
.prev_btn,
.next_btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 130px;
height: 130px;
border-radius: 50%;
border: none;
cursor: pointer;
background-color: #000;
z-index: 2000;
box-shadow: 0 6px 10px rgba(0,0,0,.3);    
background-position: center;
background-repeat: no-repeat;
background-size: 55% 55%;
}
.prev_btn{
left: 10px;
}
.next_btn {
right: 10px;
}
.prev_btn img, .next_btn img {
width: 100%; height: 100%;
border-radius:inherit;  
object-fit: contain;
display: inline-block;
pointer-events: none; 
}  @media (max-width: 680px) {
body, html {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
}
.topContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.circa_title {
font-size: 2.7rem;       
}
.start_btn button {
font-size: 1.6rem;       
padding: 0.75rem 1rem;
width: 100%;             
}
.start_page {
gap: 1.2rem; 
}
#key{
width: 100%;
font-size: 1.5rem;
}
.start_page .start_btn {
width: 90%;
max-width: 350px;
height: 80px;
font-size: 2rem;
padding: 0.5rem 1rem;
}
.info button {
width: 90%;
max-width: 320px;
height: auto;
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
.info-box {
width: 90%;           
font-size: 1rem;
}
.info-box.ready{ 
margin-bottom: 2rem;
padding:1rem;
width: 70vw;
} 
.login_form {
flex-direction: column;  
align-items: center;
gap: 0.8rem;
width: 100%;
margin-bottom: 2rem;
}
.no-key {
width: 100%; 
margin-top: 2rem;
}
.login_btn {
width: 90%;       
max-width: 350px; 
height: 30px;     
font-size: 1rem;
}
.error_message,
.no-key {
font-size: 1rem;
margin-top: 1rem;
text-align: center;
}
.controls {
gap: 0.8rem;
margin-top: 0.5rem;
}
.round-btn {
width: 60px;
height: 60px;
font-size: 1.5rem;
margin: 1rem;
}
.title_container{
order:2;
width: 100%;
display: flex;
justify-content: center;
margin: 1rem auto 0;     
max-height: none;
background-color: ffff;
pointer-events: none;
z-index: 5;
}
h1 {
font-size: 1.8rem;
}
.pick_theme button {
font-size: 2rem;
-webkit-text-stroke: 4px black;
text-shadow: 1px 1px 1px black;
paint-order: stroke fill;
}
.knapp-grid button {
font-size: 1rem;
-webkit-text-stroke: 4px black;
text-shadow: 1px 1px 1px black;
paint-order: stroke fill;
width: 100%;
}
.knapp-grid.col{
width: 100%;
}
.tema button {
flex: none;
width: 100%;
max-width: 90%;
height: auto;
font-size: 2.5rem;
-webkit-text-stroke: 0px;
}
.knapp-grid {
padding: 0 1rem;
}
.knapp-grid.four {
grid-template-columns: 1fr; 
width: 100%;
}
.knapp-grid.four  button{
grid-template-columns: 1fr; 
width: 100%;
font-size: 2rem;
}
.knapp-grid.col button {
width: 95%;
height: 100%; 
font-size: 2rem;
}
.knapp-rad {
flex-direction: column;
align-items: center;
}
.randomize button {
width: 100%;
max-width: 90vw;
margin-bottom: 1rem;
font-size: 1.6rem;
}
.music_video button,
.tema button {
width: 100%;
max-width: 90vw;
margin-bottom: 1rem;
}
.container h1,
.container h2 {
text-align: center;
align-items: center;
margin-bottom: 2rem;
}
.back_btn_2{
position: static;
text-align: center;
margin-bottom: 0.5rem;
}
.back_btn{
position: static;
margin: 1rem auto;
text-align: center;
padding: 0.5rem;
}
.back_btn button {
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
.divider {
padding: 0 1rem;
text-align: center;
align-items: center;
}
.divider span {
font-size: 1.6rem;
}
.slideshow_wrapper {
display: flex;
align-items: center;
justify-content: center;
position: relative;
max-width: 100%;
overflow: visible;
gap: 0.5rem;
max-height: none;
height: auto;
}
#slideshow_title{
font-size: 25px;
background-color: white;
}
#slideshow_title.zoomed{
margin-top: 0.25rem;
padding-top: 1rem;
}
.img_wrapper {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
order: 1;
overflow: visible; 
max-height: none;  
height: auto;
margin: 0;   
}
.current_img.zoomed,
.current_img.miniZoom,
.current_img.superZoom {
object-fit: contain; 
}
.nav-buttons {
display: flex;
justify-content: center;
gap: 2rem;
order:3;
margin-top: 1rem;
z-index: 10;
}
.nav-buttons_video {
display: flex;
justify-content: center;
gap: 4rem;
order:3;
margin-top: 1rem;
}
.prev_btn,
.next_btn {
position: static;
transform: none;
width: 100px;
height: 100px;
font-size: 2rem;
}
.image_container {
max-width: 100%;
overflow: visible;
margin: 0.5rem auto; 
}
.img_wrapper.miniZoom{
transform: scale(1.02);
transition: transform 0.4s ease-in-out;
overflow: visible; 
}
.img_wrapper.superZoom{
transform: scale(1.05);
transition: transform 0.4s ease-in-out;
overflow: visible; 
}
.img_wrapper.zoomed{
transform: scale(1.3);
transition: transform 0.4s ease-in-out;
overflow: visible;
}
.current_img {
max-width: 80vw;
object-fit: contain;
transition: max-width 0.4s ease, max-height 0.4s ease;
}
.zoom_btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
top: -0.5rem;
right: -0.8rem;
width: 90px;
height: 90px;
font-size: 2.5rem;
border-radius: 50%;
z-index: 100;
border: 2px solid black;
text-align: center;
cursor: pointer;
background-color: black;           
background-repeat: no-repeat; 
background-position: center;
background-size: 100% 100%;     
}
.zoom_btn.zoomed {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: -0.4rem;
right: 0.5rem;
width: 80px;
height: 80px;
font-size: 2.5rem;
border-radius: 50%;
z-index: 100;
border: 2px solid black;
text-align: center;
cursor: pointer;
background-color: black; background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.video_wrapper{
display: flex;
justify-content: center;
position: relative;
max-width: 100%;
overflow: visible;
max-height: 60vh;
height: auto;
margin-bottom: 4rem;
}
.blandat_vy {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.blandat_vy button {
flex: 1;
display: flex;           
align-items: center;            
justify-content: center;        
min-height: 100px;
font-size: 1.5rem;
padding: 1.5rem 3rem; 
border: none;
border-radius: 8px;
background-color: #000;
color: white;
cursor: pointer;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
text-align: center;
white-space: nowrap;
margin-left: 1rem;
margin-right: 2rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 3rem;
}
.round-btn_2, .round-btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
}
.round-btn img, .round-btn_2 img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
#play_btn{
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
} @media (min-width: 768px) and (max-width: 1024px) {
body, html {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
}
.topContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.controls {
gap: 2rem;
margin-top: 0.5rem;
}
.round-btn {
width: 200px;
height: 200px;
font-size: 1.5rem;
}
.title_container{
width: 100%;
display: flex;
justify-content: center;
margin-top: 0.5rem;
max-height: none;
order:2;
}
h1 {
font-size: 1.8rem;
}
.circa_title {
font-size: 3rem;   
}
.start_page {
gap: 1.5rem;
}
#key {
width: 100%;
font-size: 1.5rem;
}
.login_form { 
display: flex;
gap: 1rem;
width: 70vw;
align-items: center;
margin-bottom: 2.5rem;
}
button.login_btn {
width: 75%;
max-width: 400px;
height: 85px;
font-size: 1.6rem;
display: flex;             
justify-content: center;   
align-items: center;        
padding: 0;                
line-height: normal;      
-webkit-appearance: none;   
appearance: none;           
}
.error_message,
.no-key {
font-size: 1.2rem;
margin-top: 1rem;
text-align: center;
}
.start_page .start_btn {
width: 80%;
max-width: 800px;
height: 130px;
font-size: 5rem;
}
.start_btn button {
padding: 1rem 1.5rem;
width: 100%;
}
.info{
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.info-box {
width: 70%;
font-size: 1.2rem;
}
.pick_theme button {
font-size: 3.5rem;
-webkit-text-stroke: 5px black;
text-shadow: 1px 1px 1px black;
paint-order: stroke fill;
}
.knapp-grid button {
font-size: 1rem;
-webkit-text-stroke: 5px black;
text-shadow: 1px 1px 1px black;
paint-order: stroke fill;
width: 100%;
}
.knapp-grid.col{
width: 100%;
}
.tema button {
flex: none;
width: 100%;
max-width: 90%;
height: auto;
font-size: 2.5rem;
-webkit-text-stroke: 0px;
}
.knapp-grid {
padding: 0 1rem;
}
.knapp-grid.four {
grid-template-columns: 1fr; 
width: 100%;
}
.knapp-grid.four  button{
grid-template-columns: 1fr; 
width: 100%;
font-size: 3rem;
}
.knapp-grid.col button {
width: 95%;
height: 100%; 
font-size: 4rem;
}
.knapp-rad {
flex-direction: column;
align-items: center;
}
.randomize button {
width: 100%;
max-width: 55vw;
margin-bottom: 1rem;
font-size: 1.8rem;
}
.music_video button,
.tema button {
width: 100%;
max-width: 90vw;
margin-bottom: 1rem;
}
.container h1,
.container h2 {
text-align: center;
align-items: center;
margin-bottom: 2rem;
}
.back_btn_2{
position: static;
margin-bottom: 3rem;
text-align: center;
}
.back_btn{
position: static;
margin: 1rem auto;
text-align: center;
padding: 0.5rem;
}
.back_btn button {
font-size: 2.5rem;
width: 300px;
height: 80px;
max-width: 60vw;
margin-bottom: 0.5rem;
}
.back_btn_2 button {
font-size: 2.5rem;
width: 300px;
height: 80px;
max-width: 60vw;
margin-bottom: 0.5rem;
}
.divider {
padding: 0 1rem;
text-align: center;
align-items: center;
}
.divider span {
font-size: 1.6rem;
}
.slide_show {
justify-content: flex-start !important; 
min-height: auto !important;            
padding: 1rem 0 1rem !important;   
margin-top: 3rem;   
}
.slideshow_wrapper {
display: flex;
align-items: center;
justify-content: center;
position: relative;
max-width: 100%;
overflow: visible;
gap: 0.5rem;
}
#slideshow_title{
font-size: 30px;
margin-top: 0.25rem;
}
.img_wrapper {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
order: 1;
overflow: visible; 
max-height: none;  
height: auto;
margin-top: 1rem;   
}
.img_wrapper.zoomed {
transform: scale(1.4);
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible; 
}
.img_wrapper.miniZoom  {
transform: scale(1.1);
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible; 
}
.img_wrapper.extra_miniZoom  {
transform: scale(1.1); 
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible;  
}
.img_wrapper.extra_superZoom  {
transform: scale(1.8); 
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible;  
}
.img_wrapper.superZoom {
transform: scale(1.6);
transform-origin: center;
transition: transform 0.4s ease-in-out;
overflow: visible; 
}
.current_img.zoomed,
.current_img.miniZoom,
.current_img.superZoom,
.current_img.extra_miniZoom,
.current_img.extra_superZoom
{
object-fit: contain; 
}
.nav-buttons {
display: flex;
justify-content: center;
gap: 4rem;
order:3;
margin-top: 1rem;
}
.nav-buttons_video {
display: flex;
justify-content: center;
gap: 4rem;
order:3;
margin-top: 1rem;
}
.prev_btn,
.next_btn {
position: static;
transform: none;
width: 130px;
height: 130px;
font-size: 2rem;
}
.image_container {
max-width: 100%;
overflow: visible;
margin: 0.5rem auto; 
}
.current_img {
max-width: 80vw;
max-height: 50vh;
object-fit: contain;
transition: max-width 0.4s ease, max-height 0.4s ease;
}
.zoom_btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
top: -1rem;
right: -2rem;
width: 90px;
height: 90px;
font-size: 2.5rem;
border-radius: 50%;
z-index: 100;
border: 2px solid black;
text-align: center;
cursor: pointer;
background-color: black;           
background-repeat: no-repeat; 
background-position: center;
background-size: 100% 100%;     
}
.img_wrapper.miniZoom .zoom_btn {
top: 0.5rem;
right: 2rem;
width: 85px;   
height: 85px;
}
.img_wrapper.superZoom .zoom_btn {
top: 1rem;
right: 0.5rem;
width: 70px;  
height: 70px;
}
.zoom_btn.zoomed {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: -2rem;
right: -2rem;
width: 90px;
height: 90px;
font-size: 2.5rem;
border-radius: 50%;
z-index: 100;
border: 2px solid black;
text-align: center;
cursor: pointer;
background-color: black;          
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.video_wrapper{
display: flex;
justify-content: center;
position: relative;
max-width: 100%;
overflow: visible;
max-height: 60vh;
height: auto;
margin-bottom: 4rem;
}
.music_video button{
max-width: 60vw;
font-size: 2.5rem;
}
} @media (min-width:768px) and (max-width:1024px) and (max-height:700px) {
.back_btn_2{
position:absolute; top:12px; left:-20px; z-index:30;
margin-left: 1rem;
}
.back_btn_2 button{
width: 20vw;
}
.slide_show{
width:auto; height:auto;
}
.start_page{
gap: 0.5rem;
}
.title_container{
display:flex;
width: auto;
order:2;
}
#slideshow_title{
margin:.5rem auto 1rem;
font-size:clamp(22px,3.4vw,34px);
text-align:center;
width:40vw;
}
.image_container{ max-width:100%; }
.current_img{
width:auto;
max-width:92vw;
max-height:70vh;
height:auto;
object-fit:contain;
display:block;
}
.img_wrapper{
order:1;
}
.img_wrapper.zoomed {
transform: scale(1.25);
}
.img_wrapper.superZoom {
transform: scale(1.3);
}
.img_wrapper.miniZoom{
transform:scale(1.05);
}
.nav-buttons{
position:static;
display:flex; justify-content:center; gap:1rem;
margin-top:.75rem;
order:3;
}
.prev_btn,
.next_btn{
position:absolute;
top:45%;
transform:translateY(-50%);
width:clamp(64px,10vw,90px);
height:clamp(64px,10vw,90px);
border-radius:50%;
border:none;
cursor:pointer;
background-color:#000;
z-index:2000;
box-shadow:0 6px 10px rgba(0,0,0,.3);
background-position:center;
background-repeat:no-repeat;
background-size:55% 55%;
}
.prev_btn{ left:10px; }
.next_btn{ right:10px; }
.zoom_btn{
width:clamp(64px,10vw,90px);
height:clamp(64px,10vw,90px);
top:-.25rem; right:-.25rem;
}
}