modified: Countries/de/index.html

modified:   Countries/de/style.css

Countries/de/index.html

@@ -10,7 +10,7 @@
             <div class="div2"> </div>
             </div>
         <div class="name-and-coat">
-          <div class="name"> <h>Bundesrepublik Deutschland</h> </div>
+          <name> <div class="name"> <h>Bundesrepublik Deutschland</h> </div></name> 
         </div>
 
         <info>  

Countries/de/style.css

@@ -78,7 +78,6 @@
   .name-and-coat {
     position: relative;
     text-align: center;
-    margin: auto;
     background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/da/Coat_of_arms_of_Germany.svg");
     background-repeat: no-repeat;
     background-size: auto 100%;
@@ -88,7 +87,7 @@
 
 
   .map {
-    width: 100%;
+    width: 25vw;
     height: auto;
     object-fit: contain;
     filter: brightness(0);
@@ -122,8 +121,9 @@
     @media (max-width: 1100px) { 
       .profiles {
           flex-direction: column; 
-          margin: auto auto;
-          width: auto;
+          align-items: center;
+          margin-bottom: 20vw;
+          gap: 20vw;
       }
   }
   
@@ -195,15 +195,11 @@
         "parliament parliament info"
     ;
       grid-template-rows: 22% 1fr 1fr 1fr;
-      grid-template-columns: 15% 1fr calc(20vw + 20px);
+      grid-template-columns: 1fr 1fr 1fr;
       grid-gap: 0px;
       height: 100vh;
-      margin: 0px;  
-    }
-    
-    right {
-      background-color:#000000;
-      margin: auto auto;
+      margin: 0px; 
+      max-width: 100%; 
     }
 
     coat {
@@ -211,25 +207,33 @@
     }
 
     .name {
-      grid-area: name;
+      width: 100%;
+      position: relative;
       text-align: center;
       font-family: Futura;
       text-transform: uppercase;
       margin-top: auto;
       margin-bottom: auto;
-      font-size: calc(3vw + 20px);
+      font-size: calc(2vw + 20px);
       background: url(https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg);
       background-size: auto 100%;
       background-repeat: repeat;
       box-decoration-break: clone;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
+      min-height: 66%;
     }
 
+    name {
+      grid-area: name;
+    }
+
+
     info {
       grid-area: info;
-      margin-left: 2.5%;
-      margin-right: 2.5%;
+      align-items: center;
+      margin: auto auto;
+      margin-top: 1vw;
     }
 
     header {
@@ -268,30 +272,23 @@ footer {
   font-weight: bold;
 }
 
-.logo {
-  height: 20px;
-}
-
-th {
-  text-align: center;
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-table{
-  width: 90%;
-}
 
 .table-data {
   font-size: 25px;
   font-family: Futura;
   text-decoration: none;
+  width: auto;
 }
 
 .table-description {
   background-color: transparent;
   text-decoration: none;
   font-size: 15px;
+  width: auto;
+}
+
+audio {
+  width: 25vw;
 }
 
 .info-text {