@font-face { font-family: "DOS24"; src: url('fonts/Web437_DOS-V_re_ANK24.woff') format('woff'); }

 body { font-family: "DOS24", monospace; background-image: url('mediabg.png'); background-repeat: repeat; background-attachment: fixed;  }

.wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body {
    width: 100%;
    overflow-x: hidden; 
}

header {
    text-align: center;
    width: 90%;
    border: 1px dotted black;
    background-color: white;
    padding:10px;

}

header h1 {
    font-size: 32px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

header p {
    font-size: 18px;
    margin-bottom: 20px;
}

fieldset {
    border: 1px dotted black;
    display: inline-flex;
    gap: 15px;
    padding: 10px 20px;
    margin-bottom: 20px;
}

legend {
    padding: 0 10px;
    background-color: white;
}
.header-nav h1{
 padding: 3px;
}

.header-nav a {
    text-decoration: none;
    color: black;
    background-color: white;
    border: 1px dotted black;
    padding: 2px 8px;
}

.header-nav a:hover {
    color: white;
    background-color: black;
}

body { background-attachment: scroll; }
        body:has(#movies:not(:checked)) .movies,
		body:has(#books:not(:checked)) .books,
		body:has(#music:not(:checked)) .music,
		body:has(#tv:not(:checked)) .tv { 
			display: none;
		}
		body:has(#movies:checked) .movies,
		body:has(#books:checked) .books,
		body:has(#music:checked) .music,
        body:has(#tv:checked) .tv { 
			display: block;
		}

.parent-container {
    display: flex;
    flex-wrap: wrap;     
    justify-content: center;
    gap: 40px;
    padding: 50px;
    align-items: flex-start;
    width: 100%;  
}

.polaroid-container { 
    perspective: 1000px; 
    display:block; 
    cursor: pointer; 
     }

.polaroid-front:hover { transform: scale(1.05) rotate(0deg); transition: transform 0.3s ease; }

.flip-toggle { display: none; }

.polaroid-inner { 
    position: relative; 
    width: 200px; 
    height: 250px; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
    transform-style: preserve-3d; 
    transform-origin: center; 
    transform: translateX(0px);
}

.flip-toggle:checked + .polaroid-inner { transform: rotateY(180deg); } 

.polaroid-front, .polaroid-back { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    backface-visibility: hidden; 
    background: white;
    padding: 12px;
    padding-bottom: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
    display: inline-block; inset: 0;
    box-sizing: border-box;
    }

.polaroid-front img {
    display: block;
    width: 100%;
    height: 180px; 
    object-fit: cover; 
    object-position: center;
    border: 1px dotted #eee;
}

.polaroid-back { transform: rotateY(180deg); background: #FFFFFF; 
} 

.polaroid-container.polaroid-tall .polaroid-inner {
    height: 320px; 
    width: 200px;  
}
.polaroid-tall .polaroid-back {
    background-color: #FFFFFF; 
    height: 100%;
    width: 100%;
}

.polaroid-container.polaroid-tall .polaroid-front img {
    height: 250px; 
    object-fit: cover;
}