@media (max-width: 768px) {
    /* phones, one item in a row */
    .recordContainerSize {
        width: 97.5%;
    }
}

@media (min-width: 768px) {
    /* iPad and bigger */
    .recordContainerSize {
        width: 47%;
    }
}

@media (min-width: 1152px) {
    /* three items in a row */
    .recordContainerSize {
        width: 30.3%;
    }
}

.recordContainer {
    float: left;
    border-radius: 12%;
    padding: 1%;
    margin: .5%;
}

.record {
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
}

.title text {
    font-family: "Courier New";
    font-size: 29px;
}

.artist text {
    font-family: "Courier";
    font-size: 26px;
}

.record svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.spinning svg {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    -o-animation-name: rotate;
    animation-name: rotate;

    -webkit-animation-duration: 7s;
    -moz-animation-duration: 7s;
    -ms-animation-duration: 7s;
    -o-animation-duration: 7s;
    animation-duration: 7s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

.paused svg {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.running svg {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-ms-keyframes rotate {
    from {
        -ms-transform: rotate(0);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(0);
    }
    to {
        -o-transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}