html {
font-family: "Roboto", sans serif;
font-weight: 200;
}

nav ul a.active {
  background: rgba(0,0,0,0.2);
}

.card-title {
  margin-bottom: 30px;
}

body {
    background: url("../img/website-background.jpg") no-repeat center center fixed;
    /*background-color: black;*/

}
.project {
    background: url("../img/circuit_board-min.jpg")
}

#resume {
    margin-left: 25px;
    font-weight: 400;
}

#oldcpu {
    display: none;
    height: 100px;
}

.card-image {
    overflow: hidden;
    height: 160px;
}


a {
    text-decoration: none;
    color: #C0FFFF;
    white-space: nowrap;
}

a:visited {
    color: #FBBC05;
}


#story {
    /*max-height: 500px;*/
    /*overflow-y: scroll;*/
    color: #eee;
    /*text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;*/
    background:
		/* Shadow covers */
		/*linear-gradient(rgba(80, 80, 80, .5) 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), rgba(80, 80, 80, .5) 70%) 0 100%,*/

		/* Shadows */
		/*radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;*/
	background:
		/* Shadow covers */
		linear-gradient(rgba(80, 80, 80, .5 ) 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), rgba(80, 80, 80, .5) 70%) 0 100%,

		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
    background-color: rgba(80, 80, 80, 0.5);
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}

#intro {
    color: #EEE;
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}



#menu {
    color: #EEE;
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}


#contact {
    /*background-color: grey;*/
    color: #EEE;
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

#contact img {
    height: 100px;
    width: 100px;
    margin: 50px;
}

@media screen and (max-width: 450px) {
    #story{
        /*max-height: 250px;*/
    }
    body {
      background: url("../img/website-background.jpg");
    }
    .side-nav a{
        color: #C0FFFF;
    }
}
/* ipad Mini retna */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
  body {
background: #000000 url('../img/website-background.jpg') no-repeat fixed top center;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
}
html {
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
}


@media screen and (min-width: 1500px){
  .container {
    margin: 0 auto;
    width: 85%;
    max-width: 4000px;
  }
  body {
    background-size: 100%;
  }

  .card-image {
      overflow: hidden;
      height: 300px;
  }

}