*{
    padding:0px;
    margin:0px;
    overflow-x: hidden;
}
/* course-nav-links*/
.triangle{
    width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 12px solid black;
    margin:auto;
    margin-top:1px;
    display:none;
}
#course_nav_links{
    background-color: black;
    width:100%;
    display: block;
    margin:auto;
    height:50px;
    margin-top:-2px;
    overflow:hidden;
    visibility: hidden;
}
.course_type{
    margin:auto;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    height:100%;
    overflow: hidden;
}
.course_type div{
    color:whitesmoke;
    padding-top:1%;
    margin:0px 15px;
    font-size:1.05rem;
    vertical-align:middle;
    
}
/* #course_types_dev:hover #triangle{
    position: absolute;
    left:100px;
    border-color: blueviolet; */
/*}*/
.course{
    width:100%;
    margin:auto;
    /* box-shadow: 0 2px 4px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 8%); */
    height:90px;
    box-sizing: border-box;
    overflow: hidden;
}
#course_nav{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width:90%;
    margin:auto;
    height: 40px;
    overflow:hidden;
}
.course_types{
    font-size: 0.95rem;
    font-family: udemy sans,sf pro text,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}
#course_types_dev:hover #triangle-1{display: block;}
#course_types_busi:hover #triangle-2{display: block;}
#course_types_finan:hover #triangle-3{display: block;}
#course_types_IT:hover #triangle-4{display: block;}
#course_types_off:hover #triangle-5{display: block;}
#course_types_per:hover #triangle-6{display: block;}
#course_types_des:hover #triangle-7{display: block;}
#course_types_mar:hover #triangle-8{display: block;}
#course_types_health:hover #triangle-9{display: block;}
#course_types_mus:hover #triangle-10{display: block;}
.course_type div:hover{color:blueviolet;}