/**
 * Default v1.1.0
 * Copyright 2023-2025 NJD Web. All rights reserved.
 * Licensed under ()
 */

@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Cabin:ital,wght@0,400..700;1,400..700&family=Kosugi+Maru&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('/css/card.css');
@import url('/css/comp/animation.css');

:root {
  /* Color */
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #00ec37;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --black: #000;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --red-power: #ff0000;

  /* default theme */
  --main-primary: #7CACF8;
  --main-second: #041e49;
  --main-three: #3168c0;
  --main-1: #eff5ff;
  --main-2: #dce8fd;

  /* Green theme */


  /* Orange theme */

  
  /* Pink theme */


  /* Yellow theme */


  /*Red theme */


  /* Purple theme */


  /* Black theme */




  /* Size */

  --size-title-h1: 36px;
  --size-title-h2: 30px;
  --size-title-h3: 24px;
  --size-title-h4: 20px;
  --size-title-h5: 18px;
  --size-title-h6: 16px;

  --size-text-h1: 24px;
  --size-text-h2: 20px;
  --size-text-h3: 18px;
  --size-text-h4: 16px;
  --size-text-h5: 14px;
  --size-text-h6: 12px;

  /* Size Border Radius */
  --border-raduis-default: 20px;
  --size-border-solid: 1px;
}

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

body {
  font-family: "Rubik", serif;
  font-weight: 400;
  font-style: normal;
  background-color: var(--background-primary);
  color: var(--color-primary);
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
}

.theme-default {

  --background-primary: var(--main-1);
  --background-secondary: var(--main-2);
  --background-third: #c0d7fd;
  --background-fourth: #95bffb;

  --background-over-play: rgba(0, 0, 0, 0.5);

  --bg-nav-mobile-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-mobile-secondary: hsl(218.77deg 100% 4.32% / 90%);

  --color-nav-primary: #7cacf8;
  --color-footer-primary: rgba(0, 73, 133, 0.459);

  --bg-nav-desktop-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-desktop-secondary: hsl(218.77deg 100% 4.32% / 90%);

  --bg-popup-message-primary: hsla(0, 0%, 100%, 0.9);
  --bg-popup-message-secondary: hsl(218.77deg 100% 4.32% / 90%);

  --bg-button-primary: #7cacf8;
  --bg-button-secondary: var(--white);
  --bg-button-third: #c0d7fd;
  --bg-button-fourth: transparent;
  --bg-button-fifth: var(--main-1);
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #c0d7fd;

  --bg-skeleton-primary: #ddd;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #eee 25%, var(--bg-skeleton-primary) 50%, #eee 75%);

  --bg-hover-button-primary: #c0d7fd;
  --bg-hover-button-secondary: var(--main-2);

  --bg-input-primary: var(--main-1);
  --bg-input-secondary: #000205;

  --color-border-input-primary: #c0d7fd;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #041e49;

  --bg-section-primary: var(--white);
  --bg-section-secondary: var(--main-2);

  --focus-input-primary: #000205;
  --focus-input-secondary: #000205;

  --hover-button-primary: #3f78f2;
  --hover-button-secondary: #000205;

  --color-text-button-primary: #041e49;
  --color-text-button-secondary: #021027;
  --color-text-button-third: var(--white);
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #000205;

  --color-text-title-primary: #333;
  --color-text-title-secondary: #000205;
  --color-text-paragraph-primary: #4e4e4e;
  --color-text-paragraph-secondary: #000205;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #c0d7fd;
  --color-border-button-third: #182253;

  --color-link-head-primary: #333;
  --color-link-head-secondary: #333;
  --color-link-body-primary: #666;
  --color-link-body-secondary: #666;

  --color-input-primary: #333;
  --color-input-secondary: #000205;

  --color-border-section-primary: #c0d7fd;
  --color-border-section-secondary: #000205;

}

.theme-dark-default {
 
  --background-primary: #00060f;
  --background-secondary: #000c1f;
  --background-third: #001433;
  --background-fourth: #001d4d;
  
  --background-over-play: rgba(255, 255, 255, 0.5);

  --bg-nav-mobile-primary: hsl(218.77deg 100% 4.32% / 90%);
  --bg-nav-mobile-secondary: hsla(0, 0%, 100%, 0.9);

  --color-nav-primary: #7cacf8;
  --color-footer-primary: rgba(0, 73, 133, 0.459);

  --bg-nav-desktop-primary: hsl(218.77deg 100% 4.32% / 90%);
  --bg-nav-desktop-secondary: hsla(0, 0%, 100%, 0.9) ;

  --bg-popup-message-primary: hsl(218.77deg 100% 4.32% / 90%);
  --bg-popup-message-secondary: hsla(0, 0%, 100%, 0.9) ;

  --bg-button-primary: #041e49;
  --bg-button-secondary: #000205;
  --bg-button-third: #001433;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #00060f;
  --bg-button-sixth: #363636;
  --bg-button-seventh: #001433;

  --bg-skeleton-primary: #363636;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #292929 25%, var(--bg-skeleton-primary) 50%, #292929 75%);

  --bg-hover-button-primary: #001433;
  --bg-hover-button-secondary: #000c1f;

  --bg-input-primary: #00060f;
  --bg-input-secondary: #fff;

  --color-border-input-primary: #001433;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #eaf8ff;

  --bg-section-primary: #000205;
  --bg-section-secondary: #000c1f;

  --focus-input-primary: #fff;
  --focus-input-secondary: #fff;

  --hover-button-primary: #182253;
  --hover-button-secondary: #fff;

  --color-text-button-primary: #7cacf8;
  --color-text-button-secondary: #eaf8ff;
  --color-text-button-third: #000205;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #fff;

  --color-text-title-primary: #f6f6f6;
  --color-text-title-secondary: #fff;
  --color-text-paragraph-primary: #d1d1d1;
  --color-text-paragraph-secondary: #fff;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #001433;
  --color-border-button-third: var(--main-1);

  --color-link-head-primary: #f6f6f6;
  --color-link-head-secondary: #f6f6f6;
  --color-link-body-primary: #d1d1d1;
  --color-link-body-secondary: #d1d1d1;

  --color-input-primary: #f6f6f6;
  --color-input-secondary: #fff;

  --color-border-section-primary: #000c1f;
  --color-border-section-secondary: #fff;
}

 .theme-green {

  --background-primary: #effef1;
  --background-secondary: #d9ffdd;
  --background-third: #b6fcbe;
  --background-fourth: #7cf88c;

  --background-over-play: rgba(0, 0, 0, 0.5);

  --bg-nav-mobile-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-mobile-secondary: hsl(95.77deg  100% 4.32% / 90%);

  --color-nav-primary: #7cf88c;
  --color-footer-primary: rgba(106, 255, 0, 0.459);

  --bg-nav-desktop-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-desktop-secondary: hsl(95.77deg  100% 4.32% / 90%);

  --bg-popup-message-primary: hsla(0, 0%, 100%, 0.9);
  --bg-popup-message-secondary: hsl(95.77deg  100% 4.32% / 90%);

  --bg-button-primary: #7cf88c;
  --bg-button-secondary: var(--white);
  --bg-button-third: #c6f3a3;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #f2fce9;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #c6f3a3;

  --bg-skeleton-primary: #e2f9ce;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #e2f9ce 25%, var(--bg-skeleton-primary) 50%, #e2f9ce 75%);

  --bg-hover-button-primary: #c6f3a3;
  --bg-hover-button-secondary: #e2f9ce;

  --bg-input-primary: #f2fce9;
  --bg-input-secondary: #000205;

  --color-border-input-primary: #c6f3a3;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #6aff00;

  --bg-section-primary: var(--white);
  --bg-section-secondary: #e2f9ce;

  --focus-input-primary: #6aff00;
  --focus-input-secondary: #6aff00;

  --hover-button-primary: #c6f3a3;
  --hover-button-secondary: #000205;

  --color-text-button-primary: #173101;
  --color-text-button-secondary: #173003;
  --color-text-button-third: var(--white);
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #173003;

  --color-text-title-primary: #333;
  --color-text-title-secondary: #000205;
  --color-text-paragraph-primary: #4e4e4e;
  --color-text-paragraph-secondary: #000205;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #c6f3a3;
  --color-border-button-third: #295318;

  --color-link-head-primary: #333;
  --color-link-head-secondary: #333;
  --color-link-body-primary: #666;
  --color-link-body-secondary: #666;

  --color-input-primary: #173003;
  --color-input-secondary: #000205;

  --color-border-section-primary: #c6f3a3;
  --color-border-section-secondary: #000205;
}

.theme-dark-green {

  --background-primary: #000f04;
  --background-secondary: #001f08;
  --background-third: #00330d;
  --background-fourth: #004d13;

  --background-over-play: rgba(255, 255, 255, 0.5);

  --bg-nav-mobile-primary: hsl(95.77deg  100% 4.32% / 90%);
  --bg-nav-mobile-secondary: hsla(0, 0%, 100%, 0.9);

  --color-nav-primary: #7cf88c;
  --color-footer-primary: rgba(106, 255, 0, 0.459);

  --bg-nav-desktop-primary: hsl(95.77deg  100% 4.32% / 90%);
  --bg-nav-desktop-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-popup-message-primary: hsl(95.77deg  100% 4.32% / 90%);
  --bg-popup-message-secondary: hsla(0, 0%, 100%, 0.9) ;

  --bg-button-primary: #004d13;
  --bg-button-secondary: #040f00;
  --bg-button-third: #00330d;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #000f04;
  --bg-button-sixth: #363636;
  --bg-button-seventh: #00330d;

  --bg-skeleton-primary: #041f00;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #093300 25%, var(--bg-skeleton-primary) 50%, #093300 75%);

  --bg-hover-button-primary: #00330d;
  --bg-hover-button-secondary: #001f08;

  --bg-input-primary: #040f00;
  --bg-input-secondary: #fff;

  --color-border-input-primary: #00330d;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #044915;

  --bg-section-primary: #040f00;
  --bg-section-secondary: #001f08;

  --focus-input-primary: #fff;
  --focus-input-secondary: #fff;

  --hover-button-primary: #093300;
  --hover-button-secondary: #fff;

  --color-text-button-primary: #7cf88c;
  --color-text-button-secondary: #eaf8ff;
  --color-text-button-third: #040f00;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #6aff00;

  --color-text-title-primary: #f6f6f6;
  --color-text-title-secondary: #fff;
  --color-text-paragraph-primary: #d1d1d1;
  --color-text-paragraph-secondary: #fff;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #00330d;
  --color-border-button-third: #6aff00;

  --color-link-head-primary: #f6f6f6;
  --color-link-head-secondary: #f6f6f6;
  --color-link-body-primary: #d1d1d1;
  --color-link-body-secondary: #d1d1d1;

  --color-input-primary: #6aff00;
  --color-input-secondary: #040f00;

  --color-border-section-primary: #093300;
  --color-border-section-secondary: #6aff00;
}

/* Orange */
.theme-orange {

  --background-primary: #fff7e6;
  --background-secondary: #ffe0b2;
  --background-third: #ffcc80;
  --background-fourth: #ff9800;

  --background-over-play: rgba(0, 0, 0, 0.5);

  --bg-nav-mobile-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-mobile-secondary: hsl(36.77deg 100% 4.32% / 90%);

  --color-nav-primary: #ff9800;
  --color-footer-primary: rgba(255, 152, 0, 0.459);

  --bg-nav-desktop-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-desktop-secondary: hsl(36.77deg 100% 4.32% / 90%);

  --bg-popup-message-primary: hsla(0, 0%, 100%, 0.9);
  --bg-popup-message-secondary: hsl(36.77deg 100% 4.32% / 90%);

  --bg-button-primary: #ff9800;
  --bg-button-secondary: var(--white);
  --bg-button-third: #ffcc80;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #fff7e6;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #ffcc80;

  --bg-skeleton-primary: #ffe0b2;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #ffe0b2 25%, var(--bg-skeleton-primary) 50%, #ffe0b2 75%);

  --bg-hover-button-primary: #ffcc80;
  --bg-hover-button-secondary: #ffe0b2;

  --bg-input-primary: #fff7e6;
  --bg-input-secondary: #000205;

  --color-border-input-primary: #ffcc80;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #ff9800;

  --bg-section-primary: var(--white);
  --bg-section-secondary: #ffe0b2;

  --focus-input-primary: #ff9800;
  --focus-input-secondary: #ff9800;

  --hover-button-primary: #ff9800;
  --hover-button-secondary: #ffe0b2;

  --color-text-button-primary: #7a4f01;
  --color-text-button-secondary: #7a4f01;
  --color-text-button-third: var(--white);
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #7a4f01;

  --color-text-title-primary: #333;
  --color-text-title-secondary: #000205;
  --color-text-paragraph-primary: #4e4e4e;
  --color-text-paragraph-secondary: #000205;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #ffcc80;
  --color-border-button-third: #ff9800;

  --color-link-head-primary: #333;
  --color-link-head-secondary: #333;
  --color-link-body-primary: #666;
  --color-link-body-secondary: #666;

  --color-input-primary: #7a4f01;
  --color-input-secondary: #000205;

  --color-border-section-primary: #ffcc80;
  --color-border-section-secondary: #ff9800;
}

.theme-dark-orange {

  --background-primary: #0f0800;
  --background-secondary: #1f1000;
  --background-third: #331b00;
  --background-fourth: #4d2900;

  --background-over-play: rgba(255, 255, 255, 0.1);

  --bg-nav-mobile-primary: hsl(36.77deg 100% 4.32% / 90%);
  --bg-nav-mobile-secondary: hsla(0, 0%, 100%, 0.9);

  --color-nav-primary: #f8b87c;
  --color-footer-primary: rgba(255, 152, 0, 0.459);

  --bg-nav-desktop-primary: hsl(36.77deg 100% 4.32% / 90%);
  --bg-nav-desktop-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-popup-message-primary: hsl(36.77deg 100% 4.32% / 90%);
  --bg-popup-message-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-button-primary: #4d2900;
  --bg-button-secondary: #2d1900;
  --bg-button-third: #331b00;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #0f0800;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #331b00;

  --bg-skeleton-primary: #3d2600;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #ff9800 25%, var(--bg-skeleton-primary) 50%, #ff9800 75%);

  --bg-hover-button-primary: #331b00;
  --bg-hover-button-secondary: #1f1000;

  --bg-input-primary: #0f0800;
  --bg-input-secondary: #fff;

  --color-border-input-primary: #4d2900;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #ff9800;

  --bg-section-primary: #2d1900;
  --bg-section-secondary: #1f1000;

  --focus-input-primary: #ff9800;
  --focus-input-secondary: #ff9800;

  --hover-button-primary: #ff9800;
  --hover-button-secondary: #3d2600;

  --color-text-button-primary: #f8b87c;
  --color-text-button-secondary: #ff9800;
  --color-text-button-third: #2d1900;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #ffcc80;

  --color-text-title-primary: #f6f6f6;
  --color-text-title-secondary: #fff;
  --color-text-paragraph-primary: #d1d1d1;
  --color-text-paragraph-secondary: #fff;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #4d2900;
  --color-border-button-third: #ff9800;

  --color-link-head-primary: #f6f6f6;
  --color-link-head-secondary: #f6f6f6;
  --color-link-body-primary: #d1d1d1;
  --color-link-body-secondary: #d1d1d1;

  --color-input-primary: #ffcc80;
  --color-input-secondary: #2d1900;

  --color-border-section-primary: #4d2900;
  --color-border-section-secondary: #ff9800;
}

/* Pink */

.theme-pink {

  --background-primary: #fff0f6;
  --background-secondary: #ffd6e7;
  --background-third: #ffb6d5;
  --background-fourth: #e83e8c;

  --background-over-play: rgba(0, 0, 0, 0.5);

  --bg-nav-mobile-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-mobile-secondary: hsl(332.77deg 79% 4.32% / 90%);

  --color-nav-primary: #e83e8c;
  --color-footer-primary: rgba(232, 62, 140, 0.459);

  --bg-nav-desktop-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-desktop-secondary: hsl(332.77deg 79% 4.32% / 90%);

  --bg-popup-message-primary: hsla(0, 0%, 100%, 0.9);
  --bg-popup-message-secondary: hsl(332.77deg 79% 4.32% / 90%);

  --bg-button-primary: #e83e8c;
  --bg-button-secondary: var(--white);
  --bg-button-third: #ffb6d5;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #fff0f6;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #ffb6d5;

  --bg-skeleton-primary: #ffd6e7;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #ffd6e7 25%, var(--bg-skeleton-primary) 50%, #ffd6e7 75%);

  --bg-hover-button-primary: #ffb6d5;
  --bg-hover-button-secondary: #ffd6e7;

  --bg-input-primary: #fff0f6;
  --bg-input-secondary: #000205;

  --color-border-input-primary: #ffb6d5;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #e83e8c;

  --bg-section-primary: var(--white);
  --bg-section-secondary: #ffd6e7;

  --focus-input-primary: #e83e8c;
  --focus-input-secondary: #e83e8c;

  --hover-button-primary: #e83e8c;
  --hover-button-secondary: #ffd6e7;

  --color-text-button-primary: #7a014f;
  --color-text-button-secondary: #7a014f;
  --color-text-button-third: var(--white);
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #7a014f;

  --color-text-title-primary: #333;
  --color-text-title-secondary: #000205;
  --color-text-paragraph-primary: #4e4e4e;
  --color-text-paragraph-secondary: #000205;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #ffb6d5;
  --color-border-button-third: #e83e8c;

  --color-link-head-primary: #333;
  --color-link-head-secondary: #333;
  --color-link-body-primary: #666;
  --color-link-body-secondary: #666;

  --color-input-primary: #7a014f;
  --color-input-secondary: #000205;

  --color-border-section-primary: #ffb6d5;
  --color-border-section-secondary: #e83e8c;
}

.theme-dark-pink {

  --background-primary: #0f0008;
  --background-secondary: #1f0011;
  --background-third: #33001c;
  --background-fourth: #4d002a;

  --background-over-play: rgba(255, 255, 255, 0.1);

  --bg-nav-mobile-primary: hsl(332.77deg 79% 4.32% / 90%);
  --bg-nav-mobile-secondary: hsla(0, 0%, 100%, 0.9);

  --color-nav-primary: #f87ccc;
  --color-footer-primary: rgba(232, 62, 140, 0.459);

  --bg-nav-desktop-primary: hsl(332.77deg 79% 4.32% / 90%);
  --bg-nav-desktop-secondary: hsla(0, 0%, 100%, 0.9) ;

  --bg-popup-message-primary: hsl(332.77deg 79% 4.32% / 90%);
  --bg-popup-message-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-button-primary: #49042a;
  --bg-button-secondary: #2d0020;
  --bg-button-third: #33001c;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #0f0008;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #33001c;

  --bg-skeleton-primary: #3d0030;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #e83e8c 25%, var(--bg-skeleton-primary) 50%, #e83e8c 75%);

  --bg-hover-button-primary: #33001c;
  --bg-hover-button-secondary: #1f0011;

  --bg-input-primary: #0f0008;
  --bg-input-secondary: #fff;

  --color-border-input-primary: #4d002a;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #e83e8c;

  --bg-section-primary: #2d0020;
  --bg-section-secondary: #1f0011;

  --focus-input-primary: #e83e8c;
  --focus-input-secondary: #e83e8c;

  --hover-button-primary: #e83e8c;
  --hover-button-secondary: #3d0030;

  --color-text-button-primary: #f87ccc;
  --color-text-button-secondary: #e83e8c;
  --color-text-button-third: #2d0020;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #ffb6d5;

  --color-text-title-primary: #f6f6f6;
  --color-text-title-secondary: #fff;
  --color-text-paragraph-primary: #d1d1d1;
  --color-text-paragraph-secondary: #fff;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #4d002a;
  --color-border-button-third: #e83e8c;

  --color-link-head-primary: #f6f6f6;
  --color-link-head-secondary: #f6f6f6;
  --color-link-body-primary: #d1d1d1;
  --color-link-body-secondary: #d1d1d1;

  --color-input-primary: #ffb6d5;
  --color-input-secondary: #2d0020;

  --color-border-section-primary: #4d002a;
  --color-border-section-secondary: #e83e8c;
}

/* Yellow */
.theme-yellow {

  --background-primary: #fffde7;
  --background-secondary: #fff9c4;
  --background-third: #fff176;
  --background-fourth: #ffc107;

  --background-over-play: rgba(0, 0, 0, 0.5);

  --bg-nav-mobile-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-mobile-secondary: hsl(45.77deg 100% 4.32% / 90%);

  --color-nav-primary: #ffc107;
  --color-footer-primary: rgba(255, 193, 7, 0.459);

  --bg-nav-desktop-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-desktop-secondary: hsl(45.77deg 100% 4.32% / 90%);

  --bg-popup-message-primary: hsla(0, 0%, 100%, 0.9);
  --bg-popup-message-secondary: hsl(45.77deg 100% 4.32% / 90%);

  --bg-button-primary: #ffc107;
  --bg-button-secondary: var(--white);
  --bg-button-third: #fff176;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #fffde7;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #fff176;

  --bg-skeleton-primary: #fff9c4;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #fff9c4 25%, var(--bg-skeleton-primary) 50%, #fff9c4 75%);

  --bg-hover-button-primary: #fff176;
  --bg-hover-button-secondary: #fff9c4;

  --bg-input-primary: #fffde7;
  --bg-input-secondary: #000205;

  --color-border-input-primary: #fff176;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #ffc107;

  --bg-section-primary: var(--white);
  --bg-section-secondary: #fff9c4;

  --focus-input-primary: #ffc107;
  --focus-input-secondary: #ffc107;

  --hover-button-primary: #ffc107;
  --hover-button-secondary: #fff9c4;

  --color-text-button-primary: #7a6a01;
  --color-text-button-secondary: #7a6a01;
  --color-text-button-third: var(--white);
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #7a6a01;

  --color-text-title-primary: #333;
  --color-text-title-secondary: #000205;
  --color-text-paragraph-primary: #4e4e4e;
  --color-text-paragraph-secondary: #000205;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #fff176;
  --color-border-button-third: #ffc107;

  --color-link-head-primary: #333;
  --color-link-head-secondary: #333;
  --color-link-body-primary: #666;
  --color-link-body-secondary: #666;

  --color-input-primary: #7a6a01;
  --color-input-secondary: #000205;

  --color-border-section-primary: #fff176;
  --color-border-section-secondary: #ffc107;
} 

.theme-dark-yellow {

  --background-primary: #0f0f00;
  --background-secondary: #1f1f00;
  --background-third: #333300;
  --background-fourth: #4c4d00;

  --background-over-play: rgba(255, 255, 255, 0.1);

  --bg-nav-mobile-primary: hsl(45.77deg 100% 4.32% / 90%);
  --bg-nav-mobile-secondary: hsla(0, 0%, 100%, 0.9) ;

  --color-nav-primary: #ffc107;
  --color-footer-primary: rgba(255, 193, 7, 0.459);

  --bg-nav-desktop-primary: hsl(45.77deg 100% 4.32% / 90%);
  --bg-nav-desktop-secondary: hsla(0, 0%, 100%, 0.9) ;

  --bg-popup-message-primary: hsl(45.77deg 100% 4.32% / 90%);
  --bg-popup-message-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-button-primary: #89680a;
  --bg-button-secondary: #2d2a00;
  --bg-button-third: #333300;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #0f0f00;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #333300;

  --bg-skeleton-primary: #3d3900;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #ffc107 25%, var(--bg-skeleton-primary) 50%, #ffc107 75%);

  --bg-hover-button-primary: #333300;
  --bg-hover-button-secondary: #1f1f00;

  --bg-input-primary: #0f0f00;
  --bg-input-secondary: #fff;

  --color-border-input-primary: #4c4d00;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #ffc107;

  --bg-section-primary: #2d2a00;
  --bg-section-secondary: #4c4d00;

  --focus-input-primary: #ffc107;
  --focus-input-secondary: #ffc107;

  --hover-button-primary: #ffc107;
  --hover-button-secondary: #3d3900;

  --color-text-button-primary: #fff176;
  --color-text-button-secondary: #ffc107;
  --color-text-button-third: #2d2a00;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #fff176;

  --color-text-title-primary: #f6f6f6;
  --color-text-title-secondary: #fff;
  --color-text-paragraph-primary: #d1d1d1;
  --color-text-paragraph-secondary: #fff;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #4c4d00;
  --color-border-button-third: #ffc107;

  --color-link-head-primary: #f6f6f6;
  --color-link-head-secondary: #f6f6f6;
  --color-link-body-primary: #d1d1d1;
  --color-link-body-secondary: #d1d1d1;

  --color-input-primary: #fff176;
  --color-input-secondary: #2d2a00;

  --color-border-section-primary: #4c4d00;
  --color-border-section-secondary: #fff;
}

/* Red */

.theme-red {

  --background-primary: #fff0f0;
  --background-secondary: #ffd6d6;
  --background-third: #ffb6b6;
  --background-fourth: #dc3545;

  --background-over-play: rgba(0, 0, 0, 0.5);

  --bg-nav-mobile-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-mobile-secondary: hsl(354.deg 70% 4.32% / 90%);

  --color-nav-primary: #dc3545;
  --color-footer-primary: rgba(220, 53, 69, 0.459);

  --bg-nav-desktop-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-desktop-secondary: hsl(354.deg 70% 4.32% / 90%);

  --bg-popup-message-primary: hsla(0, 0%, 100%, 0.9);
  --bg-popup-message-secondary: hsl(354.deg 70% 4.32% / 90%);

  --bg-button-primary: #dc3545;
  --bg-button-secondary: var(--white);
  --bg-button-third: #ffb6b6;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #fff0f0;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #ffb6b6;

  --bg-skeleton-primary: #ffd6d6;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #ffd6d6 25%, var(--bg-skeleton-primary) 50%, #ffd6d6 75%);

  --bg-hover-button-primary: #ffb6b6;
  --bg-hover-button-secondary: #ffd6d6;

  --bg-input-primary: #fff0f0;
  --bg-input-secondary: #000205;

  --color-border-input-primary: #ffb6b6;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #dc3545;

  --bg-section-primary: var(--white);
  --bg-section-secondary: #ffd6d6;

  --focus-input-primary: #dc3545;
  --focus-input-secondary: #dc3545;

  --hover-button-primary: #dc3545;
  --hover-button-secondary: #ffd6d6;

  --color-text-button-primary: #7a0101;
  --color-text-button-secondary: #7a0101;
  --color-text-button-third: var(--white);
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #7a0101;

  --color-text-title-primary: #333;
  --color-text-title-secondary: #000205;
  --color-text-paragraph-primary: #4e4e4e;
  --color-text-paragraph-secondary: #000205;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #ffb6b6;
  --color-border-button-third: #dc3545;

  --color-link-head-primary: #333;
  --color-link-head-secondary: #333;
  --color-link-body-primary: #666;
  --color-link-body-secondary: #666;

  --color-input-primary: #7a0101;
  --color-input-secondary: #000205;

  --color-border-section-primary: #ffb6b6;
  --color-border-section-secondary: #dc3545;
}


.theme-dark-red {

  --background-primary: #0f0000;
  --background-secondary: #1f0000;
  --background-third: #330000;
  --background-fourth: #4d0000;

  --background-over-play: rgba(255, 255, 255, 0.1);

  --bg-nav-mobile-primary: hsl(354.deg 70% 4.32% / 90%);
  --bg-nav-mobile-secondary: hsla(0, 0%, 100%, 0.9);

  --color-nav-primary: #dc3545;
  --color-footer-primary: rgba(220, 53, 69, 0.459);

  --bg-nav-desktop-primary: hsl(354.deg 70% 4.32% / 90%);
  --bg-nav-desktop-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-popup-message-primary: hsl(354.deg 70% 4.32% / 90%);
  --bg-popup-message-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-button-primary: #dc3545;
  --bg-button-secondary: #2d0000;
  --bg-button-third: #330000;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #0f0000;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #330000;

  --bg-skeleton-primary: #3d0000;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #dc3545 25%, var(--bg-skeleton-primary) 50%, #dc3545 75%);

  --bg-hover-button-primary: #8b1824;
  --bg-hover-button-secondary: #1f0000;

  --bg-input-primary: #0f0000;
  --bg-input-secondary: #fff;

  --color-border-input-primary: #570f16;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #dc3545;

  --bg-section-primary: #2d0000;
  --bg-section-secondary: #1f0000;

  --focus-input-primary: #dc3545;
  --focus-input-secondary: #dc3545;

  --hover-button-primary: #dc3545;
  --hover-button-secondary: #3d0000;

  --color-text-button-primary: #ffb6b6;
  --color-text-button-secondary: #dc3545;
  --color-text-button-third: #2d0000;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #ffb6b6;

  --color-text-title-primary: #f6f6f6;
  --color-text-title-secondary: #fff;
  --color-text-paragraph-primary: #d1d1d1;
  --color-text-paragraph-secondary: #fff;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #570f16;
  --color-border-button-third: #dc3545;

  --color-link-head-primary: #f6f6f6;
  --color-link-head-secondary: #f6f6f6;
  --color-link-body-primary: #d1d1d1;
  --color-link-body-secondary: #d1d1d1;

  --color-input-primary: #ffb6b6;
  --color-input-secondary: #2d0000;

  --color-border-section-primary: #570f16;
  --color-border-section-secondary: #dc3545;
}

/* Purple */
.theme-purple {

  --background-primary: #f6f0ff;
  --background-secondary: #e1d6ff;
  --background-third: #c6b6ff;
  --background-fourth: #6f42c1;

  --background-over-play: rgba(0, 0, 0, 0.5);

  --bg-nav-mobile-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-mobile-secondary:  hsl(261.77deg 51% 4.32% / 90%);

  --color-nav-primary: #6f42c1;
  --color-footer-primary: rgba(111, 66, 193, 0.459);

  --bg-nav-desktop-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-desktop-secondary: hsl(261.77deg 51% 4.32% / 90%);

  --bg-popup-message-primary: hsla(0, 0%, 100%, 0.9);
  --bg-popup-message-secondary: hsl(261.77deg 51% 4.32% / 90%);

  --bg-button-primary: #6f42c1;
  --bg-button-secondary: var(--white);
  --bg-button-third: #c6b6ff;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #f6f0ff;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #c6b6ff;

  --bg-skeleton-primary: #e1d6ff;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #e1d6ff 25%, var(--bg-skeleton-primary) 50%, #e1d6ff 75%);

  --bg-hover-button-primary: #c6b6ff;
  --bg-hover-button-secondary: #e1d6ff;

  --bg-input-primary: #f6f0ff;
  --bg-input-secondary: #000205;

  --color-border-input-primary: #c6b6ff;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #6f42c1;

  --bg-section-primary: var(--white);
  --bg-section-secondary: #e1d6ff;

  --focus-input-primary: #6f42c1;
  --focus-input-secondary: #6f42c1;

  --hover-button-primary: #6f42c1;
  --hover-button-secondary: #e1d6ff;

  --color-text-button-primary: #2e014f;
  --color-text-button-secondary: #2e014f;
  --color-text-button-third: var(--white);
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #2e014f;

  --color-text-title-primary: #333;
  --color-text-title-secondary: #000205;
  --color-text-paragraph-primary: #4e4e4e;
  --color-text-paragraph-secondary: #000205;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #c6b6ff;
  --color-border-button-third: #6f42c1;

  --color-link-head-primary: #333;
  --color-link-head-secondary: #333;
  --color-link-body-primary: #666;
  --color-link-body-secondary: #666;

  --color-input-primary: #2e014f;
  --color-input-secondary: #000205;

  --color-border-section-primary: #c6b6ff;
  --color-border-section-secondary: #6f42c1;
}


.theme-dark-purple {

  --background-primary: #09000f;
  --background-secondary: #13001f;
  --background-third: #1f0033;
  --background-fourth: #2f004d;

  --background-over-play: rgba(255, 255, 255, 0.1);

  --bg-nav-mobile-primary: hsl(261.77deg 51% 4.32% / 90%) ;
  --bg-nav-mobile-secondary:  hsla(0, 0%, 100%, 0.9);

  --color-nav-primary: #b875ff;
  --color-footer-primary: rgba(111, 66, 193, 0.459);

  --bg-nav-desktop-primary: hsl(261.77deg 51% 4.32% / 90%);
  --bg-nav-desktop-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-popup-message-primary: hsl(261.77deg 51% 4.32% / 90%);
  --bg-popup-message-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-button-primary: #6f42c1;
  --bg-button-secondary: #1a003d;
  --bg-button-third: #1f0033;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #09000f;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #1f0033;

  --bg-skeleton-primary: #2e006f;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #6f42c1 25%, var(--bg-skeleton-primary) 50%, #6f42c1 75%);

  --bg-hover-button-primary: #5b34a2;
  --bg-hover-button-secondary: #13001f;

  --bg-input-primary: #09000f;
  --bg-input-secondary: #fff;

  --color-border-input-primary: #412574;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #6f42c1;

  --bg-section-primary: #1a003d;
  --bg-section-secondary: #13001f;

  --focus-input-primary: #6f42c1;
  --focus-input-secondary: #6f42c1;

  --hover-button-primary: #6f42c1;
  --hover-button-secondary: #2e006f;

  --color-text-button-primary: #d7baf8;
  --color-text-button-secondary: #6f42c1;
  --color-text-button-third: #1a003d;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #5b34a2;

  --color-text-title-primary: #f6f6f6;
  --color-text-title-secondary: #fff;
  --color-text-paragraph-primary: #d1d1d1;
  --color-text-paragraph-secondary: #fff;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #412574;
  --color-border-button-third: #6f42c1;

  --color-link-head-primary: #f6f6f6;
  --color-link-head-secondary: #f6f6f6;
  --color-link-body-primary: #d1d1d1;
  --color-link-body-secondary: #d1d1d1;

  --color-input-primary: #c6b6ff;
  --color-input-secondary: #fff;

  --color-border-section-primary: #412574;
  --color-border-section-secondary: #fff;
}

/* Black */

.theme-black {

  --background-primary: #f6f6f6;
  --background-secondary: #e7e7e7;
  --background-third: #d1d1d1;
  --background-fourth: #b0b0b0;

  --background-over-play: rgba(0, 0, 0, 0.1);

  --bg-nav-mobile-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-mobile-secondary: hsl(0.77deg 0% 4.32% / 90%);

  --color-nav-primary: #888888;
  --color-footer-primary: rgba(0, 0, 0, 0.459);

  --bg-nav-desktop-primary: hsla(0, 0%, 100%, 0.9);
  --bg-nav-desktop-secondary: hsl(0.77deg 0% 4.32% / 90%);

  --bg-popup-message-primary: hsla(0, 0%, 100%, 0.9);
  --bg-popup-message-secondary: hsl(0.77deg 0% 4.32% / 90%);

  --bg-button-primary: #888888;
  --bg-button-secondary: var(--white);
  --bg-button-third: #d1d1d1;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #f6f6f6;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #d1d1d1;

  --bg-skeleton-primary: #232323;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #eee 25%, var(--bg-skeleton-primary) 50%, #eee 75%);

  --bg-hover-button-primary: #d1d1d1;
  --bg-hover-button-secondary: #e7e7e7;

  --bg-input-primary: #f6f6f6;
  --bg-input-secondary: #000;

  --color-border-input-primary: #d1d1d1;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #000000;

  --bg-section-primary: var(--white);
  --bg-section-secondary: #232323;

  --focus-input-primary: #fff;
  --focus-input-secondary: #fff;

  --hover-button-primary: #343a40;
  --hover-button-secondary: #000;

  --color-text-button-primary: #000000;
  --color-text-button-secondary: #d1d1d1;
  --color-text-button-third: #000;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #000;

  --color-text-title-primary: #333;
  --color-text-title-secondary: #000;
  --color-text-paragraph-primary: #4e4e4e;
  --color-text-paragraph-secondary: #000;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #d1d1d1;
  --color-border-button-third: #fff;

  --color-link-head-primary: #333;
  --color-link-head-secondary: #333;
  --color-link-body-primary: #666;
  --color-link-body-secondary: #666;

  --color-input-primary: #fff;
  --color-input-secondary: #181818;

  --color-border-section-primary: #d1d1d1;
  --color-border-section-secondary: #fff;
}

.theme-dark-black {

  --background-primary: #000000;
  --background-secondary: #181818;
  --background-third: #232323;
  --background-fourth: #343a40;

  --background-over-play: rgba(255, 255, 255, 0.1);

  --bg-nav-mobile-primary: hsl(0.77deg 0% 4.32% / 90%);
  --bg-nav-mobile-secondary: hsla(0, 0%, 100%, 0.9);

  --color-nav-primary: #888888;
  --color-footer-primary: rgba(0, 0, 0, 0.459);

  --bg-nav-desktop-primary: hsl(0.77deg 0% 4.32% / 90%);
  --bg-nav-desktop-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-popup-message-primary: hsl(0.77deg 0% 4.32% / 90%);
  --bg-popup-message-secondary: hsla(0, 0%, 100%, 0.9);

  --bg-button-primary: #181818;
  --bg-button-secondary: #000;
  --bg-button-third: #232323;
  --bg-button-fourth: transparent;
  --bg-button-fifth: #000;
  --bg-button-sixth: #bbbbbb;
  --bg-button-seventh: #232323;

  --bg-skeleton-primary: #181818;
  --linear-gradient-skeleton-primary: linear-gradient(90deg, #232323 25%, var(--bg-skeleton-primary) 50%, #232323 75%);

  --bg-hover-button-primary: #232323;
  --bg-hover-button-secondary: #181818;

  --bg-input-primary: #232323;
  --bg-input-secondary: #fff;

  --color-border-input-primary: #343a40;
  --color-border-input-secondary: transparent;

  --color-border-hover-input-primary: #fff;

  --bg-section-primary: #232323;
  --bg-section-secondary: #181818;

  --focus-input-primary: #fff;
  --focus-input-secondary: #fff;

  --hover-button-primary: #232323;
  --hover-button-secondary: #fff;

  --color-text-button-primary: #fff;
  --color-text-button-secondary: #d1d1d1;
  --color-text-button-third: #000;
  --color-text-button-fourth: transparent;

  --color-text-button-hover-primary: var(--color-text-button-primary);
  --color-text-button-hover-secondary: #fff;

  --color-text-title-primary: #fff;
  --color-text-title-secondary: #d1d1d1;
  --color-text-paragraph-primary: #d1d1d1;
  --color-text-paragraph-secondary: #fff;

  --color-border-button-primary: transparent;
  --color-border-button-secondary: #343a40;
  --color-border-button-third: #fff;

  --color-link-head-primary: #fff;
  --color-link-head-secondary: #fff;
  --color-link-body-primary: #d1d1d1;
  --color-link_body-secondary: #d1d1d1;

  --color-input-primary: #fff;
  --color-input-secondary: #000;

  --color-border-section-primary: #343a40;
  --color-border-section-secondary: #fff;
}

p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--color-text-paragraph-primary);
}


textarea {
  border-radius: var(--border-raduis-default);
  padding: 10px;
  font-size: 14px;
  color: var(--color-text-paragraph-primary);
}

h2 {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--color-text-title-primary);
}

h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--color-text-title-primary);
}

strong {
  color: var(--color-text-title-primary);
}

.container {
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px;
}

.none {
  display: none;
}

@media screen and (max-width: 980px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
  }
}

@media screen and (max-width: 736px) {
  .container {
    padding: 10px;
  }
}

@media screen and (max-width: 480px) {
  .container {
    padding: 5px;
  }
}

.d-none {
  display: none !important
}