body {margin: 0;padding: 20px;font-family: Arial, sans-serif;background-color: #f4f4f4;}
.sudoku-text {font-family: Tahoma, sans-serif;line-height: 28px;white-space: pre-line;font-size:18px;color:#444;}
.menu_box {max-width: 1020px;margin: 0 auto;}
.container {max-width: 1020px;margin: 0 auto;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);background-color: #fff;}
.main-content {max-width: 1020px;display:flex;background-color: #ffffff;}
.leftbar_a {width: 700px;padding: 20px;background-color: #ffffff;}
.sidebar_a {width: 320px;padding: 20px;background-image: url('../img/back-sudoku.jpg');background-repeat: no-repeat;background-position: center}
.leftbar_b {width: 840px;padding: 20px;background-color: #ffffff;}
.sidebar_b {width: 180px;padding: 20px;background-image: url('../img/back-sudoku.jpg');background-repeat: no-repeat;background-position: center}
.middle_bar {padding:20px;}        
@media (max-width: 1019px) {.sidebar_a, .sidebar_b {display: none;}.leftbar_a, .leftbar_b {width: 100%;}.container {max-width: 880px;}.menu_box {max-width: 880px;}.main-content {max-width: 880px;}}
        
*,*:after,*:before{box-sizing:border-box}.animenu__btn{display:none;cursor:pointer;background-color:#058fe7;border:0;padding:10px;height:50px;width:50px}
.animenu__btn:hover{background-color:#0367a7}.animenu__btn__bar{display:block;width:30px;height:3px;background-color:#fff;transition:0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55)}
.animenu__btn__bar+.animenu__btn__bar{margin-top:4px}.animenu__btn--active .animenu__btn__bar{margin:0;position:absolute}
.animenu__btn--active .animenu__btn__bar:nth-child(1){-webkit-transform:rotate(45deg);transform:rotate(45deg)}.animenu__btn--active .animenu__btn__bar:nth-child(2){opacity:0}
.animenu__btn--active .animenu__btn__bar:nth-child(3){-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.animenu{display:block}

.animenu__nav {display: flex;justify-content: center; /* Centra los elementos horizontalmente */align-items: center; /* Centra los elementos verticalmente */background-color: #058fe7;}

.animenu ul{padding:0;list-style:none;font:0 -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
.animenu li,.animenu a{display:inline-block;font-size:17px}.animenu a{color:#fff;text-decoration:none}.animenu__nav{background-color:#058fe7}
.animenu__nav>li{position:relative;border-right:1px solid #959595}.animenu__nav>li>a{padding:16px 30px;text-transform:uppercase}.animenu__nav>li:hover>ul{opacity:1;visibility:visible;margin:0}
.animenu__nav>li:hover>a{color:#fff}.animenu__nav>li:focus-within>ul{opacity:1;visibility:visible;margin:0}.animenu__nav>li:focus-within>a{color:#fff}
.animenu__nav > li:last-child {border-right: none;}

.animenu__nav__hasDropdown:before{content:"";position:absolute;border:4px solid transparent;border-bottom:0;border-top-color:currentColor;top:50%;margin-top:-2px;right:10px}
.animenu__nav__dropdown{min-width:100%;position:absolute;top:100%;left:0;z-index:1;opacity:0;visibility:hidden;margin:20px 0 0 0;background-color:#0367a7;transition:margin .15s, opacity .15s}
.animenu__nav__dropdown>li{width:100%;border-bottom:1px solid #959595}.animenu__nav__dropdown>li:first-child>a:after{content:'';position:absolute;height:0;width:0;left:1em;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:inherit}
.animenu__nav__dropdown>li:last-child{border:0}.animenu__nav__dropdown a{padding:10px;width:100%;border-color:#0367a7}.animenu__nav__dropdown a:hover{background-color:#0186ba;border-color:#0186ba;color:#fff}
.animenu__nav__dropdown a:focus-within{background-color:#0186ba;border-color:#0186ba;color:#fff}@media screen and (max-width: 1020px){.animenu__btn{display:inline-block}
.animenu__nav,.animenu__nav__dropdown{display:none}.animenu__nav{margin:10px 0}.animenu__nav>li{width:100%;border-right:0;border-bottom:1px solid #959595}.animenu__nav>li:last-child{border:0}
.animenu__nav>li:first-child>a:after{content:'';position:absolute;height:0;width:0;left:1em;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:inherit}.animenu__nav>li>a{width:100%;padding:10px;border-color:#058fe7;position:relative}
.animenu__nav a:hover{background-color:#0186ba;border-color:#0186ba;color:#fff}.animenu__nav__dropdown{position:static;background-color:#0367a7;margin:0;transition:none;visibility:visible;opacity:1}
.animenu__nav__dropdown>li:first-child>a:after{content:none}.animenu__nav__dropdown a{padding-left:20px;width:100%}}.animenu__nav--active{display:block !important}.animenu__nav--active .animenu__nav__dropdown{display:block}

.animenu__nav__dropdown {min-width: auto; /* Elimina el ancho mínimo */width: auto; /* Ajusta el ancho según el contenido */}
.animenu__nav__dropdown > li > a {padding: 10px 20px; /* Ajusta el padding según sea necesario */white-space: nowrap; /* Evita que el texto se divida en varias líneas */}

.grid-sudoku {display: grid;grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));grid-gap: 20px;align-items: stretch;}
.grid-sudoku > article {border: 1px solid #ccc;}
.grid-sudoku > article:hover {transform: scale(1.02);}
.grid-sudoku > article img {max-width: 100%;}
.grid-sudoku .text {padding: 10px;text-align:center;}

.page-footer {padding: 10px;text-align:center;font-weight: 300;color:#52440a;font-size: 16px;margin:50px 0}