body { background-color: #1d1e22; box-sizing: border-box; } #wrapper { /* max-width: 1200px; */ width: 550px; height: 550px; margin: 30px auto; /*padding: 0 20px;*/ display: flex; flex-flow: row wrap; align-content: flex-start; /*grid-auto-rows: minmax(100px, 1fr); grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: 1em;*/ } .card { border-radius: 10px; /*padding: 20px;*/ margin: 1%; color: rgb(255, 255, 255); background-color:rgb(0, 94, 165); transition: 0.5s; } .animations{ /*border: 1px solid pink;*/ background-color: pink; } .card:hover { box-shadow: 0 0 10px purple; } /* .card:nth-child(odd) { background-color: #55BBE9; } .card:nth-child(even) { background-color: #afbe29; }*/ body { padding: 0px; margin: 0px; } #title-bar { -webkit-app-region: drag; height: 40px; text-align: center; line-height: 40px; vertical-align: middle; background-color: #494949; padding: none; margin: 0px; } #title { position: fixed; top: 0px; left: 6px; color:white; } #title-bar-btns { -webkit-app-region: no-drag; position: fixed; top: 0px; right: 6px; } * { box-sizing: border-box; } /* .wrapper { max-width: 1200px; margin: 30px auto; padding: 0 20px; width: 100%; display: grid; grid-auto-rows: 100px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: 1em; }*/ .diavo { border-radius: 10px; padding: 20px; color: #fff; } .diavo:hover { box-shadow: 0 0 10px purple; } .diavo:nth-child(odd) { background-color: #55BBE9; } .diavo:nth-child(even) { background-color: #afbe29; }