@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}:root{font-size:62.5%}.hero{background-image:url(./montañas2-sQ_VpIFi.png);background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh;display:flex;justify-content:center;align-items:center}.hero__content{margin-top:15rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.content__logo{width:150px;border-radius:50%}.content__slogan{font-family:Fredoka,sans-serif;text-align:center;font-size:25px;font-weight:900;font-stretch:expanded;color:#15833c;line-height:1.31;letter-spacing:2.5px;text-transform:uppercase;margin-top:15px}.content__button{background-color:#d9cb32;padding:6px 15px;border-radius:8px;border:none;cursor:pointer;margin-top:25px}.content__button:hover{background-color:#1f9b4b}.button__a{text-decoration:none;color:#fff;font-size:20px;font-weight:600;font-family:Fredoka,sans-serif;letter-spacing:1.5px}@media (min-width: 768px){.hero__content{margin-top:12rem}.content__logo{width:200px}.content__slogan{font-size:40px;margin-left:20px;margin-right:20px}.content__button{padding:6px 18px}}@media (min-width: 1200px){.content__logo{width:250px}.content__slogan{font-size:40px;margin-left:20px;margin-right:20px}.content__button{padding:7px 20px}}.page{display:flex;gap:20px;flex-direction:column;background-color:#9cff7b;height:100vh}.header__container{background-color:#20aa43;height:30%;display:flex;padding-left:30px}.header__logo{width:40px;border-radius:50%}.header__slogan{color:#fff;display:flex;align-items:center;justify-content:center;margin-left:15px;font-family:Fredoka,sans-serif;font-size:10px;font-weight:500}.board__container{width:80%;margin:30px auto 20px}.board__grid{display:grid;grid-template-columns:repeat(3,minmax(60px,1fr));grid-template-rows:repeat(3,minmax(60px,1fr));gap:2px;margin:20px auto;background-color:#f5ff6f}.board__div{border:2px solid #22813a;border-radius:5px;display:flex;align-items:center;justify-content:center}.board__image{max-width:100%;max-height:100%}.pieces__container{width:80%;margin:0 auto;display:flex;justify-content:center}.pieces__div{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-content:center;gap:15px;margin:5px 20px}.pieces__image{object-fit:contain;height:60px;cursor:pointer}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes textFadein{0%{opacity:0}to{opacity:1}}.message{opacity:0;background-color:#fff9;position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:999;animation:fadein 2s ease-in 0s forwards}.message__text{opacity:0;background-color:#fff;padding:20px;font-size:15px;border:5px solid #538b3d;border-radius:10px;text-align:center;max-width:70%;display:flex;flex-direction:column;justify-content:center;align-items:center;animation:textFadein 2s ease-in 0s forwards}.message__h2{font-family:Fredoka,sans-serif;font-weight:600;margin-bottom:15px}.message__p{font-family:Fredoka,sans-serif;font-weight:500;line-height:1.5}.logo__message{margin-top:10px;width:70px;border-radius:50%;border:solid 2px #538b3d}.message__button{background-color:#d9aa32;padding:6px 15px;border-radius:8px;border:none;cursor:pointer;margin-top:25px;width:200px}.message__button:hover{background-color:#1f9b4b}.button__text{text-decoration:none;color:#fff;font-size:20px;font-weight:600;font-family:Fredoka,sans-serif;letter-spacing:1.5px}@media (min-width: 768px){.header__logo{width:65px}.header__slogan{font-size:15px}.board__grid{grid-template-columns:repeat(3,minmax(70px,1fr));grid-template-rows:repeat(3,minmax(70px,1fr))}.page{height:100vh}.pieces__image{height:80px}.pieces__div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;justify-content:center;gap:15px;margin:5px 20px}.message__text{font-size:24px}.logo__message{width:100px;border-radius:50%}}@media (min-width: 1024px){.header__logo{width:60px}.page{flex-direction:row;height:100vh;padding:40px 50px}.board__grid{grid-template-columns:repeat(3,minmax(100px,1fr));grid-template-rows:repeat(3,minmax(100px,1fr))}.pieces__image{height:100px}.pieces__div{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));grid-auto-rows:100px;gap:15px}.board-container{margin:0 auto}.header__slogan{font-size:15px}.message__text{background-color:#fff;padding:20px;font-size:24px;border:5px solid #538b3d;border-radius:10px;text-align:center;max-width:70%;display:flex;flex-direction:column;justify-content:center;align-items:center}.message__h2{font-family:Fredoka,sans-serif;font-weight:600;margin-bottom:15px}.logo__message{width:100px;border-radius:50%}}
