@import "layout.css";

/* === body === */
 body {
     background: url("../images/gear/gearbackground.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     overflow: auto;
}
/* === links color === */
 a {
     color: #000;
}
/* === main content === */
 #container {
     border: solid 1px #000;
     margin: 0 auto 30px auto;
     max-width: 960px;
     padding: 10px;
}
 .image {
     height: 150px;
     width: auto;
}
 .box {
     cursor: pointer;
     display: flex;
     margin-top: 10px;
}
/*description text at click*/
 .de {
     color: #000;
     display: none;
     font-size: 13px;
     margin-left: 20px;
}
/* === purchase link === */
 .glink {
     color: #a62c2b;
     font-style: oblique;
}
 .glink:hover {
     letter-spacing: 1.5px;
     text-decoration: underline;
}
/* === show click for info at hover === */
 .infoView {
     color: #000;
     font-size: 12px;
     font-style: italic;
     margin: 20px auto 0 auto;
     margin-top: 20px;
}
/* === footer === */
 footer {
     position: relative;
}
/* tablet */
 @media only screen and (max-width: 599px) {
     .image {
         height: auto;
         width: 150px;
    }
     .de {
         font-size: 12px;
    }
}
/* mobile */
 @media only screen and (max-width: 485px) {
     .image {
         height: 100px;
         width: 120px;
    }
     .de {
         font-size: 10px;
    }
     .vst-list{
         margin-left: -25px;
    }
}
/* mobile */
 @media only screen and (max-width: 369px) {
     .image {
         height: 80px;
         width: 100px;
    }
     .de {
         font-size: 9px;
    }
     .vst-list{
         margin-left: -25px;
    }
}