/* margin en padding naar 0 zodat er geen randjes overblijven */
body {
  margin: 0; /* automatisch geen margin zetten zodat alles goed in de hoek zit zonder rare ruimtes er tussen */
  padding: 0; 
  background-color: #020c1b; /* basis kleur van de background */
}
/* Home pagina */
/* bovenste rij voor Cuijk met foto's, header*/
.headingRow {
  position: absolute;
  margin-left: 0%;
  background-image: url(../images/photo-1483728642387-6c3bdd6c93e5.avif);
  width: 100%;
  height: 50%;
}
/* de text/foto's en Read more knop */
.content {
  position: absolute;
  margin-left: 15px;
  float: left;
  position: relative;
  color: #4d8eff;
  z-index: 2;
  max-width: 300px;
}

#greeting{
  text-align: center;
  color: aliceblue;
}

.headingRow section img {
  position: absolute;
  right: 50%;
  top: 12%;
  filter: brightness(0.7);
  border: #112240 solid 2px;
  box-shadow: 0.5px 0.5px 100px navy;
}

#imageMaas {
  position: absolute;
  border-radius: 10px;
  left: 25%;
  width: 20%;
  height: 50%;
}

#imageKoerier {
  position: absolute;
  border-radius: 10px;
  left: 55%;
  width: 20%;
  height: 50%;
}

.headingRow section img:hover {
  opacity: 0.8;
}
.content a {
  position: absolute;
  color: #aac9ff;
  text-decoration: none;
  border-radius: 24px;
  font-size: larger;
  background-color: #112240;
}

.content h1 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

.content p {
  color: #4d8eff88;
}

.content a:hover {
  color: #ffffff;
}
/* Logo van de website */
#headingLogoBar {
  width: 100%;
  height: 5%;
  background-color: #112240;
  color: #83dfdb;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border: black solid 1.5px;
}

#headingLogoBar h1 {
  margin-left: 2%;
}
/* geschiedenis informatie rij over Cuijk */
.informationCuijkRow {
  position: relative;
  margin-top: 12%;
  padding-left: 0px;
  display: inline-flex;
}

#headerInformationRow {
  position: absolute;
  top: -27%;
  color: #a9d5ff;
  width: 20%;
  padding-left: 40%;
  padding-right: 40%;
}

.informationCuijkRow article {
  border: #83dfdb solid 1px;
  background-color: #082755;
  width: fit-content;
  height: 250px;
}

.informationCuijkRow article h2 {
  color: #4d8eff;
  padding-left: 40px;
}

.informationCuijkRow article p {
  width: fit-content;
  height: fit-content;
  color: #83dfdb;
  opacity: 0.4;
  padding: 14px;
}
/* contact zoeken rij */
.contact {
  width: fit-content;
  height: fit-content;
}

.contact footer {
  padding-left: 3%;
  padding-bottom: 5%;
  position: absolute;
  margin-top: 3.7%;
  width: 100%;
  height: fit-content;
  background-color: #33496f;
}

.contact footer h1 {
  text-align: center;
  color: rgb(0, 0, 61);
}

.contact footer section iframe {
  position: absolute;
  width: 20%;
  height: 50%;
  left: 15%;
  top: 23%;
}

.contact footer section a {
  color: #0a1c37;
}

/* Activity pagina */

header {
  color: #98c1ff;
  text-align: center;
}

/* article styling */

.article-container {
  width: 60%;
  position: relative;
  transform: translate(-50% -50%);
  left: 30%;
}

#museumArticle {
  float: left;
  width: 20%;
  background-color: #4d8eff;
  border: #0a1c37 dashed 2.5px;
  cursor: default;
}

#museumArticle p {
  opacity: 0.6;
  padding-left: 5%;
}

#museumArticle h1 {
  text-align: center;
  color: #350292;
}

#museumArticle h2 {
  text-align: center;
}

#natureArticle {
  margin-left: 3%;
  background-color: #4d8eff;
  cursor: default;
  float: left;
  width: 20%;
  border: #0a1c37 dashed 2.5px;
}

#natureArticle h1 {
  text-align: center;
  color: #350292;
}

#natureArticle h2 {
  text-align: center;
}

#natureArticle p {
  padding-left: 5%;
  opacity: 0.6;
}

#swimmingArticle {
  cursor: default;
  margin-left: 3%;
  background-color: #4d8eff;
  float: left;
  width: 20%;
  border: #0a1c37 dashed 2.5px;
}

#swimmingArticle h1 {
  text-align: center;
  color: #350292;
}

#swimmingArticle h2 {
  text-align: center;
}

#swimmingArticle p {
  padding-left: 5%;
  opacity: 0.6;
}

#natureArticle:hover {
  opacity: 0.6;
}

#museumArticle:hover {
  opacity: 0.6;
}

#swimmingArticle:hover {
  opacity: 0.6;
}

/* restaurants page */

.restaurant-container {
  background-color: #4c5b72;
  width: 55%;
  margin-left: 20%;
}

#hetZusje {
  width: 20%;
  float: left;
}

#hetZusje h2{
  text-align: center;
}


#hetZusje img {
  padding-left: 8%;
  width: 80%;
  opacity: 0.7;
}

#hetZusje p {
  padding-left: 12px;
  width: 90%;
}

#hetZusje a{
  color:#83dfdb;
}

#spoon-restaurant {
  width: 55%;
  float: left;
}

#spoon-restaurant a{
  color: #83dfdb;
}

#smaak-restaurant a{
  color: #83dfdb;
  padding-left: 80%;
}

/* sports pagina */
.sports-container{  
  background-color: #1a4644;
  width: 100%;
  float: left;
}

#kickboxing-article {
  float: left;
  width: 35%;
}

#gym-article{
  float: left;
  width: 15%;
}

#gym-article li {
  padding: 3px;
}

.sports-container h2{
  color: #4d8eff;
  padding-left: 5%;
}

.sports-container p {
  padding-left: 5%;
  color: #4d8eff;
  opacity: 0.6;
}

.sports-container a{
  padding-left: 5%;

}

#soccer-article{
  padding-left: 5%;
  width: 30%;
  float: left;
}

#soccer-article p {
  padding-left: 5%;
}

.sports-container iframe{
  padding-left: 5%;
}

/* business pagina */

#business-row-container{
  float: left;
  width: 100%;
  background-color: #082755;
}

#business-row-container h2{
  color: #4d8eff;
  padding-left: 12px;
}

#business-row-container h3{
  padding-left: 10px;
}

#business-row-container p{
  padding-left: 8px;
  opacity: 0.7;
}