body {
font-family: "Mali", serif;
font-weight: 200;
background-color: #f9f9f9;
color: #000000;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
overflow: hidden;
}

.results-page {
background: url('ImagesFolder/bgplaceholder.png') no-repeat center center;
width: 100vw; /* Full viewport width */
height: 100vh; /* Full viewport height */
position: fixed; /* Ensures it covers the full screen */
top: 0;
left: 0;
display: flex; /* Enables flexbox */
flex-direction: column;
justify-content: center; /* Centers content vertically */
align-items: center; /* Centers content horizontally */
text-align: center;
}

#result {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    text-align: center;
    width: 100%;
    height: 100vh;
}

.container {
width: 70vw;
max-width: 800px;
padding: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
background-color: #f9f9f9;
border-radius: 20px;
text-align: center;

/* Flex layout to center inner content */
display: flex;
flex-direction: column;
justify-content: center; /* Centers content vertically */
align-items: center;     /* Centers content horizontally */
min-height: 60vh; 
}

h1 { /* Which Jellycat Are You? */
color: #00C2DE;
font-weight: 700;
font-size: 36px;
}

p { 
color: #000000;
font-size: 24px;
font-weight: bold;
margin-top: 0px;
margin: 10px 20px;
}

.plushsona {
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
}

.welcome-text {
    font-size: 24px;
    color: #ffffff;
    font-style: italic;
}

.quiz-credits {
font-family: sans-serif;
color: #333;
font-size: 10px;
font-weight: normal;
text-align: center;
padding: 0 15px;
}

.quiz-image {
width: auto;
height: 300px;
object-fit: cover;
display: inline-block;
margin: 20px auto;
}

.result-image {
width: 50vh;
height: auto;
display: inline-block;
margin: 40px auto;
}

.footer-wording {
color: #000000;
font-size: 10px;
font-weight: bold;
}

footer {
margin-top: 10px; /* adjust value as needed */
}

/* BUTTONS */
button {
font-family: "Sono", serif;
background-color: #00C2DE;
color: #000000;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
margin: 10px 0;
}

button:hover {
background-color: #A9E4F1;
}

/* Floating Circle */
.floating-circle {
  width: 150px;
  height: 150px;
  background: url('ImagesFolder/floatingcircle.png') no-repeat center center;
  background-size: cover;
  border-radius: 0%;  /* Change to 50% if you want a circular shape */
  position: fixed;
  top: 20%;          /* Adjusts vertical position */
  left: 100vw;       /* Start fully off-screen to the right */
  transform: translateY(-50%);
  cursor: pointer;
  animation: slideAcross 20s linear infinite; /* Repeats indefinitely */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
  z-index: 1000;     /* Ensures it appears above other content */
}

@keyframes slideAcross {
  0% {
    left: 100vw;    /* Start off-screen right */
  }
  100% {
    left: -150px;   /* End off-screen left */
  }
}

/* MEDIA QUERY FOR MOBILE DEVICES */
@media only screen and (max-width: 600px) {
html {
/* Responsive font size that scales between 9px and 14px based on viewport height */
font-size: clamp(9px, 10vh, 14px);
}

body {
margin: 0;
padding: 0;
overflow: hidden;
display: block;
}

.container {
width: 100vw;
height: 85vh;       /* Adjust as needed, or 100vh for full viewport height */
padding: 30px;
margin: 0;
box-sizing: border-box;

display: flex;
flex-direction: column;
justify-content: center; /* centers content vertically within the container */
align-items: center;     /* centers content horizontally within the container */
}

.quiz-image {
height: 200px; /* reduced height for mobile */
margin: 10px auto;
}
}