/* BASIC VALUES */
/* base units */
/* 
margin: 15px
col: 72px
gutter: 42px
row: 30px
*/
/* media sizes & breakpoints */
/*
media-mobile:  456px
breakpoint-xs: media-mobile + (margin * 2)
media-tablet:  870px
breakpoint-sm: media-tablet + (margin * 2)
media-desktop: 1026px
breakpoint-md: media-desktop + (margin * 2)
media-wide:    1326px
breakpoint-lg: media-wide + (margin * 2)
*/


/* Imports */
@import 'minireset.min.css';
@import 'normalize.css';
@import 'text.css';
@import 'colors.css';
@import 'animatedtext.css';
@import 'navbar.css';
@import 'footer.css';
@import 'content.css';
@import 'breadcrumb.css';

a{
  text-decoration: none !important;
}

/* app/styles/application.css */

/* HTML CLASSES */
html{
  font-size: 18px;
  line-height: 1.4; 
}

body {
  background-color: black;
  color: #4a4a4a; 
}




.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.95)), url("../img/Abyssus_KeyArt_Small.jpg");
    /* Set a specific height */

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center 35%;
    background-attachment: auto;
}

.platform-image {
  height: 40px;
  margin: 16px;
  max-width: 160px;
}


/* Style the links inside the navigation bar */
 a {
  color: dimgray;
  transition: 0.2s;
} 

/* Change the color of links on hover */
a:hover {
  color: #FAF3DD;
  transition: 0.2s;
}