:root {
  --background: #34292D;
  --secondary: #CD447E;
  --primary: #E45D50;    
  
  --grey: #BDA8B4;
  --white: #FFF;
  --black: #252525;
  
  
  --h1-desk: 50px;
  --h2-desk: 40px;
  --h3-desk: 30px;
  --h4-desk: 24px;
  --p-desk: 18px;
  --btn-desk: 22px;
  
  --h1-tab: 40px;
  --h2-tab: 30px;
  --h3-tab: 24px;
  --h4-tab: 20px;
  --p-tab: 18px;
  --button-tab: 22px;
  
  --h1-mob: 30px;
  --h2-mob: 25px;
  --h3-mob: 20px;
  --h4-mob: 18px;
  --p-mob: 14px;
  --button-mob: 16px;
}
@font-face {
    font-family: 'Bungee Inline';
    src: url('../shared/fonts/BungeeInline-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Mulish';
    src: url('../shared/fonts/Mulish-VariableFont_wght.woff2') format('woff2');
    font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--background);
  overflow-x: hidden;
  font-family: 'Mulish', sans-serif; 
  color: var(--white);
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  
}
h1, h2 {
  font-family: 'Bungee Inline', sans-serif;
  font-style: normal;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

h3 {
  font-family: 'Mulish', sans-serif;
  font-style: normal;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

h4 {
  font-family: 'Mulish', sans-serif;
  font-style: normal;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

button {
  font-family: 'Mulish', sans-serif;
  font-style: normal;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

p, a, li {
  font-family: 'Mulish', sans-serif;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
/* Desktop styles (1025px and above) */
@media (min-width: 1025px) {
  p, a, li { font-size: var(--p-desk); }
  h1 { font-size: var(--h1-desk); }
  h2 { font-size: var(--h2-desk); }
  h3 { font-size: var(--h3-desk); }
  h4 { font-size: var(--h4-desk); }
  button { font-size: var(--btn-desk); }
}

/* Tablet styles */
@media (min-width: 569px) and (max-width: 1024px) {
  p, a, li { font-size: var(--p-tab); }
  h1 { font-size: var(--h1-tab); }
  h2 { font-size: var(--h2-tab); }
  h3 { font-size: var(--h3-tab); }
  h4 { font-size: var(--h4-tab); }
  button { font-size: var(--button-tab); }
}

/* Mobile styles */
@media (max-width: 568px) {
  p, a, li { font-size: var(--p-mob); }
  h1 { font-size: var(--h1-mob); }
  h2 { font-size: var(--h2-mob); }
  h3 { font-size: var(--h3-mob); }
  h4 { font-size: var(--h4-mob); }
  button { font-size: var(--button-mob); }
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}