/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

/* latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src:  local('Varela Round'),
        local('VarelaRound-Regular'),
        url('../fonts/VarelaRound-Regular.ttf') format('truetype'),
        url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrhampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

html,
body {
    // background: #f4f4f4;
    font-family: 'Varela Round', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.main-panel {
    margin-top: 40px;
}

.panel-button-container {
    padding: 10px;
}

.panel-button {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 5px;
    font-size: 28px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 10px;
    height: 150px;
    padding-right: 10px;
    box-shadow: 5px 5px 0px #dcdcdc;
}

.panel-button span {
    position: absolute;
    font-size: 0.9em;
    font-weight: bold;
    color: #fff;
    margin-left: 20px;
    margin-right: 35px;
    font-family: 'Varela Round', sans-serif;
}

.fa.pull-right {
    margin-left: .3em;
}

.panel-button i {
    color: #fff;
    font-size: 64px;
}
.bg-purple {
    background-color: #524B7A;
}

.bg-light-blue {
    background-color: #0098AD;
}