unit changes

static/style.css

+/* * * * * * * * */
+/* * * UNITS * * */
+/* * * * * * * * */
+/*
+To have responsive web design, we have so use different units. 
+  abbr   type      explanation
+  ___________________________________________________-
+  px     absolute  (self explanatory; pixel) 
+  em     relative  (Relative to the font-size of the element (2em means 2 times the size of the current font))
+  rem    relative  (Relative to font-size of the root element; r (like root) + em = rem.)
+  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: 
+*/
+
+
+/* Remove default margin */
+* {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
 body { 
+  height: 100%;
+  width: auto;
   font-family: 'AcuminPro';
-  padding-top: 56px; 
+  padding-top: 5vw  ; 
   background-color: white;
   color: var(--offblack);
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
 }
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+
 .contrast-mode {
   background-color: white !important;
   color: black !important;
 }
 
-a{
-  color: var(--lightblue);
-}
+
 p{
   text-align: justify
 }
@@ -72,14 +101,14 @@ p{
   
  
 /*galleries */
-.gallery-container{
+/*.gallery-container{
   border: var(--offblack);
   border-radius: 3px;
   border-style: ridge;
   padding: 10px ;
   margin-top: 20px;
   margin-bottom: 20px;
-}
+}*/
 
 /*collapsible*/
  /* Style the button that is used to open and close the collapsible content */
@@ -87,8 +116,8 @@ p{
   background-color: var(--mediumpurple);
   color: var(--offblack);
   cursor: pointer;
-  padding: 18px;
-  margin-top: 20px;
+  padding: 1.2vw;
+  margin-top: 2vw;
   width: 100%;
   border: none;
   text-align: left;
@@ -221,6 +250,12 @@ svg text:hover{
 }
 
 /*Media*/
+img,
+picture,
+svg {
+  max-width: 100%;
+  display: block;
+}
 .fit{
   width: 100% !important;
   height: auto !important;
@@ -261,6 +296,13 @@ svg text:hover{
 
 
 /*Links and buttons*/
+a {
+  color:var(--lightblue);
+  text-decoration: none !important; /* Remove underline */
+}
+a:hover {
+  color: inherit;
+}
 .backtotop {
   place-self:end;
   /* visual styling */