@import url('https://fonts.googleapis.com/css?family=Barlow:300,400,700,800');
 @import url('https://fonts.googleapis.com/css?family=Lato');
 @import url('https://fonts.googleapis.com/css?family=Roboto');
/* Palette * White - #fff * Dark - #2f3640 * Purple - #5352ed * Bluish Purple - #3742fa */
 body {
     margin: 0;
     padding-right: 25px;
     padding-left: 25px;
     padding-top: 10px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-family: 'Lato', sans-serif;
     font-weight: 400;
     color: #2f3640;
     background: url('assets/stars.svg'), #5352ed;
    /* fallback for old browsers */
     background: url('assets/stars.svg'), -webkit-linear-gradient(to right, #5352ed, #3742fa);
    /* Chrome 10-25, Safari 5.1-6 */
     background: url('assets/stars.svg'), linear-gradient(to right, #5352ed, #3742fa);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
 nav {
     display: flex;
     width: 100%;
     color: white;
     letter-spacing: 1px;
     text-align: left;
     font-family: "Barlow";
     font-weight: 700;
     justify-content: space-between;
     align-items: center;
}
 #nav-group {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
}
 #nav-group a {
     text-decoration: none;
     color: white;
     left: 0;
     letter-spacing: 1px;
     margin-left: 10px;
     margin-right: 10px;
     font-size: 11pt;
}
 .nav-selected {
     border-bottom: 2px solid white;
}
 nav h1 {
     font-size: 15pt;
}
 #container {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     text-align: center;
}
 fieldset {
     border: none;
}
 #card {
     height: auto;
     width: 300px;
     background-color: white;
     font-size: 10pt;
     border-radius: 10px;
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
     position: fixed;
     top: 50%;
     left: 50%;
     margin: 0;
     transform: translate(-50%, -50%);
     z-index: 99;
     padding-left: 20px;
     padding-right: 20px;
     padding-top: 10px;
     padding-bottom: 10px;
}
 #toolbar {
     margin: 0;
     width: 100%;
     height: 30px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     text-align: right;
}
 #toolbar i {
     margin-right: 15px;
     margin-top: 15px;
     cursor: pointer;
}
 .purchase {
     padding: 4%;
     padding-bottom: 8%;
     text-align: center;
     font-family: "Barlow";
}
 button {
     outline: none;
     font-family: "Lato";
     height: 40px;
     text-align: center;
     width: 130px;
     border-radius: 40px;
     background: white;
     border: 2px solid #3742fa;
     color: #3742fa;
     letter-spacing: 0px;
     text-shadow: 0;
     font-size: 10pt;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.25s ease;
}
 button:hover {
     color: white;
     background: #3742fa;
     letter-spacing: 2px;
}
 button:active {
     transform: translateY(3px);
}
/* start product styling */
 #product-container {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
}
 .product {
     width: 250px;
     height: 190px;
     background: white;
     border-radius: 5px;
     margin: 20px;
     padding: 5px;
     box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
     text-align: center;
}
 .product img {
     max-width: 100%;
     max-height: 80%;
     border-radius: 5px;
}
 .product:hover {
     transform: translateY(-5px);
     cursor: pointer;
}
 .product-title {
     padding: 2px;
     font-size: 11pt;
     text-align: center;
     font-family: "Lato";
     font-weight: 300;
     letter-spacing: 1px;
}
 .unfocus {
     opacity: 0.3;
}
 .hidden {
     display: none;
}