styles.css

html {
    font-family: Arial, sans-serif;
}

body {
    margin: 0;
    min-width: 220px;
    background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNvaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NTBGMDQ2NEMwQzIwNjgxMTgwODlFMjU5NTAyRDZBQzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUY1QkFFRDVBRjVCMTFFMjg2QTQ4NDAwN0ZEMTg3RkEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUY1QkFFRDRBRjVCMTFFMjg2QTQ4NDAwN0ZEMTg3RkEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNCBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRTNEMzBFMjFDMjA2ODExODA4OUUyNTk1MDJENkFDMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MEYwNDY0QzBDMjA2ODExODA4OUUyNTk1MDJENkFDMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwMBAQEBAQEBAgEBAgICAQICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA//AABEIAAkACQMBEQACEQEDEQH/xABhAAADAQAAAAAAAAAAAAAAAAADBAUKAQEBAQAAAAAAAAAAAAAAAAABAAIQAAEEAQALAAAAAAAAAAAAAAEAAgMEETFB0RKyE3OTFDRUEQEBAQAAAAAAAAAAAAAAAAAAIUH/2gAMAwEAAhEDEQA/AN59avC6vAeRESYmEuMbSc4072Na2yd8av8ANB2m7FQwGp60XTZwhWDFNJf/2Q==);
    text-align: center;
}

::selection {
    background: #000;
    color: #FFF;
}

h1 {
    margin: 2%;
    font-family: 'Atomic Age', cursive;
    font-size: 5em;
}

h2 {
    margin-bottom: 30px;
}

a {
    color: #000;
}

#mainWrapper {
    height: auto;
    margin: 5%;
    padding-bottom: 40px;
    overflow: hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#footer {
    width: 98%;
    height: auto;
    min-width: 220px;
    background: #FFF;
    padding: 1%;
    clear: both;
    position: fixed;
    bottom: 0;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}

#footer:hover {
    opacity: 1;
}

#copyright {
    float: left;
}

#github {
    float: right;
    text-decoration: underline;
}

#github {
    text-decoration: none;
}

#github:before {
    margin: 0 5px 0 0;
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODg1MkQ1M0JCMkE4MTFFMkFCQUNCRDU0RkUzRjlENjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODg1MkQ1M0NCMkE4MTFFMkFCQUNCRDU0RkUzRjlENjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4ODUyRDUzOUIyQTgxMUUyQUJBQ0JENTRGRTNGOUQ2NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4ODUyRDUzQUIyQTgxMUUyQUJBQ0JENTRGRTNGOUQ2NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhMq6A8AAALFSURBVHjadFJJTFNRFD3/t7/9BAqC1aqQGqogAlGGQpkqGCZJxFKIAwuNjFZi3Bsh0aAR0gWRlSEyLFw4JARaqm6AQmQBCZECkRZaMAg0kYgytMROz9+vYedN7uK+e899J+dcanxsHL3d3XA6nVAoFBCLRZlWq+0+V5d5PV7B0WMyq1wu75BKpR+VGcpt++IS6hrrIQQfFPwBv2x5ebkjXZlefbepCRmqTLBiFvalRZXZbH5tscxOj5vHWpKSkj4QQoCJTxO4ffNWTE5W1nTn807yv3hvNJG8rFzfnYYGrdvtCv5IweFw6B82N6ft7u0h7nQcrlZVwcU1f239xImYaBiNQ8jNzoHBZBRoLpd3jwwPz6L9WVtafU0tv7X10WOOAwgrZIiYFhDRvwy+paWk8DPv3rwlpYVF7SgtLnnFbSA72ztEmZpGoiThJF5x6iDjYhUkNkZOWEZEel5282Bt+RU7vba2VqnKyYbNasMil6FhYfD7/QcZCARA0RQ8Xg/m5+Z5KePOxEfSfp+XDvh8OCyNAi2g4dpzgWEYfiCoHkVRoGkaAa4O9nkPKDpAR0REWiwzc4jlPKypq8XW7jbW19Z5gJgVw+PxwP51BSEsC422ggc67A6foPr6tU2O7o1MlQrnU1OQoUzHvtuN1dVV/NjagkwmQ3FREfR6PfILCjA1OQWTaciEIYMhpOhi4eexUTMZHBgk1oUF0tfTS45LZUTMCVKgvkD2dncP/KzUVJCW5uZ8Ois7d/9SWdm9p09afRJJGEaGR2AYHEDyuWSUFBYiXCKBiKMZDF1jI7glbWq1ekyg0+nAAb5ZbTbL1ORknkajiTgUGflX4dBQHOGo/t53o+tFFxa+LOjPJiY+4G4X1MryCiwzM/i+uYmB/v5ozoIaRijUrG9snBQyTNCJfe7ARxMSEvrELDu6seGEVqvFHwEGADi6YbehGrTKAAAAAElFTkSuQmCC);
}

.item {
    width: 90%;
    border-radius: 1000px;
    margin: 5%;
    padding-bottom: 90%;
    position: relative;
    float: left;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: box-shadow .4s;
    -moz-transition: box-shadow .4s;
    -o-transition: box-shadow .4s;
    transition: box-shadow .4s;
}

.item:hover {
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.8);
    box-shadow: 0 0 1px rgba(0,0,0,.8);
}

.item_inner {
    width: 100%;
    height: 100%;
    position: absolute;
}

.item_inner input[type=text],
.item_inner p {
    width: 100%;
    color: #FFF;
    font-weight: 800;
    text-shadow: 0 1px 1px #000;
    text-align: center;
}

.item_inner input[type=text] {
    background: 0;
    border: 0;
    outline: 0;
    -webkit-transition: -webkit-transform .8s;
    -moz-transition: -moz-transform .8s;
    -o-transition: -o-transform .8s;
    transition: transform .8s;
}

input[type=text]:focus {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}

.hex {
    margin-top: 35%;
    font-size: 2.5em;
    font-weight: 800;
}

.copy {
    display: none;
}

.new {
    background: #EEE;
}

#submityourown {
    position: absolute;
    top: 10%;
}

@media (min-width: 480px) {
    #mainWrapper {
        margin: 3%;
    }

    .item {
        width: 44%;
        padding-bottom: 44%;
        margin: 3%;
    }
}

@media (min-width: 720px) {
    #mainWrapper {
        margin: 2%;
    }

    #footer {
        width: 99%;
        padding: .5%;
        opacity: .65;
    }

    .item {
        width: 29%;
        padding-bottom: 29%;
        margin: 2%;
    }
}

@media (min-width: 1024px) {
    #mainWrapper {
        margin: 1%;
    }

    .item {
        width: 23%;
        padding-bottom: 23%;
        margin: 1%;
    }
}