/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -80px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */ 
  padding: 15px; /* 15px padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

img.align-left {
  float: left; /* Position the picture left of the screen */
  margin-right: 10px; /* Set a specific space between element */
}

img.align-right {
  float: right; /* Position the picture right of the screen */
  margin-left: 10px; /* Set a specific space between element */
}

img.large {
  max-width: 100%; /* Set a specific width */
  height: auto; /* Set a automatic height */
}

img.medium {
  width: 500px; /* Set a specific width */
  border-radius: 8px; /* Rounded corners */
}

img.small {
  width: 200px; /* Set a specific width */
}

div.gallery {
  margin: 5px; /* Set a specific space between element */
  border: 1px solid #ccc; /* Set a specific border */
  float: left; /* Position the picture left of the screen */
  width: 180px; /* Set a specific width */
}

div.gallery:hover {
  border: 1px solid #777; /* Set a specific border */
}

div.gallery img {
  width: 100%; /* Set a specific width */
  height: auto; /* Set a automatic height */
}

div.desc {
  padding: 15px; /* 15px padding */
  text-align: center; /* Position the text in the center of the screen */
}

#container{
  max-width: 100%; /* Set a specific width */
  margin: 5px auto; /* Set a specific space between element */
  background-color: #C5DFF8; /*  blue background-color */
}

html {
  margin: 0px; /* Set a specific space between element */
}

body {
  background-color: #C5DFF8; /*  blue background-color */
  font-family: Arial, Helvetica, sans-serif; /* text size */
}

head{
  background-color: #C5DFF8; /*  blue background-color */
}

p{
  color: black; /* black text color */
  font-family: arial; /*  text type */
  font-size: 15px; /* text size */
}

h2{  
  color: black; /*  black text color */
  font-family: arial; /*  text type */
  font-size: 50px; /* text size */
}

header p, nav p{
  color: black; /* black text color */
}

table, th, td {
  border: 1px solid black; /*  black border color */
  border-collapse: collapse; /* border collapse */
}

ul {
  list-style-type: square; /* Set a specific form */
}

nav{ 
padding: 200px; /* 200px padding */
max-height: 100px; /* Set a specific height */
}

header{
  padding: 50px; /* 50px padding */
  height: 100px; /* Set a specific height */
}article{
  padding: 200px; /* 200px padding */
  height: 100px; /* Set a specific height */
}

footer{ 
  padding: 200px; /* 200px padding */
  height: 100px; /* Set a specific height */
}

/* The about link: 20px from the top with a blue background */
#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
  background-color: #00049D; /* Dark-Blue */
}

#home {
  top: 20px; /* Set a specific space between menu tabs */
  background-color: #1468F6; /* Blue */
}

#veyron {
  top: 80px; /* Set a specific space between menu tabs */
  background-color: #1468F6; /* Blue */
}

#chiron {
  top: 140px; /* Set a specific space between menu tabs */
  background-color: #1468F6; /* Blue */
}

#divo {
  top: 200px; /* Set a specific space between menu tabs */
  background-color: #1468F6; /* Blue */
}

#history {
  top: 260px; /* Set a specific space between menu tabs */
  background-color: #1468F6; /* Blue */
}

#about {
  top: 320px; /* Set a specific space between menu tabs */
  background-color: #1468F6; /* Blue */
}

#larsweb {
  top: 380px; /* Set a specific space between menu tabs */
  background-color: #1468F6; /* Blue */
}