/* CSS placeholders Will focus on thie later */

header {}

html {
 
  scroll-behavior: smooth;
  scroll-padding-bottom: 80px;

}

.flames-banner { /* . is the class */
  width: 100%;              /* Fyller bredden */
  height: auto;             /* Behåller hela bilden */
  display: block;           /* Tar bort liten glipa under bilden */
}



@media (max-width: 600px) { /* @ rules for diffrent media, this is for the phone */
  .flames-banner {
    height: 180px;
  }
}

body {
  background: #000000;  /* Makes the page background match the black in the banner */
  body {
  font-family: 'Roboto', sans-serif; /* clean readable text */
  background: #000;
  color: #eee;
}

h1, h2, h3 {
  font-family: 'Orbitron', sans-serif; /* racing style */
  letter-spacing: 1px;
}
}

main {}

main,
header,
footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.event-section {
  padding: 50px 0;
}

section {}

nav {               /* If I understand this correct I will make it stay in the bottom*/
  position: fixed;   /* Sticks it to the screen */ 
  bottom: 0;         /* Place at bottom */
  left: 0;
  width: 100%;       /* Full width */

  background: #111;  /* So it stands out */
  padding: 10px 0;
}

nav ul { /* ul makes it target the list inside nav*/
     display: flex; /* Will try with flexbox from lesson 10 */
  gap: 20px; /* this will decide the space between the buttons in the navigation */
  list-style: none; /* Can remember what whis does... */
  padding: 0; /*first "box" after the content */

  justify-content: center; /* center the items on a horizontall line. Don't know if this will be good on a phone... */
}

nav a { /*  to control and remove default web browser link properties */
  text-decoration: none; /* Removes underline */
  color: inherit;        /* Uses same color as parent instead of blue */
    padding: 16px 32px;    /* Creates space inside each link (like a button) will try to find a guide for a size */
  /* border-radius:  px ; */    /* Slightly rounded corners feels modern and boring, might go for a classic vintage html look */
  background: #333;      /* Dark background */
  color: gold;          /* Gold, will go for black and gold theme for now text */
  }
  
  nav a:hover {
  background: #555; /* Changes color when hovering */
}

/* .map-button {
  display: inline-block;
  padding: 12px 24px;
  background: #333;
  color: gold;
  text-decoration: none;
}

.map-button:hover {
  background: #555;
} */

footer{}

.signup-form {
}

.form-field {
}

.form-actions {
}

/* COMPONENTS */
.event-section {
  /* padding: 20px; */
}