@font-face {
  font-family: 'Satoshi'; /* Name the font */
  src: url("Satoshi-Black.ttf") format("truetype"); 
  font-weight: 100 900;
  font-style: normal;
  font-display: swap; /* Helps with page load performance */
}

html{
    cursor: url("images/bcursor1.png"), pointer;
}


:root {
    --navy: #0a1c38;
    --blue: #1a6fc4;
    --accent: rgb(33, 150, 243);
    --white: #ffffff;
    --light-bg: #f0f4f8;
}

body{
    font-family:'Satoshi-Black',sans-serif;
    font-size: 2vw;
    font-weight: bold;
    background-color: var(--light-bg);
    color: white;
    cursor: url("images/bcursor1.png"), pointer;
}

.container {
    display: flex; /* Makes the children (aside and main) flex items */
    width: 20vw;
}


.sidebar-total {
    margin-left: 0; 
    flex-direction: column;
    position: fixed;

    flex-direction: column;
    position: fixed;
    width: 6vw; /* Set a specific width for the sidebar */
    overflow-y: auto; /* Adds a scrollbar if content is too long */

}

.sidebar {
    opacity:0;
    cursor: url("images/bcursor1.png"), auto;
    margin: 0;
    margin-left: 0;

    flex-direction: column;
    position: fixed;
    width: 15vw; /* Set a specific width for the sidebar */
    overflow-y: auto; /* Adds a scrollbar if content is too long */
}

.sidebar a{
    font-family:'Satoshi-Black',sans-serif;
    cursor: url("images/bcursor1.png"), default;

    display:block;
    margin: auto;
    align-items:center;
    padding: 1.15vw;

    border-radius:50px;
    
    background-color: var(--accent);
    color: white;

    gap:6px;

    text-decoration:none;
    border:none;
    transition:all 0.2s;

    font-size:1em;
    font-weight:bold;

    margin-bottom: 20px;
    margin-left: 30px;

    text-decoration: none;
    /* cursor: url("images/bcursor1.png"), auto;
    text-align: left;
    display: block;
    margin: .8vw;
    width: 10vw;

    border-radius: 10px;
    row-gap: 1rem;
    font-size: 1.5vw;
    background-color: white;
    text-decoration: none;
    color: var(--blue); */
}

.sidebar a:hover:not(.active) {
    transition: ease-in 0.3s;
    padding-left: 2vw;
    background-color: var(--blue);
    color: white;
    box-shadow: 0px 0px 15px rgb(33, 150, 243);;
}

.sidebar a.active:hover {
    transition: ease-in 0.3s;
    padding-left: 2vw;
    background-color: var(--blue);
    color: white;
    box-shadow: 0px 0px 15px rgb(33, 150, 243);;
}

.sidebar a.active {
    background-color: var(--blue);
    color: white;
}


.sidebar.show {
    opacity: 1;
}


.content{
    margin-left: 3.5vw;
    margin-right: 10vw;
    padding: 1px 16px;
    height: 100%;
}

.content.show{
    padding: 1px 16px;
    height: 100%;
    margin-left:16vw;
}

/*.sidebar button{
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: black;
    background: none;
    border: none;
}*/


.nav-btn{
    display: block;
    opacity: 1;
}

.nav-btn.show{
    opacity: 1;
    display: block;
}

.course-set{
    cursor: url("images/bcursor1.png"), auto;
    z-index: 15;
    position: absolute;
    right: 1%;
    margin-left: 0vw;
    cursor: url("images/bcursor1.png"), pointer;
    align-self: right;
    gap: .5em;
    display: grid;
    grid-template-columns: repeat(1, minmax(20px, 150px));

    
    animation: fadeUp 0.5s ease forwards;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

}

.course-tag{
    cursor: url("images/bcursor1.png"), auto;
    overflow-wrap: break-word;
    padding: 10px;
    margin: 2px;
    gap: 0.5em;
    border-radius: 20px;
    border-color: var(--blue);
    background-color: var(--accent);
}
.header{
    position:sticky;
    top:0;
    z-index:100;

    display:flex;
    align-items:center;
    padding:0;

    margin-bottom: 0;
    margin-left: 0;

    height:150px;
    /* light-bg */
    background:rgba(240,244,248, 0.15);
    backdrop-filter:blur(5px);
    border-bottom:1.5px solid rgba(41,171,226,0.15);
}

.header-content{
    margin-left: 2vw;
    display: flex;
    left: 30%;
    justify-content: space-between;
}

.course-select {
    font-family: 'Satoshi-Black', sans-serif;
    
    font-size: 0.8em;
    font-weight: bold;
    padding: 8px 16px;

    border-radius: 20px;
    position: absolute;
    right: 1%;
    border: none;
    background-color: var(--accent);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;

    
    animation: fadeUp 0.5s ease forwards;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

    
}

.course-select:hover {
    border: none;
    background-color: var(--blue);
    box-shadow: 0px 0px 15px rgb(33, 150, 243);
}

.course-select option {
    border:none;
    background-color: var(--light-bg);
    color: var(--navy);
}

/*  
@media(max-width:500px){
  .feat-grid{grid-template-columns:1fr;}
} */