html{margin:0;padding:0;} body{background-color:#cecece;margin:0;padding:0;} #page{font-family:verdana,sans-serif;font-size:12pt; display:grid;grid-gap:10px; grid-template-areas: "top" "left" "centr" "bot"; padding:10px;} a{color:#060;} a:visited{color:purple;} a:hover{color:blue;} #top{grid-area:top;text-align:center;background-position:bottom;height:100px;} a#logo img{border:0 none;width:100px;height:100px;} #top ul{float:right;list-style-type:none;margin:5px 20px;} #metamask{width:130px;padding:5px 2px;border-radius:5px; cursor:pointer;font-size:10pt; } #left{grid-area:left;width:100%;background-color:#cecece;border:0px solid #000;border-radius:10px;} ul#menu{ display:grid; grid-gap:10px 20px; grid-template-columns:repeat(auto-fill,130px); list-style-type:none; font-size:10pt; width:100%; margin-left:-10px; } ul#menu a{display:block;width:130px;padding:5px 2px;border-radius:5px; text-align:center;text-decoration:none;border:1px solid; color:#000;background:#f0f0f0;} ul#menu a.on{ background:#fff; } ul#menu a:hover{ background:#fff; } #centr{grid-area:centr; background-color:#f0f0f0;border-radius:10px;} #centr p{margin:10px;text-align:justify;text-indent:10px;} #centr h1{margin:30px 10px 20px 10px;text-align:center;height:20px; font-family:georgia,serif;font-size:16pt;padding:5px;color:#111;} #centr h2{margin:30px 10px 10px 10px;text-align:center;height:20px; font-family:georgia,serif;font-size:14pt;padding:5px;color:#111;} ul#nft{ display:grid; grid-gap:10px 20px; grid-template-columns:repeat(auto-fill,200px); list-style-type:none; width:100%; margin-left:-10px; text-align:center; } #nft img{width:200px;height:200px;} #nft a.mint{display:block;width:200px;padding:5px 0px;border-radius:5px; text-align:center;text-decoration:none;border:1px solid;font-size:10pt; color:#000;background:#f0f0f0;} #nft a.mint:hover{	background:#fff;	} ul#mint{ display:grid; grid-gap:10px 20px; grid-template-columns:repeat(auto-fill,400px); list-style-type:none; font-family:georgia,serif;font-size:9pt; width:100%; margin-left:-10px; text-align:center; } #mint img{width:400px;height:400px;margin:10px;} #mint h1{margin-top:100px;} #mint p{text-align:center;font-size:12pt;} #mintbutton{width:130px;padding:5px 2px;border-radius:5px; cursor:pointer;font-size:10pt; } #bot{grid-area:bot; height:100px;font-size:10pt; background-position:bottom;font-family:georgia,serif;} #bot img{width:40px;height:40px;} #bot p{float:right;} table{border:1px solid #000;margin:10px 10px;} tr{background-color:#cecece;} td{text-align:center;min-width:60px;} @media (min-width:768px) { #page{ grid-template-columns:1fr 5fr; grid-template-areas: "top top" "left centr" "bot bot" } a#logo{float:left;margin-left:5%;} ul#menu{ display:inherit; padding:0;margin:60px auto;} ul#menu a{margin:0 auto 17px;height:25px;line-height:25px; } #bot p{margin-right:20px;} }