/* Global styles */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; background: url('https://images.pexels.com/photos/1552249/pexels-photo-1552249.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed; background-size: cover; color: white; } a { color: white; text-decoration: none; } ul { list-style: none; } h1, h2, h3 { margin-bottom: 1rem; text-align: center; } /* Header styles */ header { display: flex; justify-content: space-between; align-items: center; padding: 2rem; background-color: rgba(0, 0, 0, 0.7); } nav ul { display: flex; } nav li { margin-right: 1rem; } nav a { font-size: 1.2rem; font-weight: bold; letter-spacing: 1px; padding: 1rem; transition: all 0.2s ease-in-out; } nav a:hover { background-color: white; color: black; } /* Main styles */ main { max-width: 800px; margin: 0 auto; padding: 2rem; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); } section { margin-bottom: 2rem; } h2 { font-size: 2rem; text-align: center; color: rgba(255, 255, 255, 0.773) } ul li { margin-bottom: 0.5rem; } button { display: block; margin: 0 auto; font-size: 1.2rem; font-weight: bold; letter-spacing: 1px; padding: 1rem 2rem; background-color: rgba(109, 21, 21, 0.571); color: rgb(255, 255, 255); border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s ease-in-out; } button:hover { background-color: black; color: white; } /* Timer styles */ .timer { display: flex; justify-content: center; align-items: center; margin: 2rem 0; font-size: 3rem; font-weight: bold; letter-spacing: 1px; } /* Workout set styles */ .set { position: relative; padding-left: 25px; } .set:before { content: 'Set ' attr(data-set); position: absolute; left: 0; color: blue; } .set-icon { position: absolute; top: 0; right: -20px; color: green; } .checkmark { margin-left: 5px; color: green; font-size: 1.2em; } .completed { text-decoration: line-through; } .finished { color: green; } .finished-set { background-color: green; } .finished { color: green; } .green { background-color: green; } h3 { color:#ddf6f8ac } .cardio-section { color: rgb(255, 157, 157); } /* Add this CSS inside the section or an external CSS file */ /* Default font size */ body { font-size: 16px; } /* Media query for smaller screens */ @media (max-width: 768px) { body { font-size: 14px; } } /* Media query for even smaller screens */ @media (max-width: 480px) { body { font-size: 12px; } }