body{font-size:14px;}
a:link{text-decoration:none;color:white;}
a.btn2{color: white;}
button{background:rgb(3, 91, 192);border:2px;border-radius:5px;padding:10px 20px;color:rgb(255, 255, 255);text-transform:uppercase;font-weight:600;letter-spacing:1px;}
img{max-width:100%;}
.wrapper{display:grid;grid-gap:20px;max-width:800px;padding:5px;margin:auto;}
.menu ul{display:grid;grid-gap:5px;padding:5px;list-style:none;grid-template-columns:repeat(auto-fill, 160px);}
.menu a{background:rgb(3, 91, 192);display:block;text-decoration:none;border-left:1px solid white;border-top:1px solid white;border-right:2px solid grey;border-bottom:2px solid grey;border-radius:7px;padding:2px;text-align:center;color:white;text-transform:uppercase;font-size:11px;}
[aria-controls="menu-list"]{display:none;}
.menu{top:5px;position:fixed !important;position:absolute;height:15%;width:50%;}
.features{display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));}
.feature{background:rgb(255, 217, 0);padding:10px;border-left:1px solid white;border-top:1px solid white;border-right:2px solid grey;border-bottom:2px solid grey;border-radius:10px;text-align:center;box-shadow:0 0 4px rgba(0,0,0,0.1);}
.feature .img{width:100%;}
.feature p{color:rgba(0,0,0,0.5);}
.feature-b{background:rgb(3, 91, 192);box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);padding: 2px;display: grid;border-left:5px solid white;border-top:5px solid white;border-right:5px solid grey;border-bottom:5px solid grey;border-radius:10px;text-align:center;box-shadow:0 0 4px rgba(0,0,0,0.1);grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap:10px;align-items:center;color:white;font-weight:700;letter-spacing:0px;}
.feature-f{background:rgb(3, 91, 192);padding:2px;border-radius:10px;text-align:center;box-shadow:0 0 4px rgba(0,0,0,0.1);grid-gap:10px;align-items:center;color:white;font-weight:500;letter-spacing:0px;}
.logo{background:rgb(196, 193, 193);padding:10px;display:grid;grid-template-columns:120px 1fr;align-items:center;border-radius:5px;}
.gallery{display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));}
.gallery img{max-width:100%;padding:10px;}
.gallery h2{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;grid-gap:20px;align-items:center;}
.gallery h2:before, .gallery h2:after{display:block;content:'';height:10px;background:linear-gradient(to var(--direction, left), var(--yellow), transparent);}
.gallery h2:after{--direction:right;}
.albums{display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));grid-gap:20px;}
.album{background:rgba(255, 255, 255, 0.2);box-shadow:0 0 5px rgba(0, 0, 0, 0.1);padding:10px;display:grid;grid-template-columns:100px 1fr;grid-gap:10px;align-items:center;color:var(--black);font-weight:600;letter-spacing:0px;}
.album__artwork{width:100%;}
.container{display:grid;height:520px;grid-gap:5px;border:2px solid var(--black);grid-template-columns:1fr 1fr auto;}
.container2{display:grid;height:780px;grid-gap:5px;border:2px solid var(--black);grid-template-columns:auto auto auto;}
.item1{display:grid;justify-content:center;align-items:center;padding:5px;border:1px solid rgba(0, 0, 0, 0);border-radius:5px;text-align:center;background-color:rgb(196, 193, 193);}
.item2{display:grid;justify-content:center;align-items:center;padding:5px;border:1px solid rgba(0, 0, 0, 0);border-radius:5px;font-size:22px;text-align:center;background-color:rgba(58, 56, 56, 0.068);}
@media (max-width:1400px){.menu{order:-1;perspective:1400px;}
[aria-controls="menu-list"]{display:block;margin-bottom:10px;}
.menu ul{max-height:0;overflow:hidden;transform:rotateX(90deg);transition:all 0.5s;}
[aria-expanded="true"] ~ ul{display:grid;max-height:500px;transform:rotateX(0);}
[aria-expanded="false"] .close{display:none;}
[aria-expanded="true"] .close{display:inline-block;}
[aria-expanded="true"] .open{display:none;}
}