@charset "utf-8";
/* CSS Document */

/*Changes the color to red, when its on the wrong scaling*/
body{
	background-color:black; 
}

/*Changes the font of my choosing*/
body{
	font-family: Arial;
	margin: 0;
}

/*Header*/
header {
  padding: 10px;
  background-image: url("img/Hero.png");
  background-position: center;
  text-align: center;
  color: lightgoldenrodyellow;
  }

/*Border around welcome text*/
#welcoming {
	border: solid;
	border-width: thick;
	border-color: orangered;
	background-color: orangered;
}

/*Top navigation bar*/
.navbar {
  display: flex;
  background-color: #755448;
}

/*Navigation bar links*/
.navbar a {
  color: white;
  padding: 20px 35px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #B56041;
  color: #1BF5C9;
}

/* Column container */
.container {  
  display: flex;
  flex-wrap: wrap;
}

/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #47A08E;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  flex: 50%;
  background-color: #3A4B47;
  width: 97%;
  padding: 20px;
  color: white;
  
}

/*Responsive images*/
img {
	max-width: 100%;
	height: auto;
}

/* Footer */
footer {
  padding: 20px;
  text-align: center;
  background: #F5541A;
}

/*Changes the color to green, when its on the right scaling*/
@media (max-width: 460px) {
  body {
    background-color: lightgreen;  }
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .container, .navbar {   
    flex-direction: column;
  }
}