/* --------- Navbar --------- */
.navBar {
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 200px;
 background-color: hsl(0, 0%, 25%);
 border-radius: 7px;
 border-right: 2px solid; 
 border-color: red;
}

.navBar a {
 color: white;
 text-decoration: none;
 padding: 15px;
 display: block;
 width: auto;
 font-size: 20px;
 text-align: center;
}

.navBar ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.navBar a:hover {
 text-decoration: underline;
 color: hsl(207.69deg 69.19% 59.39%);
}

#logo {
padding: 0px;
margin: 15px;
}

/* --------- general --------- */
body {
background-image: url("../pictures/back.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-color: black; 

margin-left:  250px;
margin-right: 50px;
}

/* --------- Button Container --------- */ 
.infoButtons { 
 display: flex;
 flex-direction: column;
 gap: 20px;
 max-width: 400px;
} 

.infoButtons h1 {
 color: white;
 margin-left: 25; 
}

/* --------- Buttons --------- */ 
 .infoButton { 
 background-color: hsl(0, 0%, 20%);
 color: white;
 text-decoration: none;
 padding: 18px 25px;
 border-radius: 10px;
 font-size: 22px;
 display: block;
 transition: 0.25s;
 border: 2px solid transparent;
} 

.infoButton:hover 
{ 
 background-color: hsl(0, 0%, 15%);
 border-color: red;
 transform: translateX(5px);
}

/* --------- Discord button --------- */

.infoButton1 { 
 background-color: hsl(0, 0%, 20%);
 color: white;
 text-decoration: none;
 padding: 18px 25px;
 border-radius: 10px;
 font-size: 22px;
 display: block;
 transition: 0.25s;
 border: 2px solid transparent;
 border-color: red;
 margin: 0;
}