.list { display:list-item; list-style: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; width: 100%; }
#alphas {padding-right: 16px; padding-left: 192px; transition: padding-left 0.5s;}

.alpha { border:1px solid #0c0c0c; border-radius:12px; padding:12px; background-color: hsl(270, 40%, 90%); transition: background-color 0.5s, transform 500ms ease, height 500ms ease; scroll-behavior: smooth; transform-origin: top; transform: scaleY(0); cursor: hand;}
.alpha.open { transform: scaleY(1);}
.alpha.close { transform: scaleY(0); }
.alpha .alphaInfos{ margin: 0 0 0 auto; display: grid;}
.alpha .alphaInfos .alphaNb{ text-align: end; }
.alpha .alphaWrapper{ display: flex; }
.alpha .alphaWrapper .loading { display: none ; margin: 0 0 0 auto; }
.alpha h2 { margin:0; font-size:24px; }
.alpha:hover { background-color: hsl(270, 80%, 90%); }
.alpha:active { background-color : hsl(270, 100%, 50%); }

.serie { border:1px solid #ddd; border-radius:12px; padding:12px; background-color: hsl(270, 40%, 80%);  transition: background-color 0.5s, transform 500ms ease; scroll-behavior: smooth; transform-origin: top; transform: scaleY(0);}
.serie.open { transform: scaleY(1); }
.serie.close { transform: scaleY(0); }
.serie .serieWrapper { display: flex; }
.serie .defaultSerieWrapper { overflow:hidden; height:50px; width: 50px; border-radius:8px; transition: transform 0.3s; cursor: pointer; }
.serie .defaultSerieWrapper:hover { transform: scale(1.1); }
.serie .defaultSerie { height:100%; width:100%; background:#f3f3f3; }
.serie .bannerSerieWrapper { overflow:hidden; height:50px; border-radius:8px; margin: 0 0 0 10px;}
.serie .bannerSerie { height:100%; background:#f3f3f3; }
.serie h3 { margin:0 0 0 10px; font-size:30px; cursor: hand; }
.serie .infoSerieWrapper { display:grid; margin:0 0 0 auto; font-size:smaller; }
.serie .infoSerieWrapper .loading { display: none; }
.serie .grid { display:grid;}
.serie:hover { background-color: hsl(270, 80%, 80%); }
.serie:active { background-color : hsl(270, 100%, 50%); }

.author { border:1px solid #ddd; border-radius:12px; padding:12px; background-color: hsl(270, 40%, 80%);  transition: background-color 0.5s, transform 500ms ease; scroll-behavior: smooth; transform-origin: top; transform: scaleY(0);}
.author.open { transform: scaleY(1); }
.author.close { transform: scaleY(0); }
.author .authorWrapper { display: flex; }
.author .defaultAuthorWrapper { overflow:hidden; height:50px; width: 50px; border-radius:8px; transition: transform 0.3s; cursor: pointer; }
.author .defaultAuthorWrapper:hover { transform: scale(1.1); }
.author .defaultAuthor { height:100%; width:100%; background:#f3f3f3; }
.author .authorTitleWrapper { display: table; }
.author h3 { margin:0 0 0 10px; font-size:30px; cursor: hand; }
.author h4 { padding-left: 10px; font-size:20px; cursor: hand; display: table-cell; }
.author .infoAuthorWrapper { display:grid; margin:0 0 0 auto; font-size:smaller; }
.author .infoAuthorWrapper .loading { display: none; }
.author .grid { display:grid;}
.author:hover { background-color: hsl(270, 80%, 80%); }
.author:active { background-color : hsl(270, 100%, 50%); }

.editor { border:1px solid #ddd; border-radius:12px; padding:12px; background-color: hsl(270, 40%, 80%);  transition: background-color 0.5s, transform 500ms ease; scroll-behavior: smooth; transform-origin: top; transform: scaleY(0);}
.editor.open { transform: scaleY(1); }
.editor.close { transform: scaleY(0); }
.editor .editorWrapper { display: flex; }
.editor .defaultEditorWrapper { overflow:hidden; height:50px; width: 50px; border-radius:8px; transition: transform 0.3s; cursor: pointer; }
.editor .defaultEditorWrapper:hover { transform: scale(1.1); }
.editor .defaultEditor { height:100%; width:100%; background:#f3f3f3; }
.editor .editorTitleWrapper { display: table; }
.editor .bannerEditorWrapper { overflow:hidden; height:50px; border-radius:8px; margin: 0 0 0 10px;}
.editor .bannerEditor { height:100%; background:#f3f3f3; }
.editor h3 { margin:0 0 0 10px; font-size:30px; cursor: hand; }
.editor .infoEditorWrapper { display:grid; margin:0 0 0 auto; font-size:smaller; }
.editor .infoEditorWrapper .loading { display: none; }
.editor .grid { display:grid;}
.editor:hover { background-color: hsl(270, 80%, 80%); }
.editor:active { background-color : hsl(270, 100%, 50%); }

.albums { padding-top: 12px; display: flex;}
.album { border:1px solid #ddd; border-radius:12px; padding:12px; display: flex; background-color: hsl(270, 40%, 70%);  transition: background-color 0.5s, transform 500ms ease; transform-origin: top; transform: scaleY(0); }
.album.open { transform: scaleY(1); }
.album.close { transform: scaleY(0);  }
.album .defaultAlbumWrapper { overflow:hidden; height:50px; width: fit-content; border-radius:8px; transition: transform 0.3s; cursor: pointer; }
.album .defaultAlbumWrapper:hover { transform: scale(1.1); }
.album .defaultAlbum { height:100%; background:#f3f3f3; }
.album .titleWrapper { margin:0 0 0 10px; display: grid; }
.album .titleWrapper .title { font-size: larger;}
.album .infoAlbumWrapper { display: flex; margin:0 0 0 auto; }
.album .infoAlbumWrapper .principal { display: flex; padding-bottom: 2px;  height: 24px;}
.album .infoAlbumWrapper .principal img { padding-right: 2px; margin-left: auto; }
.album .infoAlbumWrapper .type { display: flex;  height: 24px; }
.album .infoAlbumWrapper .type img { padding-right: 2px; margin-left: auto; }
.album span {cursor: hand; }
.album:hover { background-color: hsl(270, 80%, 70%); }
.album:active { background-color : hsl(270, 100%, 50%); }
.flexColumn { flex-direction: column; }
.flexRow { flex-direction: row; }

.figurines { padding-top: 12px; display: flex;}
.figurine { border:1px solid #ddd; border-radius:12px; padding:12px; display: flex; background-color: hsl(270, 40%, 70%);  transition: background-color 0.5s, transform 500ms ease; transform-origin: top; transform: scaleY(0); }
.figurine.open { transform: scaleY(1); }
.figurine.close { transform: scaleY(0);  }
.figurine .defaultFigurineWrapper { overflow:hidden; height:50px; width: fit-content; border-radius:8px; transition: transform 0.3s; cursor: pointer; }
.figurine .defaultFigurineWrapper:hover { transform: scale(1.1); }
.figurine .defaultFigurine { height:100%; background:#f3f3f3; }
.figurine .titleWrapper { margin:0 0 0 10px; display: grid; }
.figurine .titleWrapper .title { font-size: larger;}
.figurine .infoFigurineWrapper { display: flex; margin:0 0 0 auto; }
.figurine .infoFigurineWrapper .principal { display: flex; padding-bottom: 2px;  height: 24px;}
.figurine .infoFigurineWrapper .principal img { padding-right: 2px; margin-left: auto; }
.figurine .infoFigurineWrapper .type { display: flex;  height: 24px; }
.figurine .infoFigurineWrapper .type img { padding-right: 2px; margin-left: auto; }
.figurine span {cursor: hand; }
.figurine:hover { background-color: hsl(270, 80%, 70%); }
.figurine:active { background-color : hsl(270, 100%, 50%); }