:root{--blackPearl50:#f1f8fc;--blackPearl100:#d0e7f7;--blackPearl200:#a0cdef;--blackPearl300:#69a7df;--blackPearl400:#3a81c7;--blackPearl500:#2164ab;--blackPearl600:#174c8a;--blackPearl700:#173f6e;--blackPearl800:#173358;--blackPearl900:#182d49;--blackPearl950:#010306}html{height:100%;background:var(--blackPearl900)}body{margin:0;min-height:100%;display:flex;flex-direction:column;font-family:Arial,sans-serif}body,main{padding:20px}main{color:var(--blackPearl50);background:linear-gradient(to bottom,var(--blackPearl300),var(--blackPearl500));flex-grow:1;border-radius:10px;box-shadow:0 2px 2px var(--blackPearl900)}a{color:var(--blackPearl200);text-decoration:none}*,:after,:before{box-sizing:border-box}.wrapper{display:flex}.container{max-width:1200px;min-width:480px;margin:0 auto;width:100%}@media (max-width:768px){.wrapper{flex-direction:column}}nav a{color:var(--blackPearl50);text-decoration:none}nav ul{list-style-type:none;margin:0;padding:0}nav li{margin-bottom:10px}aside{padding:20px;width:260px;margin-right:20px;background:linear-gradient(to bottom,var(--blackPearl300),var(--blackPearl500));border-radius:10px;box-shadow:0 2px 2px var(--blackPearl900)}.menu-icon,.menu-toggle{display:none}.menu-icon{padding:10px;margin-bottom:20px;color:var(--blackPearl50);background:linear-gradient(to bottom,var(--blackPearl300),var(--blackPearl500));text-align:center;border-radius:10px;box-shadow:0 2px 2px var(--blackPearl900)}@media (max-width:768px){aside{width:100%;margin-right:0;margin-bottom:20px}.menu-icon{display:block;cursor:pointer}.menu-container{display:none}.menu-toggle:checked~.menu-container{display:block}}header{padding:20px;margin-bottom:20px;color:var(--blackPearl50);background:linear-gradient(to bottom,var(--blackPearl400),var(--blackPearl400));text-align:center;border-radius:10px;box-shadow:0 2px 2px var(--blackPearl900);display:flex;justify-content:flex-start;align-items:center}.logo-container{width:40px;overflow:hidden}.appstore-container,.logo-container{position:relative;height:40px;flex:0 0 auto}.appstore-container{margin-left:20px;margin-right:20px;justify-content:center}.logo-container img{object-fit:contain;border-radius:12px;border:1px solid var(--blackPearl100);box-shadow:0 4px 8px rgba(0,0,0,.1)}h1{margin:0;text-align:center;flex:1 1}