changed fonts, tried phone

static/style.css

@@ -11,6 +11,7 @@ To have responsive web design, we have so use different units.
   vw     relative  (Relative to 1% of the width of the browser window size)
 
 There are some things we do not want to have fixed sizes: 
+- box-shadow
 */
 
 
@@ -60,12 +61,68 @@ p{
 .bg-dark { background-color: var(--darkpurple) !important; }
 .bg-hero { background-color: var(--purple) }
 
-/* font */
+/* * * * * * * * */
+/* * * FONTS * * */
+/* * * * * * * * */
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-black.ttf'), format('truetype');
+  font-style: normal;
+  font-weight: 900;
+}
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-blackitalic.ttf'), format('truetype');
+  font-style: italic;
+  font-weight: 900;
+}
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-bold.ttf'), format('truetype');
+  font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-bolditalics.ttf'), format('truetype');
+  font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-semibold.ttf'), format('truetype');
+  font-style: normal;
+  font-weight: 600;
+}
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https: //static .igem .wiki/teams/ 5247px /design/fonts/acumium-pro-bookitalic.ttf'), format('truetype');
+  font-style: italic;
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-book.ttf'), format('truetype');
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-light.ttf'), format('truetype');
+  font-style: normal;
+  font-weight: 300;
+}
 @font-face {
   font-family: 'AcuminPro';
-  src: url('static/fonts/Acumin Pro Black.otf'), url('static/fonts/Acumin Pro Bold.otf'), url('static/fonts/Acumin Pro Book.otf'), url('static/fonts/Acumin Pro ExtraLight.otf'), url('static/fonts/Acumin Pro Light.otf'), url('static/fonts/Acumin Pro Medium.otf'), url('static/fonts/Acumin Pro Semibold.otf'), url('static/fonts/Acumin Pro Thin.otf'), url('static/fonts/Acumin Pro Ultrablack.otf'),  format('otf');
-  font-weight: normal;
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-extralight.ttf'), format('truetype');
   font-style: normal;
+  font-weight: 200;
+}
+@font-face {
+  font-family: 'AcuminPro';
+  src:  url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-thin.ttf'), format('truetype');
+  font-style: normal;
+  font-weight: 100;
 }
 
 
@@ -374,4 +431,82 @@ a:hover { color: var(--highlight); text-decoration: underline; }
 .anchor{
   position: relative;
   padding-top: 100px; 
-  }
\ No newline at end of file
+  }
+
+
+
+/* * * * * * * * */
+/* * * NAVBAR* * */
+/* * * * * * * * */
+/*colour of the navbar links*/
+/*extra navbar type mit transparentem hintergrund */
+.bg-transp{
+    background:transparent;
+    color: var(--darkpurple);
+  }
+/* macht den link text dark purple */ 
+.nav-link{
+    color: var(--darkpurple) !important;  
+}
+/*Macht den Team Namen lila*/
+.navbar-dark .navbar-brand{
+    color: var(--darkpurple);
+}
+/*When hovering over navbar link with mouse the text turns white */
+.nav-link:hover {
+    color: white !important;
+    background-color: var(--darkpurple) !important;
+    border-radius: 7px;
+}
+/* macht den Hintergrund der Navbar blurry */ 
+.navbar{
+    backdrop-filter: blur(5px);
+    transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
+}
+    nav.navbar {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.dropdown-menu{
+    background-color: white;
+    border-width: 2px;
+    border-color: var(--darkpurple);
+}
+.dropdown-item{
+    color: var(--darkpurple);
+}
+.dropdown-item:hover{
+    color: var(--highlight);
+    background-color: var(--darkpurple);
+    border-radius: 7px;
+}
+
+
+/* * * * * * * * */
+/* SCREEN WIDTHS */
+/* * * * * * * * */
+/*For tablet or bigger*/
+@media screen and (min-width: 992px) {
+    /* navbar opens on hover*/ 
+    .dropdown:hover .dropdown-menu {
+        display: block;
+    }
+}
+/*For Tablet and smaller*/
+@media screen and (max-width: 992px){
+
+}
+/*For Smartphones*/
+@media screen and (max-width: 768px){
+  .topnav a {
+    float: none;
+    width: 100%;
+  }
+  [class*="col-"] {
+    width: 100%;
+  }
+}
+
+
+