navbar css file

static/navbar.css

+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+@font-face {
+    font-family: AccidenzCommons;
+    src: url(https://static.igem.wiki/teams/5054/ccaccidenzcommons-medium.otf);
+}
+body{
+    background: #C6EBE8;
+}
+.my-nav{
+    top: 0;
+    width: 100%;
+    height: 78px;
+    background: #C6EBE8;
+    backdrop-filter: blur(5px);
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    z-index: 10;
+    transition: all 0.2s linear;
+}
+.my-nav .icon{
+    flex-basis: 200px;
+    margin-top: 10px;
+    margin-left: 15px;
+    margin-bottom: 7px;
+    background-image: url(https://static.igem.wiki/teams/5054/logo-kleur.svg);
+    background-position-x: -30px;
+    text-decoration: none;
+    background-repeat: no-repeat;
+}
+.my-navbar{
+    height: 67px;
+    margin-left: 20px;
+    margin-right: 50px;
+    margin-top: 24px;
+    list-style: none;
+}
+.my-navbar>li{
+    float: left;
+    width: 120px;
+    height: 110%;
+    margin-right: 25px;
+}
+#human-practice{
+    width: 250px;
+}
+#edu{
+    width: 90px;
+}
+.my-navbar>li a{
+    color: var(--text, var(--text, rgba(24, 90, 79, 1)));
+    font-family: AccidenzCommons;
+    font-size: 25px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-decoration: none;
+    transition: color 0.15s linear;
+}
+.son{
+    margin-top: 30px;
+    list-style: none;
+    display: none;
+    text-align: left;
+    transition: all 0.3s ease-out;
+    opacity: 0;
+}
+
+@media screen and (min-width:1800px){
+    .my-navbar>li{
+        width: 150px;
+    }
+    #human-practice{
+        width: 280px;
+    }
+    #edu{
+        width:120px;
+    }
+    .my-nav>ul>li a{
+        font-size: 30px;
+    }
+    .my-navbar{
+        margin-top: 25px;
+    }
+    .my-nav .icon{
+        flex-basis: 240px;
+        margin-left: 25px;
+        margin-top: 15px;
+    }
+    .my-nav{
+        height: 84px;
+    }
+}
+@media screen and (max-width:1450px) and (min-width:1280px){
+    .my-navbar>li{
+        width: 100px;
+    }
+    #human-practice{
+        width: 210px;
+    }
+    .my-nav>ul>li a{
+        font-size: 22px;
+    }
+    .my-navbar{
+        margin-top: 23px;
+    }
+    .my-nav .icon{
+        flex-basis: 200px;
+        margin-left: 18px;
+    }
+    .my-nav{
+        height: 74px;
+    }
+}
+@media screen and (max-width:1280px) and (min-width:1120px){
+    .my-navbar>li{
+        width: 88px;
+    }
+    #human-practice{
+        width: 190px;
+    }
+    #edu{
+        width:80px;
+    }
+    .my-nav>ul>li a{
+        font-size: 20px;
+    }
+    .my-navbar{
+        margin-top: 21px;
+    }
+    .my-nav .icon{
+        flex-basis: 150px;
+        margin-left: 5px;
+        background-position-x: -25px;
+        background-position-y: 5px;
+        background-size: 130%;
+    }
+    .my-nav{
+        height: 70px;
+    }
+}
+@media screen and (max-width:1130px){
+    .my-navbar>li{
+        width: 78px;
+    }
+    #human-practice{
+        width: 160px;
+    }
+    #edu{
+        width:70px;
+    }
+    .my-nav>ul>li a{
+        font-size: 18px;
+    }
+    .my-navbar{
+        margin-top: 15px;
+        margin-left: 20px;
+        margin-right: 0px;
+    }
+    .my-nav .icon{
+        flex-basis: 0px;
+        margin: 0;
+    }
+    .my-nav{
+        height: 55px;
+        justify-content: center;
+    }
+    .son{
+        margin-top: 20px;
+    }
+}
+/* hide the navigation */
+@media screen and (max-width:830px){
+    .my-navbar{
+        display: none;
+    }
+}
\ No newline at end of file