/* Background image */
body {
  background-image: url('images/mountains.jpg');
  padding: 10px;
  background-size: cover;
}

/* Header */
.header {
  background-image: url("images/header.jpg");
  text-align: center;
  padding: 20px;
}
  .header h1 {
      font-size: 50px;
      color: #ff0000;
      font-family: Algerian;
  }

  p {
    color: #228B22;
  }
   /* Style the top navigation bar */
   .topnav {
    overflow: hidden;
    background-color: black;
  }
  
  /* Style the topnav links */
  .topnav a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: 3px solid white;
    margin-right: 1px;
    margin-left: 1px;
  }
  
  /* Change color on hover */
  .topnav a:hover {
    background-color: #333333;
    color: white;
    border: 2px inset grey;
  }
  .topnav .disable {
    opacity: 0.6;
	  cursor: not-allowed;
	  border: 1px solid #ffffff;
  }
  
  .topnav .disable:hover {
    opacity: 0.6;
	  cursor: not-allowed;
	  border: 1px solid #ffffff;
  }

/* Create two unequal columns that floats next to each other */
/* left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

.fakeimg{
  background-size: cover;
}
/* youtube image */
  .imga {
    background-image: url('images/Youtube logo.png');
    width: 100%;
    height: 600px;
  }

/* server  image */
  .imgb {
    background-image: url('images/yamiyugi.png');
    width: 100%;
    height: 400px;
  }

/* case study image */
  .imgc {
    background-image: url('images/Case Studies.jpg');
    width: 100%;
    height: 700px;
  }

/* Add a card effect for articles */
.card {
padding: 20px;
margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background-image: url('images/header.jpg');
margin-top: 20px;
}
  .footer p {
    text-align: center;
    color: #ff0000;
    font-family: Cambria;
  }
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
.leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
    float: none;
    width: 100%;
  }
}