@import url(/components.css);



header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    height:12vh;
    box-shadow: 0 4px 2px 0 var(--shadow-color-);
 
}


.nav-contents{
    display: flex;
    gap: 2rem;
    margin: 2rem;
}

#container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    padding: 2rem;
    margin: 0 auto;
    gap:2rem;

}

.primary-btn{
    background-color: var(--primary-color);
    height: 2rem;
    width: 6rem;
    color:var(--off-white-);
    border: 0;

    
}

.primary-btn a{
    color:var(--off-white-);
    text-decoration: none;

}

 

.subcontainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(250, 246, 246);
    /* height: 15rem; */
    justify-content: center;
    margin:5rem;
    padding: 3rem;
    gap:2rem; 
    
}

.container-wrapper{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.container-title{
    font-weight: bolder;
    font-weight: 1.3rem;
}

.container-discription{
    font-weight: 0.8rem;
}

footer{
    display: flex;
    align-items: center;
    padding:1.5rem;
    justify-content: center;
    gap: 1rem;
    width:100vw;
    box-shadow: 4px 0 4px 0;
    

}



#header-title{
    color:var(--primary-color);
    font-size: 2rem;
    text-decoration: none;
    margin-left: 1rem;

}
/* /* a{
    text-decoration: none;
    color: var(--off-white-);
} */

#header-nav-link{
    text-decoration: none;
    color: var(--off-white-);
    font-weight: bolder;
    font-size: larger;
}