div#background{
    width: 100%;
    height: 100vh;
    background-color: rgb(13, 16, 25);
    background-image: url("../images/desktopBckG.png");
    background-position: 0;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    transition: all 300ms ease;
}

.page {
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page.active {
  opacity: 1;
  visibility: visible;
  position: relative; /* so the active one takes space */
}



div#homePage{
    display: block;
}
div#desPage{
    display: none;
}
div#crewPage{
    display: none;
}
div#tecPage{
    display: none;
}

/* nav styles */

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:var(--space-300);
}
nav div#imgDiv{
    z-index: 2;
}
nav div#imgDiv img{
    z-index: 2;
}
nav ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--space-200);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    padding: var(--space-300) var(--space-1000);
    padding-left: var(--space-1200);
    z-index: 1;
}
/* nav ul li{

} */
nav ul li a{
    color: white;
}
nav ul li a span{
    padding: 5px;
}


/* header styles */

header{
    padding: var(--space-1200);
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--space-200);
    transition: all 300ms ease;
}
header div#rightDiv{
    padding: var(--space-600);
} 
header div#rightDiv h1{
    color: var(--lightBlue);
    line-height: 1;
} 
header div#rightDiv h1 span{
    display: block;
    color: white;
} 
header div#rightDiv p{
    color: var(--lightBlue);
    width: 40rem;
} 
header div#leftDiv button{
    width: 18rem;
    height: 18rem;
    border-radius: 10rem;
    background-color: white;
    border: none;
    transition: all 200ms ease;
} 
header div#leftDiv button:hover{
    cursor: pointer;
    box-shadow: -2px -11px 43px 69px rgba(251, 251, 251, 0.3);
    -webkit-box-shadow: -2px -11px 43px 69px rgba(251, 251, 251, 0.3);
    -moz-box-shadow: -2px -11px 43px 69px rgba(251, 251, 251, 0.3);
} 

/* logic classes */

.active{

}