body {
    background: url("../images/ep_naturalblack.png");
    color: white;
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 20px;
}

@media only screen and (max-width: 600px) {
    #musiQuery,
    #gifTastic,
    #triviaGame,
    #crystalCollect,
    #hangman,
    #train
    #liri,
    #friendFinder,
    #dynaKitch,
    #burger,
    #clickyGame,
    #sportScraper,
    #wAe
     {
        background-position: center;
    }
}

/* @media only screen and (max-width: 321px) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #musiQuery,
    #gifTastic,
    #triviaGame,
    #crystalCollect,
    #hangman,
    #train,
    #liri,
    #friendFinder
    #burger,
    #dynaKitch,
    #clickyGame,
    #sportScraper,
    #wAe
     {
        background-position: center;
    }
}

#musiQuery {
    background-image: url("../images/musiQuery_scrnshot.jpg");
    background-size: cover;
}

#gifTastic {
    background-image: url("../images/gifTastic.png");
    background-size: cover;
}

#triviaGame {
    background-image: url("../images/TriviaGame.jpg");
    background-size: cover;
}

#crystalCollect {
    background-image: url("../images/crystalCollectors.jpg");
    background-size: cover;
}

#hangman {
    background-image: url("../images/wordGuessGame.jpg");
    background-size: cover;
}

#train {
    background-image: url("../images/trainScheduler.jpg");
    background-size: cover;
}

#liri {
    background-image: url("../images/liri_scrn.jpg");
    background-size: cover;
}

#friendFinder {
    background-image: url("../images/FriendFinder_scrnshot.jpg");
    background-size: cover;
}

#burger {
    background-image: url("../images/burger.png");
    background-size: cover;
}

#dynaKitch {
    background-image: url("../images/DKS_scrnsht.png");
    background-size: cover;
}

#clickyGame {
    background-image: url("../images/clickyGame.png");
    background-size: cover;
}

#sportScraper {
    background-image: url("../images/sportScraper.png");
    background-size: cover;
}

#wAe {
    background-image: url("../images/wae_scrnsht.png");
    background-size: cover;
}

a {
    font-family: 'Architects Daughter', cursive;
    color: white;
    font-size: 25px;
}

.nav-link {
    color: #0087cc;
}

.navbar-brand {
    background-color: #0087cc;
}

.aboutMe-container {
    cursor: pointer;
    height: 175px;
    perspective: 600;
    position: relative;
    width: 150px;
}

.aboutMe {
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    width: 100%;
}

.aboutMe:hover {
    transform: rotateY(180deg);
}

.aboutMe .side {
    backface-visibility: hidden;
    border-radius: 50%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}

.aboutMe .back {
    /* background: #eaeaed; */
    color: #0087cc;
    line-height: 150px;
    text-align: center;
    transform: rotateY(180deg);
}

.box {
    background: #0087cc;
    border-radius: 6px;
    cursor: pointer;
    height: 80px;
    line-height: 80px;
    text-align: center;
    transition-property: background, border-radius;
    transition-duration: 1s, 1s;
    transition-timing-function: linear;
    width: 80px;
  }
  .box:hover {
    background: lightslategray;
    border-radius: 50%;
  }