@font-face {
  font-family: 'LatoBold';
  font-weight: normal;
  src: url('../fonts/Lato-Bol.ttf')  format('truetype');
}

@font-face {
  font-family: 'LatoReg';
  font-weight: normal;
  src: url('../fonts/Lato-Reg.ttf')  format('truetype');
}

body { 
  background: url("../images/darkbackground.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.wrong_os {

  position: relative;
  top: -0px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(11,142,255);
  width: 700px;
  background-color: rgb(233,237,242);

  border-radius: 5px;
  color: rgb(11,142,255);
  padding: 10px 0px 10px 0px;
  font-family: 'LatoReg';

}

.white_box {

  position: relative;
  top: -50px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(11,142,255);
  width: 800px;
  background-color: rgb(233,237,242, 10%);

  border-radius: 5px;
  color: rgb(11,142,255);
  padding: 10px 0px 50px 0px;
  font-family: 'LatoBold';

}

.white_box .text{

  font-family: 'LatoBold';
  font-weight: 900;
  font-size: 25px;
    
}

.btn-primary {

  border-style: solid;
  border-width: 2px;
  border-color: rgb(11,142,255);
  background-color: rgb(11,142,255);
  position: relative;
  top: 20px;
  border-radius: 5px;
  color: white;
  font-size: 20px;
  padding: 5px 20px 5px 20px;
  
}

.windows {
  background-image: url("../images/windows.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  height: 200px;
  width: 200px;
}

.windows:hover {
  background-image: url("../images/windows_hover.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  height: 200px;
  width: 200px;
}

.linux {
  background-image: url("../images/linux.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  height: 200px;
  width: 200px;
}

.linux:hover {
  background-image: url("../images/linux_hover.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  height: 200px;
  width: 200px;
}

.apple {
  background-image: url("../images/apple.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  height: 200px;
  width: 200px;
}

.apple:hover {
  background-image: url("../images/apple_hover.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  height: 200px;
  width: 200px;
}