/* =====================================================
MIKHAIL FROMOZ
COMPLETE STYLE.CSS
===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #111;
color: #f5f5f5;
line-height: 1.7;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

a {
color: #d9b35f;
text-decoration: none;
transition: 0.3s ease;
}

a:hover {
color: #f3d48a;
}

/* =====================================================
HERO
===================================================== */

.hero {
position: relative;
min-height: 100vh;

```
background:
    linear-gradient(
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.25)
    ),
    url("../images/hero-background.jpg");

background-position: center center;
background-repeat: no-repeat;

/* IMPORTANT:
   Using contain instead of cover
   to test whether the collage is being cropped.
*/
background-size: contain;

background-color: #000;

display: flex;
align-items: center;
justify-content: center;

text-align: center;
```

}

.hero-content {
max-width: 900px;
padding: 40px 20px;
}

.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
color: #ffffff;
}

.hero h2 {
font-size: 1.6rem;
font-weight: 300;
margin-bottom: 25px;
color: #f0f0f0;
}

.hero p {
font-size: 1.2rem;
color: #ffffff;
}

/* =====================================================
SECTIONS
===================================================== */

section {
padding: 80px 0;
}

section:nth-child(even) {
background: #171717;
}

section:nth-child(odd) {
background: #111111;
}

h2.section-title {
text-align: center;
margin-bottom: 40px;
color: #d9b35f;
font-size: 2rem;
}

.section-content {
max-width: 900px;
margin: 0 auto;
}

/* ABOUT */

.about p {
margin-bottom: 20px;
}

/* RELEASE */

.release {
text-align: center;
}

.release-cover {
max-width: 400px;
width: 100%;
border-radius: 10px;
margin-bottom: 30px;
}

.release h3 {
font-size: 1.8rem;
margin-bottom: 15px;
}

.release p {
max-width: 700px;
margin: 0 auto;
}

/* SOCIAL */

.social-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}

.social-card {
background: #1d1d1d;
padding: 25px;
border-radius: 10px;
text-align: center;
border: 1px solid #2a2a2a;
transition: 0.3s ease;
}

.social-card:hover {
transform: translateY(-4px);
border-color: #d9b35f;
}

.social-card h3 {
color: #d9b35f;
margin-bottom: 10px;
}

/* GALLERY */

.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.gallery-grid img {
width: 100%;
display: block;
border-radius: 8px;
}

/* CONTACT */

.contact-form {
max-width: 700px;
margin: 0 auto;
}

.contact-form label {
display: block;
margin-bottom: 8px;
margin-top: 20px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 14px;
border: 1px solid #333;
background: #1a1a1a;
color: white;
border-radius: 5px;
}

.contact-form textarea {
min-height: 180px;
resize: vertical;
}

.contact-form button {
margin-top: 25px;
padding: 14px 30px;
background: #d9b35f;
color: #111;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
}

.contact-form button:hover {
background: #f3d48a;
}

/* FOOTER */

footer {
background: #0b0b0b;
padding: 40px 20px;
text-align: center;
}

footer p {
margin-bottom: 15px;
}

.footer-socials {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}

.footer-socials a {
color: #d9b35f;
font-weight: bold;
}

.footer-socials a:hover {
color: #f3d48a;
}

/* MOBILE */

@media (max-width: 900px) {

```
.social-grid {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-grid {
    grid-template-columns: repeat(2, 1fr);
}

.hero h1 {
    font-size: 3rem;
}

.hero h2 {
    font-size: 1.3rem;
}
```

}

@media (max-width: 600px) {

```
section {
    padding: 60px 0;
}

.hero {
    min-height: 90vh;
}

.hero h1 {
    font-size: 2.2rem;
}

.hero h2 {
    font-size: 1.1rem;
}

.hero p {
    font-size: 1rem;
}

.social-grid {
    grid-template-columns: 1fr;
}

.gallery-grid {
    grid-template-columns: 1fr;
}
```

}