html {
    font-size: 62.5%; }
    @media (max-width: 75em) {
        html {
            font-size: 56.25%; } }
    @media (max-width: 56.25em) {
        html {
            font-size: 50%; } }
    @media (max-width: 37.5em) {
        html {
            font-size: 43.75%; } }
    @media (max-width: 21.875em) {
        html {
            font-size: 37.5%; } }

* {
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    font-family: "Indie Flower", cursive;
}

body {
    background-color: black;
    margin-top: 10%;
}  

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h1 {
    font-size: 4rem;
    text-align: center;
    color: white;
    font-weight: bold;
}

.central-box {
    position: relative;
    border-radius: .5rem;
    background-color: white;
    width: 50rem;
    height: auto;
    padding: 2rem; }
    @media (max-width: 23.75em) {
        .central-box{
            width: 35rem; } }
  
.central-box__quote-text {
    color: black;
    font-size: 2.6rem;
    font-weight: bold;
}
  
.central-box__quote-author {
    margin-top: 2rem;
    text-align: right;
    font-size: 2rem;;
}

.row {
    margin: 0 auto;
}

.col-1-of-3 {
    display: inline-block;
    margin: 4rem 3rem 0 3rem; }
    @media (max-width: 23.75em) {
        .col-1-of-3 {
            margin: 2rem 1.5rem 0 1.5rem; } }

.btn {
    border: 1px solid #5BC0DE;
    border-radius: 3px;
    font-weight: bold;
    background-color: black;
    color: white;
    height: 3.8rem;
}
  
.btn:hover {
    background-color: #5BC0DE !important;
}

.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.btn--like,
.btn--twitter,
.btn--new-quote {;
    width: 10rem; }
    @media (max-width: 23.75em) {
        .btn--like,
        .btn--twitter,
        .btn--new-quote { 
            height: 3rem;
            width: 7.5rem; } }

footer {
    font-size: 1.6rem;
    color: white;
    text-align: center;
    margin-top: 1rem;
}

.fa-heart {
    color: red;
    font-size: 1.4rem;
}

.col-1-of-3--small-margin {
    display: inline-block;
    margin: 1rem 1rem 0 1rem;
}

.btn--codepen,
.btn--github,
.btn--facebook {
    width: 4.5rem;
}