@import url(https://fonts.googleapis.com/css?family=Karla&display=swap);
:root{--primary-color: #7c59b0;--border-radius: 5px}html{box-sizing:border-box}body{background:var(--primary-color);background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 80 80%27 width=%2780%27 height=%2780%27%3E%3Cpath fill=%27%23b8b8b8%27 fill-opacity=%270.4%27 d=%27M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z%27%3E%3C/path%3E%3C/svg%3E");font-family:Karla,sans-serif}h1{color:#fff;padding:20px;background:rgba(0,0,0,.5);border-radius:var(--border-radius);cursor:pointer;text-align:center;text-transform:uppercase;width:275px;margin:20px auto 10px;user-select:none}h1:hover{background:rgba(0,0,0,.8)}.container{display:flex;flex-direction:row;flex-wrap:wrap}.item{background:rgba(0,0,0,.5);color:#fff;border-radius:var(--border-radius);padding:20px;margin:10px}.item:hover{background:rgba(0,0,0,.6)}a{font-size:20px;font-weight:bold;text-transform:uppercase}a:link,a:visited{color:#fff;text-decoration:none}a:hover,a:active{text-decoration:underline}.fa-times{float:right;cursor:pointer;z-index:2}.name{margin-top:20px;margin-right:20px}.name img{height:20px;width:20px;vertical-align:sub;margin-right:5px}.modal-container{background:rgba(0,0,0,.6);display:none;position:fixed;top:0;left:0;right:0;bottom:0}.show-modal{display:flex;align-items:center;justify-content:center}.modal{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.8);max-width:95%;width:500px;animation:modalopen 1s}@keyframes modalopen{from{opacity:0}to{opacity:1}}.close-icon{float:right;color:#fff;font-size:24px;position:relative;top:13px;right:13px;cursor:pointer}.modal-header{background:var(--primary-color);color:#fff;padding:15px}h3{margin:0}.modal-content{padding:20px;background:#f5f5f5}.form-group{height:55px}.form-input{width:97%;padding:5px;border:2px solid var(--primary-color);border-radius:var(--border-radius);display:block;outline:none}.form-label{color:var(--primary-color);display:block}button{cursor:pointer;color:#fff;background:var(--primary-color);border:none;height:30px;width:100px;border-radius:var(--border-radius);margin-top:10px}button:hover{filter:brightness(110%)}button:focus{outline:none}@media screen and (max-width: 600px){.container{flex-direction:column}}