html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;vertical-align:baseline;border:0;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before{content:"";content:none}blockquote:after{content:"";content:none}q:before{content:"";content:none}q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--main-bg-color:#f5cb70;--main-color:#6b5931;--text-color:#3b3b3b;color:var(--text-color);font-family:Bangers,cursive}*{box-sizing:border-box}body{overflow-x:hidden}a{color:inherit}a:visited{color:inherit}.hidden{display:none}header{min-height:110px;padding:10px 0 10px 110px}header img{width:80px;position:absolute;top:10px;left:10px}header h1{font-size:2em}header h2{font-size:1.5em;display:inline-block}header h2:before{content:"-";margin:0 5px;display:inline-block}header h2:after{content:"-";margin:0 5px;display:inline-block}header .titleContainer{justify-content:space-between;align-items:center;display:flex}header .title{flex-grow:1;align-items:center;margin-top:10px;display:flex}header #theme-selector{background:var(--main-bg-color);border:2px solid var(--main-color);color:var(--text-color);cursor:pointer;-webkit-border-radius:5px;border-radius:5px;margin-right:10px;padding:5px 8px;font-family:inherit;font-size:18px}header #theme-selector:hover{opacity:.8}header #theme-selector:focus{outline:2px solid var(--main-color);outline-offset:2px}header .search{margin:10px 0 0;position:relative}header .search input{width:350px;color:var(--main-color);outline-color:var(--main-bg-color);padding:5px 20px 5px 10px;font-family:Bangers,cursive;font-size:1em}header .search a{cursor:pointer;text-align:center;width:31px;line-height:31px;display:none;position:absolute;top:0;left:318px}header .search input:not(:placeholder-shown)+a{display:inline-block}header button.sort{text-align:left;color:inherit;cursor:pointer;text-align:right;background:0 0;border:none;width:80px;padding:10px;font-family:inherit;font-size:24px}header button.sort:hover{color:var(--main-color)}header button.sort:focus{color:inherit}@media screen and (max-width:768px){header{padding:10px}header .titleContainer{flex-direction:column}header img{width:60px}header .title{flex-direction:column;padding-left:60px}header #theme-selector{margin-right:5px;padding:3px 5px;font-size:16px}header .search input{width:100%}header .search a{left:auto;right:10px}}main{flex-direction:column;display:flex}.country{position:relative}.country h2{z-index:1;background:var(--main-bg-color);font-size:1.5em;position:sticky;top:0}.country h2 button{text-align:left;width:100%;font-family:inherit;font-size:inherit;cursor:pointer;color:var(--text-color);background:0 0;border:none;justify-content:space-between;align-items:center;padding:10px;display:flex}.country h2 button:after{content:"↩";display:inline-block}ul{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;padding:10px;display:grid}li{aspect-ratio:1;width:100%;display:inline-block;position:relative}li div{width:100%;height:100%;position:relative;overflow:hidden}li div img{width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}li:hover:before{z-index:2;background:var(--main-bg-color);border:4px solid var(--main-color);content:attr(data-beer) "\a - " attr(data-brewery) " -";pointer-events:none;text-align:center;white-space:pre;padding:5px 10px;display:block;position:absolute;top:100%;left:50%;transform:translate(-50%)}aside{z-index:2;background:var(--main-bg-color);border:10px solid #fff;padding:14px;position:fixed;top:0;bottom:0;left:0;right:0}aside:before{border:4px solid var(--main-color);content:"";z-index:-1;position:absolute;top:0;bottom:0;left:0;right:0}aside>a{cursor:pointer;position:absolute;top:14px;right:14px}aside h2{margin:20px 0;font-size:1.5em;display:inline-block}aside p{margin:0 0 10px}aside h2:after{content:"";border-bottom:4px solid var(--main-color);padding-top:5px;display:block}footer{padding:10px}footer button{background:var(--main-bg-color);border:4px solid var(--main-color);font-family:inherit;font-size:inherit;cursor:pointer;margin-right:10px;padding:5px 10px}