/* CSS for www.EspenSivertsen.me */

html,
body { 
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: Boston,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	background-color: #1f2431;
	/*background-image: url("../img/bg.jpg");
	background-size: 10px 20px;
	background-repeat: repeat;*/
}

#canvas {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
}

.container {
    min-height: 100%;
    width: 100%;
    max-width: 1200px;
	margin: 0 auto;
	margin-top: 50px;
}

.flex {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.flex.row { flex-direction: row; }
.flex.wrap { flex-wrap: wrap; }

h1 { font-size: 30px; margin-bottom: 5px; }
.header-underline {
	width: 40px;
	margin-bottom: 2em;
	border: 1px solid #fff;
}

ul { padding: 0; margin: 0; }

.arrow {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transition: transform .2s ease-in;
  -moz-transition: transform .2s ease-in;
  -o-transition: transform .2s ease-in;
  -webkit-transition: transform .2s ease-in;
}
.right {
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.up {
  padding: 5px;
  transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
   -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.down {
	margin-bottom: 1em;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/*  NAVBAR  */
#navbar {
	display: flex;
    overflow: hidden;
	width: 100%;
	height: auto;
	list-style: none;
	font-weight: 550;
	background-color: #1B394B;
	z-index: 1;
}
#navbar ul li:hover { 
	border-bottom: 1px solid #fff; 
	color: #ccc900; 
	transition: color .2s ease-out;
	-moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    -webkit-transition: color .2s ease-in; 
	cursor: pointer;
}
.nav-list {display: flex; align-items: center; }

.nav {
	display: flex;
	align-items: center;
	text-transform: uppercase;
	width: auto;
	text-align: right;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
}

.nav li {
	padding: 1px;
	text-decoration: none; 
	border-bottom: 1px solid transparent;
	color: #fff;
	display: inline-block;
	line-height: 2.5em;
	margin-left: 1.5em;
}
.active-nav li { color: #fffc36; }
.nav .icon {display: none;}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  bottom: initial;
  width: 100%;
}

#home {
	height: 100vh;
}
.text {
	font-size: 32pt;
	line-height: 36pt;
	color: #fff;
	text-align: center;
}
.highlight { color: #fffc36 }

.home-button {
	padding: 10px 30px;
	margin-top: 10px;
	font-weight: bold;

	-moz-transition: background-color .2s ease-in;
    -o-transition: background-color .2s ease-in;
    -webkit-transition: background-color .2s ease-in;
	transition: background-color .2s ease-in;
	border: 2px solid #fffc36;
	border-radius: 25px;
}
.home-link {
	text-decoration: none;
	color: #fff;
}
.home-button:hover {
	cursor: pointer;
	color: #000;
	background-color: #fffc36;
}
.home-button:hover > .arrow {
	border-color: #000;
	transform: rotate(45deg);
	margin-bottom: 2px;
	margin-left: 2px;
}

#about {
	display: flex;
	justify-content: center;
	width: 100%;
}

.about-me {
	width: 1200px;
	max-width: 49%;
	height: 400px;
	justify-content: space-between;
}

.about-image {
	width: 200px;
	height: 200px;
	background-image: url("../static/img/Photoshoot-10.jpg");
	background-size: cover;
	background-position: center;
	-webkit-box-shadow: 6px 8px 15px 0px rgba(0,0,0,0.75);
	-o-box-shadow: 6px 8px 15px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 8px 15px 0px rgba(0,0,0,0.75);
	box-shadow: 6px 8px 15px 0px rgba(0,0,0,0.75);
	border-radius: 50%;
}
.about-header { font-size: 24px; }
.about-text {
	width: 60%;
	text-align: center;
	word-wrap: break-word;
	margin-bottom: 2em;
}
.about-text a { text-decoration: none; color: #00efd1; font-weight: 650; }

.about-menu {
	width: 1200px;
	max-width: 49%;
	height: 400px;
}

.about-meter {
	width: 100%;
	margin-top: 10px;
	font-weight: bold;
	justify-content: space-around;
}

.about-navbar {
	width: 100%;
	justify-content: space-between;
}

.about-navbar-link {
	width: 30%;
	height: 30px;
	font-size: 16px;
	font-weight: bold;
	-moz-transition: background-color .3s ease-in;
    -o-transition: background-color .3s ease-in;
    -webkit-transition: background-color .3s ease-in;
	transition: background-color .3s ease-in;
	border: 3px solid #000;
}
.about-navbar-link:hover {
	cursor: pointer;
	color: #000!important;
	background-color: #fffc36;
}

.about-area {
	width: 100%;
	margin-top: 1em;
}
.skill {
	width: 100%;
	margin: 10px 0;
	background-color: #00efd1;
}
.skill-bar {
	width: 20%;
	height: 30px;
	border: 2px solid #000;
	font-weight: bold;
	background-color: #808080;
}


/* CARD */
.card {
	max-width: 500px;
	width: 450px;
	height: 250px;
	border: 1px solid #000;
	margin-bottom: 2em;
	background-color: #f2f2f2;
	background-image: url("../static/img/bimg.jpg");
	-webkit-box-shadow: 6px 8px 15px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 8px 15px 0px rgba(0,0,0,0.75);
	box-shadow: 6px 8px 15px 0px rgba(0,0,0,0.75);
}
.card-img {
	margin: 1em;
	max-width: 120px;
	width: 100%;
	/*height: auto;*/
	height: 150px;
	border: 1px solid #000;
	/*border-radius: 50%;*/
}
.card-img img {
	width: 100%;
	height: 100%;
	/*border-radius: 50%;*/
}
/*.card-title {
	margin: 0 1em;
	color: #fff;
}*/
.card-title h1 {
	margin: 0;
	margin-top: 10px;
}
.card-title h3 {
	margin-top: 0;
	color: #808080;
}
.card-title h4 { margin-bottom: 0; text-decoration: underline; }
.card-title h5 { margin-top: 5px; }
.card-top {
	display: flex;
	width: 100%;
}
.card-skills {
	text-align: left;
}
.card-bottom {
	display: flex;
	flex-direction: column;
}

.card-title {
	background-color: #0000005e;
	width: 100%;
}

#projects {
	display: flex;
	justify-content: center;
	width: 100%;
}
.project-wrapper a:link { color: #fffc36; text-decoration: none; }
.project-wrapper a:visited { color: #44AF69; }
.project-wrapper a:hover { color: #F18F01; text-decoration: none; }

.project-box {
	width: 300px;
	height: 300px;
	margin: 5px;
	font-size: 34px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	/*transition: border .2s ease-out;*/
	border: 3px solid #fffc36;
	-moz-transition: transform .2s ease-in;
    -o-transition: transform .2s ease-in;
    -webkit-transition: transform .2s ease-in;
	transition: transform .2s ease-in;
}
.project-box:hover {
	border: 3px solid #fff;
	transform: scale(1.05);
}

.todolist { background-image: url("../static/img/websites/todolist.png"); }
.simpleportfolio { background-image: url("../static/img/websites/simpleportfolio.jpg"); }
.kaffe { background-image: url("../static/img/websites/coffee.png"); }
.tmb { background-image: url("../static/img/websites/mikrobryggeriet.jpg"); }
.manus { background-image: url("../static/img/websites/manus.png"); }


#games { 
	width: 100%; 
	display: flex;
	justify-content: center;
}
#games img {
	margin-bottom: 1em;
	max-width: 200px;
	width: 100%;
	height: auto;
	border: 3px solid #fffc36;
	border-radius: 50%;
	-moz-transition: transform .2s ease-in;
    -o-transition: transform .2s ease-in;
    -webkit-transition: transform .2s ease-in;
	transition: transform .2s ease-in;
}
#games img:hover {
	transform: scale(1.1);
	border: 3px solid #fffc36;
}

.cupyourball { background-image: url("../static/img/games/cupyourball.jpg"); }
.pissoff { background-image: url("../static/img/games/promo_pissoff.png"); }
.turnbasedsports { background-image: url("../static/img/games/turnbasedsports.jpg"); }
.rude8ball { background-image: url("../static/img/games/rudepromo.png"); }
.aktaer { background-image: url("../static/img/games/aktaer.png"); }
.toppblokk { background-image: url("../static/img/games/toppblokk.png"); }


#contact {
	width: 100%; 
	display: flex;
	justify-content: center;
}

.contact-text {
	margin-bottom: 30px;
}

form {
	margin-bottom: 30px;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #fffc36;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #f2ef20;
}



/*  FOOTER  */
#footer {
	background-color: #222324;
}
.footer-wrap {
  display: flex;
  /*flex-flow: column wrap;*/
  /*justify-content: space-between; only if using logo */
  justify-content: center;
  align-items: center;
}

#footer li { 
	display: inline-block; 
	margin: 0 10px; 
	-moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    -webkit-transition: color .2s ease-in;
	transition: color .2s ease-in; 
}
#footer ul li:hover { color: #fffc36; cursor: pointer; font-weight: bold; }
#footer li::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
#footer li span {
    content: attr(title);
    font-weight: bold;
    height: 0;
}

.social-icons { margin-right: 0; }

.footer-navbar {
  padding: 0;
  margin-bottom: 20px;
  list-style: none;
  list-style-image: none;
  text-decoration: none; 
  align-self: flex-end;
}
.footer-navbar a { text-decoration: none; color: #808080; }
.social-icons { color: #808080; }
.atSymbol { color: #fffc36; }
.github:hover span.TextGit { color: #fff }
.github:hover span.TextHub { color: #000 }
.twitter:hover span.TextTwitter { color: #00acee }
.youtube:hover span.TextYou { color: #c4302b }
.youtube:hover span.TextTube { color: #fff }

.footer-logo { 
	padding: 20px 0; 
	margin: 25px 0; 
	position: relative;
}
/*.footer-logo img {
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}*/

.footer-circle {
	width: 50px;
	height: 50px;
	border: 2px solid #fffc36;
	border-radius: 50%;
	-moz-transition:  .3s ease-in;
    -o-transition:  .3s ease-in;
    -webkit-transition:  .3s ease-in;
	transition:  .9s ease-in;
}

.footer-arrow {
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.arrow-hover { display: none; }

.footer-circle:hover > .arrow-hover {
	display: block;
	padding: 6px;
}

.copyright {
	text-align: center;
	color: #808080;
}


/*    RESPONSIVE    */

/*  Container  */
@media screen and (max-width: 700px) {.container{ width: 100%; max-width: 100%;}}

@media screen and (max-width: 1200px) {
	.about-me, .about-menu { width: 90%; max-width: initial; }
}

/*  Navbar  */
@media screen and (max-width: 700px) {
	.nav-wrap { width: 100%; }
	#navbar ul { width: 100%; }
	.nav-logo { left: 0; top: 3%;}
	.nav-list { float: none; }
}

@media screen and (max-width: 600px) {
	.nav-logo { display: none; }
	#navbar ul { text-align: left; float: none; }
	#navbar { padding: 0; position: fixed; background-color: #fffc36; height: auto; top: 0; justify-content: space-between;}
	#header { margin-top: 50px; }
	.nav-list { align-items: baseline; }
	#navbar ul li { color: #000; }
	.nav { display: block; bottom: initial; position: initial; }
	#navbar .container { margin: 0; }
	#home .text { width: 80%; }
	#about .about-container { flex-direction: column; }
	.about-text { margin: 0; }
	.about-me, .about-menu, .card { width: 90%; max-width: initial; }
	.skill-bar { font-size: 12px; }
	.card { display: none; }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
	.responsivelogo { display: block; }
	.nav a:not(:first-child) {display: none;}
	.nav a.icon {
		float: right;
		display: block;
		padding: 5px 10px 5px 5px;
		color: #000;
		font-size: 22px;
		text-decoration: none;
		position: absolute;
	    right: 0;
	    top: 0;
	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
	.nav.responsive {position: relative;}
	.nav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.nav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}

/* CONTENT */
@media screen and (max-width: 700px) {
  #games h1 {
    text-align: center;
  }
}

/*  FOOTER */
@media screen and (max-width: 1100px) {
  /*.footer-wrap { flex-direction: column; }*/
  .footer-social { text-align: center; }
  .footer-logo, .footer-social { width: 100%; max-width: 100%; }
  .footer-navbar { margin-bottom: 20px; }
}


/*  GO FULL WIDTH BELOW 480 PIXELS */
@media screen and (max-width: 600px) {
  .section { flex-direction: column; }
  .col {  margin: 1% 0 1% 0%; }
  .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media screen and (max-width: 600px) {
  .col { margin: 1% 0 1% 0%; }
}

@media screen and (max-width: 600px) {
  .span_2_of_2, .span_1_of_2 { width: 100%; }
}

@media screen and (max-width: 600px) {
	.card {
		height: auto;
	}
}