CSS Reference

CSS controls how the website looks. In this project, many design choices are stored as variables near the top of revised.css.

CSS Variables

Variables let you change a design in one place and reuse that value throughout the site.

:root {
    --primaryColor1: #0b2545;
    --primaryColor2: #102033;
    --accentColor1: #f26a21;
    --accentColor2: #ffb347;
}

color: blue;
background-color: orange;
font-size: 24px;
padding: 20px;
margin: 20px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);

A class begins with a period in CSS. It styles all HTML elements using that class name.

.card {
    background-color: white;
    padding: 20px;
    border-radius: 14px;
}

A media query changes the layout on smaller screens.

@media (max-width: 800px) {
    .player-grid {
        grid-template-columns: 1fr;
    }
}