:root {

  --red: #E74C3C ;
  --red-hover: #CA4536 ;
  --orange: #F39C12;
  --orange-hover: #D39C0D;
  --blue: #3498DB ;
  --blue-hover: #217DBB ;
  --lightblue: #3498DB ;
  --lightblue-hover: #217DBB ;
  --darkblue: #375A7F ;
  --darkblue-hover: #28415B ;
  --lightgrey: #AAAAAA ;
  /*
  402060 Violet
  F4C430 Jaune (usernames)

  2A1F3A (violet foncé).
  Texte principal : #E8E1F2 (blanc cassé).
  Accents : #C77DDF (rose nébuleux), #F4C430 (jaune étoilé).
  Fonds secondaires : #3A4A7A (bleu cosmique), #6B4E8A (violet moyen).
  */

  /* 352535 remplace 303030 ?*/

  --main-text-color: #E8E1F2 ;
  --main-bold-color: #FFFFFF ;
  --main-bg-bg-color: #110011 ; /* Remplace le #111111; ? */
  --main-bg-color: #291929 ; /* Remplace le #222222; ? */
  --link-color: #3DC1F2;
  --main-button-text-color: #FFFFFF ;

  --username-color: #F4C470;
  --username-admin-color: #F4C470 ; /* Remplace #F0C0A0; ?? */
  --username-banned-color: #AAAAAA;
  --username-bot-color: #AAAAAA;


  --section-halo-color: #6B4E84 ;

  --discouraged-filter-color: #44444499; /* x99 = 60% */
  --discouraged-div-border-color: #CCCCCC;

  --highlighted-halo-color: #00BC8C80 ; /* Lueur verte / x80 = 50% */
  --highlighted-gradient-color: #00BFFF99 ; /* x99 = 60% */
  --highlighted-div-border-color: #00BC8C80 ; /* vert */

  --pubs-border-color: #110011 ;
  --pubs-bg-color: #110011 ;

  --main-content-max-width: 1140px ;

  --main-menu-text-color: #E8E1F2 ;
  --main-menu-text-hover-color: #FFFFFF ;
  --main-menu-bg-hover-color: #C77DDF7F ; /* Remplace #151515; ??? */
  --main-menu-border-hover-color: #6B4E84 ;

  --main-menu-text-active-color: #FFFFFF ;
  --main-menu-bg-active-color: #291929 ; /* Remplace le #222222; ? */

  --categories-menu-text-color: #FFFFFF ;
  --categories-menu-border-color: #6B4E84; /* Violet moyen, assorti à --section-halo-color */
  --categories-menu-bg-color: #2A1F3A; /* Violet très foncé, proche de --main-bg-bg-color mais plus distinct */
  --categories-menu-bg-active-color: #5A3A8A; /* Violet cosmique, aligné avec --page-navigation-bg-color */
  --categories-menu-bg-hover-color: #C77DDF; /* Rose nébuleux, pour un effet hover vibrant, aligné avec --page-navigation-bg-hover-color */

  --notif-pill-text-color: #FFFFFF ;
  --notif-pill-bg-color: #E74C3C ;

  --rating-wrong-color: #E74C3C ;
  --rating-wrong-hover-color: #CA4536 ;
  --rating-draft-color: #F39C12;
  --rating-draft-hover-color: #D39C0D;
  --rating-correct-color: #3498DB ;
  --rating-correct-hover-color: #217DBB ;
  --rating-perfect-color: #00BC8C ;
  --rating-perfect-hover-color: #009670 ;


  --default-table-border-color: #444444 ;
  --default-table-bigborder-color: #DDEEEE ;

  --generic-table-border-color: #444444 ;
  --generic-table-head-text-color: #444444 ;
  --generic-table-head-bg-color: #353555 ;
  --generic-table-head-text-color: #FFFFFF ;
  --generic-table-body-text-color: #DDEEEE ;
  --generic-table-hover-color: #FFFFFF1A ; /* 1A = 10% */

  --editor-tools-bg-color: #DDEEEE ;
  --editor-tools-bg-hover-color: #CCCCCC ;
  --editor-tools-button-bg-color: #CCBBDD ;
  --editor-tools-button-bg-hover-color: #665599 ;
  --delete-char-color: #E74C3C ;
  --delete-char-color-hover: #D39C0D ;
  --delete-icon-text-color: #CA4536 ;
  --delete-icon-bg-color: #C8C8C899 ; /* x99 = 60% */

  --generic-js-action-link-color: #00BC8C ;
  --generic-js-action-link-color-hover: #D39C0D ;

/*  --page-navigation-text-color: #FFFFFF ;
  --page-navigation-bg-color: #375A7F ;
  --page-navigation-bg-active-color: #20354A ;
  --page-navigation-bg-hover-color: #28415B ; */
  --page-navigation-text-color: #FFFFFF ;
  --page-navigation-bg-color: #5A3A8A ;
  --page-navigation-bg-active-color: #9A5AC8 ;
  --page-navigation-bg-hover-color: #C77DDF ;
  --page-navigation-halo-color: #C77DDF7F ; /* 7F = 50% */

  --block-draft-bg-color: #E38C02 ;
  --block-error-bg-color: #E74C3C ;
  --block-success-bg-color: #00BC8C ;
  --block-comment-bg-color: #375A7F ;

  --comment-head-bg-color: #1A0D2A ;
  --comment-content-bg-color: #2E1A47 ;
  --comment-info-bg-color: #4A2E6BCC ; /* CC=80% */
  --comment-border-color: #C77DDF ;

  --card-head-bg-color: #1A0D2A ;
  --card-content-bg-color: #2E1A47 ;
  --card-info-bg-color: #4A2E6BCC ; /* CC=80% */
  --card-border-color: #C77DDF ; /*#6B4E84 ; /* #C77DDF ; */

  --review-signature-border-color: #6B4E84 ;
  --subtitles-signature-border-color: #6B4E84 ;
  --subtitles-preview-bg-color: rgba(255,255,255,0.1) ;

  --movie-review-border-color: #F4C470 ;
  --movie-review-bg-color: #F4C47033 ;

  --bbs-post-bg-color: #201030 ; /* #352535 ; */
  --bbs-post-border-color: #776688; /* #3A4A7A ; */
  --bbs-post-meta-color: silver ;
}


/* Calculate how the browser calculates block sizes. To simplify the size, the
border is also included in the size. The same for all blocks */
* { box-sizing: border-box; }

html {
  font-family: sans-serif;
  line-height: 150%;
  font-size: 16px; /* ==1.0rem */
  margin: 0;
  text-align: left;
  color: var(--main-text-color);
  background-color: var(--main-bg-color) ;
}

a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: sans-serif;
  font-variant: small-caps;
  font-style: italic;
  text-shadow: 2px 2px 2px #3A4A7A;
  margin-top: 3.8rem;
}

h1 { font-size: 2.7rem; }
h2 { font-size: 2.3rem; }
h3 { font-size: 2.0rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1.0rem; }


strong, b {
  color: var(--main-bold-color) ;
  font-weight: bold;
}

blockquote {
  background-color: rgba(255,255,255,0.1) ;
  /* opacity: 0.85 ; */
  margin-top: 0.2rem;
  margin-right: 0;
  margin-left: 1.2rem;
  padding-left: 0.3rem ;
  border-radius: 3px;
}

@media (max-width: 799px) {
    html { font-size: 0.85rem; }
    h1   { font-size: 1.85rem; }
    h2   { font-size: 1.7rem; }
    h3   { font-size: 1.4rem; }
    h4   { font-size: 1.2rem; }
    h5   { font-size: 0.95rem; }
    h6   { font-size: 0.85rem; }
}

.text-lightgrey { color: var(--lightgrey); }
.text-mono { font-family: monospace; }


/*===============================================================================================*/
/*===============================================================================================*/
/*===   Tables   ================================================================================*/
/*===============================================================================================*/
.default_table {
    border: 1px solid var(--default-table-border-color) ;
    border-spacing: 0px;
    width: 100%;
}

.default_table td {
    border: 1px solid var(--default-table-border-color) ;
    padding: 0.3rem;
}

.default_table th {
    border: 1px solid var(--default-table-border-color) ;
    text-align: center;
    padding: 0.3rem;
    vertical-align: top;
    font-size: 0.9375rem;
    font-weight: 550;
}



.hide_below_800 { }
.hide_below_500 { }
@media (max-width: 799px) {
    .hide_below_800 { display: none ; }
}
@media (max-width: 500px) {
    .hide_below_500 { display: none ; }
}



.generic-table table {
  border: solid 1px;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: var(--main-bg-color) ;
  border-color: var(--generic-table-border-color) ;
  width:100%;
}
.generic-table thead th {
  background-color: var(--generic-table-head-bg-color) ;
  border: solid 1px;
  border-collapse: collapse;
  color: var(--generic-table-head-text-color) ;
  padding: 10px;
  text-align: left;
  border-color: var(--generic-table-border-color) ;
}
.generic-table tbody td {
  border: solid 1px;
  border-collapse: collapse;
  color: var(--generic-table-body-text-color) ;
  padding: 10px;
  border-color: var(--generic-table-border-color) ;
}
.generic-table tr:hover {
  background-color: var(--generic-table-hover-color) ;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Forms and Buttons   =====================================================================*/
/*===============================================================================================*/
input, select {
  display: inline ;
  line-height: 1.3rem ;
  vertical-align: center ;
  border-radius: 5px ;
}

.generic-form-field label {
    font-weight: bold;
    text-align: left;
    display: block;
    padding: 0.5rem;
}

.generic-form-field input, .generic-form-field textarea {
    display: block;
    width: 90%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    margin-left: 3rem;
}

.generic-form-button {
    display: inline-block;
    margin-left: 3rem;
    width: auto;
}

/* to use in span onclick() */
.button_a {
    cursor: pointer;
    color: var(--link-color);
    text-decoration: none;
}


.link_explore {
  font-size: 1.0rem ;
  color: #F4C430;
  margin: auto ;
  text-align: center ;
}
.link_explore:hover {
  text-decoration: none ;
  color: var(--link-color);
}

.link_button {
    cursor: pointer;
    color: var(--main-button-text-color);
    background-color: var(--rating-perfect-color);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 0px;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    width: 100%;
}

.link_button:hover {
    background-color: var(--rating-perfect-hover-color);
}

.link_bigbutton {
    cursor: pointer;
    color: var(--main-button-text-color);
    background-color: var(--rating-perfect-color);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 2px solid var(--rating-perfect-hover-color) ;
    padding: 0.5rem 0.8rem;
    font-size: 1.2rem;
    line-height: 1.8;
    border-radius: 0.25rem;
    width: 100%;
}

.link_bigbutton:hover {
    background-color: var(--rating-perfect-hover-color);
}

.button {
    color: var(--main-button-text-color);
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 0px;
    padding: 0.375rem 0.75rem;
    margin: 0px;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    width: 100%;
}


.generic-js-action-link {
    cursor: pointer ;
    text-decoration: none;
    font-weight: 400; /* 400=normal , 700=bold */
    color: var(--generic-js-action-link-color) ;
}
.generic-js-action-link:hover {
    color: var(--generic-js-action-link-color-hover) ;
}

.generic-js-action-block {
    display: block;
    margin: auto;
    text-align: center ;
    cursor: pointer ;
    text-decoration: none;
    font-weight: bold;
    font-style: italic ;
    color: var(--generic-js-action-link-color) ;
}
.generic-js-action-block:hover {
    color: var(--generic-js-action-link-color-hover) ;
}


/*===============================================================================================*/
/*===   Username   ==============================================================================*/
/*===============================================================================================*/

.username {
  color: var(--username-color);
}
.username-banned {
  color: var(--username-banned-color);
  text-decoration: line-through;
}
.username-bot {
  color: var(--username-bot-color);
  font-style: italic;
}
.username-admin {
  color: var(--username-admin-color);
  text-decoration: underline dotted;
  font-weight: bold;
}


/*===============================================================================================*/
/*===   Icones   ================================================================================*/
/*===============================================================================================*/

.badge-icon {
  height: 12px;
  vertical-align: center;
  margin-left: 2px ;
}

.bookmarks-icon {
  height: 24px;
  vertical-align: bottom;
}

.language-flag {
  height: 16px;
  vertical-align: center;
}

.footer-icon {
  height: 16px;
  vertical-align: center;
}


/*===============================================================================================*/
/*===   Report to Admin   =======================================================================*/
/*===============================================================================================*/
.report_to_admin {
  display: flex;
  align-items: flex-start; /* Align on top */
  height: 3.0rem;
  vertical-align: top;
  cursor: pointer;
  /* border: 1px solid ; */
  border-radius: 5px ;
  float: right;
  padding: 5px ;
  margin: 5px ;
  font-size: 0.9rem ;
  line-height: 1.1rem ;
  color: var(--link-color) ;
  background: rgba(255,200,200,0.2) ;
}
.report_to_admin img {
  height: 100% ;
  width: auto;
  padding-right: 0.5rem ;
}
.report_to_admin:hover {
  background: rgba(255,200,200,0.3) ;
  border: 1px solid var(--link-color) ;
}

/*===============================================================================================*/
/*===   Modals   ================================================================================*/
/*===============================================================================================*/
.modal_overlay {
  display:none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: rgba(0, 0, 0, 0.6);
}

.modal_bookmarks {
  display:block;
  padding: 10px;
  position:absolute;
  z-index:999;
  background-color: var(--main-text-color);
  color: var(--main-bg-color);
  width: 300px;
  height: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal_report_to_admin {
  display:block;
  padding: 10px;
  position:absolute;
  z-index:999;
  background-color: var(--main-text-color);
  color: var(--main-bg-color);
  min-width: 320px;
  max-width: 620px;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 800px;
  max-height: 85vh; /* Limite la hauteur à 80% de la hauteur de la fenêtre */
  overflow-y: auto; /* Active le défilement vertical */
}
.modal_report_to_admin b {
  color: #ff0000;
}
.modal_report_to_admin h5 {
  margin-top: 2.0rem ;
}
.modal_report_to_admin li {
  margin-bottom: 0.2rem;
}
.modal_report_to_admin label
, .modal_report_to_admin input[type="text"]
{
  display:flex;
  flex:1 ;
}



/*===============================================================================================*/
/*===   Editor Tools   ==========================================================================*/
/*===============================================================================================*/

.generic-delete-char {
  cursor: pointer ;
  text-decoration: none;
  font-weight: 400; /* 400=normal , 700=bold */
  color: var(--delete-char-color) ;
  font-size: 100% ;
}
.generic-delete-char:hover {
  font-weight: 700;
  color: var(--delete-char-color-hover) ;
}
.generic-delete-char::after {
  content: " \2612" ; /* une croix, en unicode: "☒" */
}

.delete-icon {
  display: inline;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--delete-icon-text-color) ;
  text-align: right;
  position: absolute;
  background: var(--delete-icon-bg-color) ;
  top: 0;
  right: 0;
  padding-right: 0.3rem;
  padding-left: 0.3rem;
  z-index: 1; /* Needed for aspect-ratio fallback */
}

.editor-tools {
  margin-bottom: 0.38rem;
}

.editor-tools input {
  text-align: center ;
  margin-top: 5px ;
  margin-bottom: 5px ;
  background-color: var(--editor-tools-bg-color) ;
  border-radius: 2px ;
  min-width:1.8rem;
}
.editor-tools input:hover {
  background-color: var(--editor-tools-bg-hover-color) ;
}
.editor-tools span {
  font-weight: bold;
  font-family: monospace;
}
.editor-svg-button {
  cursor: pointer;
  height: 1.6rem;
  vertical-align: middle;
  border: 1px solid var(--editor-tools-button-bg-hover-color);
  border-radius: 3px;
  background-color: var(--editor-tools-button-bg-color);
}
.editor-svg-button:hover {
  background-color: var(--editor-tools-button-bg-hover-color);

}


/*===============================================================================================*/
/*===   Discouraged / Highlighted   =============================================================*/
/*===============================================================================================*/
.discouraged,
.discouraged td,
.discouraged a { /* assure que les liens restent dessus */
  position: relative;
}
.discouraged td::before { /* Pour les TR */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--discouraged-filter-color);
  pointer-events: none; /* Permet aux clics de passer à travers */
}
.discouraged:not(table *):before, /* pour les DIV */
.discouraged:not(tr) {
  padding: 20px; /* Padding uniquement pour les div */
  border: 1px solid var(--discouraged-div-border-color);
}


.highlighted {
  position: relative;
  box-shadow: 0 0 30px inset var(--highlighted-halo-color) ;
}
.highlighted:not(table *)::before,
.highlighted td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.highlighted td {
  position: relative;
}
.highlighted a {
  position: relative; /* Au-dessus de la superposition */
}
.highlighted:hover {
  box-shadow: 0 0 30px inset --var(-highlighted-halo-color) ;
}
/* Specificites pour les <div> */
.highlighted:not(tr) {
  padding: 20px;
  border: 1px solid var(--highlighted-div-border-color);
}


/*===============================================================================================*/
/*===   Notifications   =========================================================================*/
/*===============================================================================================*/
.notif-pill {
  border-radius: 50rem !important;
  color: var(--notif-pill-text-color) !important;
  background-color: var(--notif-pill-bg-color) !important;
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Information blocks   ====================================================================*/
/*===============================================================================================*/

.draft_block {
    background-color: var(--block-draft-bg-color) ;
    border: none;
    color: var(--main-button-text-color);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.comment_block {
    background-color: var(--block-comment-bg-color) ;
    border: none;
    color: var(--main-button-text-color);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.success_block {
    background-color: var(--block-success-bg-color) ;
    border: none;
    color: var(--main-button-text-color);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.error_block {
    background-color: var(--block-error-bg-color) ;
    border: none;
    color: var(--main-button-text-color);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}


/*===============================================================================================*/
/*===   Page navigation   =======================================================================*/
/*===============================================================================================*/
.pages_navigation {
    display: block;
    text-align: right;
    padding-top: 25px;
    padding-bottom: 5px;
}

.pages_navigation span {
    width: 2rem;
    text-align: center;
}

.pages_navigation a {
    font-weight: 200;
    padding: 0.1rem 0.1rem;
    min-width: 1.6rem;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: 0px;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    color: var(--page-navigation-text-color) ;
    background-color: var(--page-navigation-bg-color) ;
    box-shadow: 0 0 5px var(--page-navigation-halo-color) ;
}

.pages_navigation a:hover {
    background-color: var(--page-navigation-bg-hover-color) ;
    font-weight: 400;
    box-shadow: 0 0 5px var(--page-navigation-halo-color) ;
}

.pages_navigation a.active {
    background-color: var(--page-navigation-bg-active-color) ;
    font-weight: bold;
    box-shadow: 0 0 5px var(--page-navigation-halo-color) ;
}

.pages_navigation .next::before {
    content: "Next >";
}
.pages_navigation .prev::before {
    content: "< Prev";
}

@media (max-width: 799px) {
    .pages_navigation .next::before {
        content: ">";
    }
    .pages_navigation .prev::before {
        content: "<";
    }

    .pages_navigation span {
        display: none;
    }
}



/*===============================================================================================*/
/*===   Ratings   ===============================================================================*/
/*===============================================================================================*/

.button.green     { background-color: var(--rating-perfect-color) ; }
.button.red       { background-color: var(--rating-wrong-color) ; }
.button.blue      { background-color: var(--rating-correct-color) ; }
.button.orange    { background-color: var(--rating-draft-color) ; }
.button.lightblue { background-color: var(--lightblue) ; }
.button.darkblue  { background-color: var(--darkblue) ; }

.button.green:hover     { background-color: var(--rating-perfect-hover-color) ; }
.button.red:hover       { background-color: var(--rating-wrong-hover-color) ; }
.button.blue:hover      { background-color: var(--rating-correct-hover-color) ; }
.button.orange:hover    { background-color: var(--rating-draft-hover-color) ; }
.button.lightblue:hover { background-color: var(--lightblue-hover) ; }
.button.darkblue:hover  { background-color: var(--darkblue-hover) ; }


.button.outline.green {
    color: var(--rating-perfect-color) ;
    border-color: var(--rating-perfect-color) ;
    border: 1px solid ;
    background-color: transparent ;
}
.button.outline.green:hover {
    color: var(--main-button-text-color);
    border-color: var(--rating-perfect-color) ;
    background-color: var(--rating-perfect-color) ;
}
.button.outline.orange {
    color: var(--rating-draft-color) ;
    border-color: var(--rating-draft-color) ;
    border: 1px solid ;
    background-color: transparent ;
}
.button.outline.orange:hover {
    color: var(--main-button-text-color);
    border-color: var(--rating-draft-color) ;
    background-color: var(--rating-draft-color) ;
}
.button.outline.blue {
    color: var(--rating-correct-color) ;
    border-color: var(--rating-correct-color) ;
    border: 1px solid ;
    background-color: transparent ;
}
.button.outline.blue:hover {
    color: var(--main-button-text-color);
    border-color: var(--rating-correct-color) ;
    background-color: var(--rating-correct-color) ;
}
.button.outline.red {
    color: var(--rating-wrong-color) ;
    border-color: var(--rating-wrong-color) ;
    border: 1px solid ;
    background-color: transparent ;
}
.button.outline.red:hover {
    color: var(--main-button-text-color);
    border-color: var(--rating-wrong-color) ;
    background-color: var(--rating-wrong-color) ;
}

.text-red    { color: var(--rating-wrong-color) ; }
.text-orange { color: var(--rating-draft-color) ; }
.text-blue   { color: var(--rating-correct-color) ; }
.text-green  { color: var(--rating-perfect-color) ; }

.text-wrong,
.rating .wrong {
    font-weight: bold;
    color: var(--rating-wrong-color) ;
}

.text-draft,
.rating .draft {
    font-weight: bold;
    color: var(--rating-draft-color) ;
}

.text-correct,
.rating .correct {
    font-weight: bold;
    color: var(--rating-correct-color) ;
}

.text-perfect,
.rating .perfect {
    font-weight: bold;
    color: var(--rating-perfect-color);
}


/* Colored square pills for ratings */
.rating-pill-container {
    width: 7.50rem; /* 4x pills width */
    display: inline-block;
}
.rating-red-pill {
    border-radius: 5px;
    height: 0;
    width: 1.85rem;
    padding-bottom: 1.35rem;
    background-color: var(--rating-wrong-color) ;
    background-color: var(--rating-wrong-hover-color) ;
    text-align: center;
    vertical-align: center;
    display: inline-block; 
    font-weight: bold;
}
.rating-orange-pill {
    border-radius: 5px;
    height: 0;
    width: 1.85rem;
    padding-bottom: 1.35rem;
    background-color: var(--rating-draft-color) ;
    background-color: var(--rating-draft-hover-color) ;
    text-align: center;
    vertical-align: center;
    display: inline-block; 
    font-weight: bold;
}
.rating-blue-pill {
    border-radius: 5px;
    height: 0;
    width: 1.85rem;
    padding-bottom: 1.35rem;
    background-color: var(--rating-correct-color) ;
    background-color: var(--rating-correct-hover-color) ;
    text-align: center;
    vertical-align: center;
    display: inline-block; 
    font-weight: bold;
}
.rating-green-pill {
    border-radius: 5px;
    height: 0;
    width: 1.85rem;
    padding-bottom: 1.35rem;
    background-color: var(--rating-perfect-color);
    background-color: var(--rating-perfect-hover-color) ;
    text-align: center;
    vertical-align: center;
    display: inline-block; 
    font-weight: bold;
}






/*===============================================================================================*/
/*===   Suggestions   ===========================================================================*/
/*===============================================================================================*/
.movies-suggestions {
  margin-left: 2.8rem ;
  display: grid ;
  grid-template-columns: repeat(8,1fr) ;
  grid-column-gap: 0.5rem ;
  border-radius: 10px;
  padding: 8px;
  background: radial-gradient(ellipse, transparent 60%, var(--section-halo-color) 160%);
  box-shadow: 0 0 10px  var(--section-halo-color) ;
}

@media (max-width: 999px) {
    .movies-suggestions {
        grid-template-columns: repeat(6,1fr) ;
    }
    .movies-suggestions > div:nth-child(n + 7) {
        display: none;
    }
}
@media (max-width: 799px) {
    .movies-suggestions {
        grid-template-columns: repeat(4,1fr) ;
        margin: 0;
    }
    .movies-suggestions > div:nth-child(n + 5) {
        display: none;
    }
}
@media (max-width: 500px) {
    .movies-suggestions {
        grid-template-columns: repeat(3,1fr) ;
    }
    .movies-suggestions > div:nth-child(n + 4) {
        display: none;
    }
}