html,
body{
    max-width: 100vw;
    overflow:auto;
    scroll-behavior: smooth;
}

:root {
    --white: #F6F6F6;
    --red: #BA3E2D;
    --blue: #35374B;
    --black: #000000;
}

/* <!--typography --> */
h1, h2, h3 {
  font-family: "Stardos Stencil", system-ui;
  font-weight: 400;
  font-style: normal;
}

p {
    font-family: 'Sometype Mono', monospace;
    font-size: 16px;
    line-height: 31px;
    color:black;
    max-width: 75ch;
}

h1 {
    font-family: "Stardos Stencil", system-ui;
    font-size: 36px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    
}
h2 {
    font-family: "Stardos Stencil", system-ui;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    
}
h3 {
    font-family: "Stardos Stencil", system-ui;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

body {
  background-image: url(Website-photos/background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 70%;
    margin: 0 auto;
}

.images {
    width: 100%;
    height: auto;
}
.videos {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

/* Responsive video container */
.videos {
        /* prefer nearly-full viewport on small screens, cap on large screens */
        width: clamp(280px, 90vw, 1200px);
        aspect-ratio: 16 / 9;
        max-width: 100%;
        margin: 0 auto 1rem;
        box-sizing: border-box;
}

/* Make embedded players and <video> scale to the container */
.videos,
.videos iframe,
.videos video,
.videos embed,
.videos object {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
}

/* Small-screen fallback: remove aspect-ratio if undesired, allow natural height via 56.25% trick */
@media (max-width: 420px) {
    .videos {
        width: 95vw;
        aspect-ratio: auto;
    }
}

/* Cards */
.card {
        /* responsive width: min 220px, prefer 45vw, max 600px */
        width: clamp(220px, 45vw, 600px);
        /* preserve original 3:2 proportion (600x400) while keeping responsive height */
        aspect-ratio: 3 / 2;
        max-width: 100%;
        margin: 0 auto 20px;
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        /* play nicely when inside flex containers */
        flex: 0 1 auto;
}

/* Fallback for very small/old browsers: media query reduces width */
@media (max-width: 360px) {
    .card {
        width: 95vw;
    }
}

/* Cards-Home */
.phantoms-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/ghost.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.hoaxes-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/Hall-of-hoaxes.png);
    background-repeat: no-repeat;
    background-size: cover; 
}

.fresh-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/Fresh-files.png);
    background-repeat: no-repeat;
    background-size: cover; 
}
/* Cards-Phantoms of fact */
.dyatlov-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/hikers.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.taured-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/taured-man.jpg);
    background-repeat: no-repeat;
    background-size: cover; 
}
.titanic-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/titanic-afloat.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* Cards-Hall of hoaxes */
.moon-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/moon-landing.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.bermuda-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/the-triangle.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.hollow-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/hollow-earth.png);
    background-repeat: no-repeat;
    background-size: cover;
}
/* Cards-Fresh files */
.boeing-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/Boeing-plane.jpg);
    background-repeat: no-repeat;
    background-size: cover;   
}

.internet-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/404-erroe.jpg);
    background-repeat: no-repeat;
    background-size: cover; 
}

.malaysia-bg {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(Website-photos/Malaysia-plane.jpg);
    background-repeat: no-repeat;
    background-size: cover; 
}

.decoration {
    text-decoration: none;
    transition: transform 0.5s ease;
}

.decoration:hover, .decoration:focus {
    transform: scale(1.1);
}

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
}

#backToTopBtn:hover {
    background-color: #35374B;
}