:root {
--base-color-light: #F5F5F5;
--base-color-dark: #3C3C3C;
--accent-color-blue: #2D73D2;
--accent-color-green: #47A025;
--accent-color-red: #DB2B39;
--accent-color-dark: #303030;
--font-light: #b0b0b0;
--font-dark:#3f3f3f;
}

*{
  box-sizing: border-box;
}

body {
  background-color: var(--base-color-light);
  font-family: "Century Gothic", 'roboto', sans-serif;
  animation: FadeIn 0.5s;
  overflow: hidden;

}
@keyframes FadeIn {
 0% {
 opacity:0;
 }
 100% {
 opacity:1;
 }
}

a {
  text-decoration: none;
}

.login-btn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.login-btn a {
  padding: 8px 16px;
  background-color: var(--accent-color-blue);
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
}

.login-btn a:hover {
  background-color: #1e5799; /* Verander de kleur naar wens */
}


.wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}

.image{
  margin-top: -100px;
  position: relative;
}

.image::before {
  display: block;
} ​

.menu {
  float: left;
  width: 20%;
  text-align: center;
}

.menu a {
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 100%;
}

.main {
  float: left;
  padding: 0 20px;
}

.contact {
display: flex;
justify-content: center;
align-items: center;
z-index: 10;

}

.contact-btn {
background-color: var(--base-color-dark);
color: var(--base-color-light);
border: solid var(--base-color-light) 3px;
border-radius: 5px;
padding: 2px 8px 3px 8px;
font-size: 10px;
}

.contact-btn:hover {
  background-color: var(--base-color-light);
  color: var(--base-color-dark);
  border: solid var(--base-color-dark) 3px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  width: 80%;

}

a {
transform: scale(2.5);
margin: 15 30 15 30;
opacity: 100%;
color:rgb(77, 77, 77)
}


.btn1{
  background-color: var(--base-color-light);
  border: none;
}
.btn2{
  background-color: var(--base-color-light);
  border: none
}
.btn3{
  background-color: var(--base-color-light);
  border: none
}


#btn1:hover{
  color: #4267B2;
  opacity: 100%;
  transform: scale(2.7);
}
#btn2:hover{
  color: #0077b5;
  opacity: 100%;
  transform: scale(2.7);
}
#btn3:hover{
  color:#d6249f;
  opacity: 100%;
  transform: scale(2.7);
}

ul {
  list-style-type: none;
  margin: 0 auto 0 auto;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: rgb(77, 77, 77);
  text-align: center;
  padding: 14px 26px;
  text-decoration: none;
  border-radius: 15px;
  border: solid var(--base-color-light) 5px;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  color: rgb(39, 39, 39);
}
.right {
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

@media only screen and (min-width: 620px)
  /* For mobile phones: */
  {

.nav{
display: none;

}
}