src/App/Graph.css

+/* Specific styles for the pie chart container */
+.pie-chart-container {
+    display: block; 
+    width: 400px; 
+    height: 400px; 
+    padding: 10px; 
+    margin: auto;
+}
+
+
+.pie-chart-container canvas {
+    width: 100% !important; 
+    height: 100% !important;
+}

src/App/HP.css

+#under-reflection{
+    background-color: var(--lightblue) !important;
+}
+#under-responsibility{
+    background-color: var(--lightpurple) !important;
+}
+#under-responsive{
+    background-color: var(--text-primary) !important;
+}
+
+#under-responsive, #under-responsibility, #under-reflection{
+    border-radius: 10px;
+    color: var(--ourbeige) ;
+}
+
+#under-reflection div, #under-responsibility div, #under-responsive div{
+    padding: 15px;   
+}
+
+.framecycletab{
+    box-shadow: 1px 2px 5px gray;
+    background-color: var(--background);
+    padding: 30px 20px;
+    border-radius: 20px;
+    margin-left: 60px;
+  }
+
+  .act-version, .reflect-version, .engage-version /*, .anticipate-version */{
+    display: none !important;
+  }
+
+  #g744{
+    display: block !important;
+  }
+
+  #hp3-wrapper{
+    display: inline-flex;
+    justify-content: center;
+    max-width: 70%;
+    max-height: 60%;
+  }
+
+  
+  #left-col {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  #ref-img {
+    width: 100%;
+    height: auto;
+  }
+
+
+  
+  .mitte {
+    
+    flex-grow: 1; /* Nimmt den gesamten restlichen Platz ein */
+  }
+  
+  .unten {
+    padding-bottom: 50px;
+    padding-left: 10px;
+  }
+  
+  .mitte-parent{
+    display: grid;
+  }
+
+  .graphs{
+    max-height: 50% !important;
+  }
+
+  .pie-chart-container-small{
+    height: auto;
+  }
+
+  .pie-chart-container-other{
+    height: 250px !important;
+  }
+
+  .pie-chart-container-small, .pie-chart-container, .pie-chart-container-other, .bar-chart-container {
+    margin-bottom: 10px;
+  }
\ No newline at end of file

src/App/LandingPage.css

+.content-block {
+  width:100vw;
+  height:100vh;
+  opacity: 0;
+  visibility: hidden;  
+  transition: opacity 1200ms ease-out, transform 600ms ease-out,
+  visibility 1200ms ease-out;
+  will-change: opacity, visibility;
+  background-color: var(--offblack);
+}
+
+.content-block.is-visible {
+    opacity: 1;
+    transform: none;
+    visibility: visible;
+    background-color: var(--offblack);
+}
+
+.landing-page-header .row .col{
+  padding: 30px;
+  margin: auto;
+  justify-content: center;
+}
+
+.landing-page-header .col{
+  justify-content: center;
+  display: grid ;
+}
+
+
+.landing-page-header button{
+  background-color: var(--accent-primary);
+  border-radius: 10px;
+  padding: 10px;
+  width: 30vw;
+}
+
+.landing-page-header{
+  padding-top: 200px !important;
+}
+
+.header-button-row{
+  min-height: 450px;
+}
+
+
+/* .header-button-row .h5 {
+
+} */
+
+#landing-page-header-2{
+  margin-top: 5rem;
+  background-image: url("https://static.igem.wiki/teams/5247/landing-page/lp-1new-lung-two.svg") !important;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  padding: 0 !important;
+}
+
+.button-x{
+ 
+  align-items: center;
+  display: flex;
+  align-self: center;
+}
+
+.button-x button{
+  margin: auto;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: var(--text-primary);
+  color: var(--ourbeige)
+}
\ No newline at end of file

src/App/LoadingScreen.css

+#LoadingScreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #b5ade6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    animation: fadeInOut 5s forwards;
+}
+
+.custom-animation {
+    width: 150px; 
+    height: 150px; 
+    animation: pulse 2s infinite; /* Apply the pulsing animation */
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+}
+
+@keyframes fadeInOut {
+        0% {
+            opacity: 1;
+        }
+        80% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+
+    }
\ No newline at end of file

src/App/Timelines.css

+/* * * * * * * * * * * */
+/* Horizontal Timeline */
+/* * * * * * * * * * * */
+
+/* This is the timeline container */
+.timeline {
+  white-space: nowrap;
+  min-height: 700px;
+  width: 75vw; 
+  overflow-x: auto !important;
+  max-width: inherit !important;
+  overflow-y: hidden !important;
+  width: 100%;
+  background-color: inherit; 
+  /* align items center */
+  align-items: center !important;
+  /* row */
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-.5 * var(--bs-gutter-x));
+  margin-left: calc(-.5 * var(--bs-gutter-x));
+}
+/* This is the timeline list container */
+.timelineol {
+  font-size: 0;
+  width: 100vw;
+  padding: 250px 0;
+  transition: all 1s;
+}
+
+/* Positioning of the upper timeline cards */
+.timeline ol li:nth-child(2n+1) .time-meta::before{
+  top: 100%;
+  left: 8px !important;
+  border-color: white transparent transparent transparent !important;
+}
+.timeline ol li:nth-child(2n+1) .moretop{
+  top: -40px !important;   
+}
+.timeline ol li:nth-child(odd) .timeline-item {
+  top: -16px;
+  transform: translateY(-100%);
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+}
+
+
+/* Positioning for the lower timeline cards */
+.timeline ol li:nth-child(2n) .time-meta::before{
+top: 100%;
+left: 8px !important;
+border-color:  transparent transparent transparent white !important;
+}
+.timeline ol li:nth-child(2n) .moretop{
+top: 50px !important;   
+}
+.timeline ol li:nth-child(even) .timeline-item {
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  top: calc(100% + 16px);
+}
+  
+
+/* The DNA Strang of the timeline */
+.timelineolli {
+position: relative;
+display: inline-block;
+list-style-type: none;
+width: 250px;
+height: 20px;
+background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg"); 
+background-size: 100% 120%;
+}
+
+/* Timeline Pointers outline and form */
+.timeline ol li .timeline-item::before {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-style: solid;  
+}
+.timeline ol li:nth-child(odd) .timeline-item::before {
+top: 100%;
+border-width: 20px 8px 0 0;
+border-color: var(--ourbeige)  transparent transparent transparent;
+}
+.timeline ol li:nth-child(even) .timeline-item::before {
+top: -20px;
+border-width: 20px 0 0 8px;
+border-color: transparent transparent transparent white;
+}
+
+/* To extend the line at the end */
+.timelineolli:last-child{
+background-size: 65% 120%;
+}
+.timeline ol li:last-child {
+  width: 300px;
+}
+
+/* For the points */
+.timeline ol li:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: calc(98%);
+  bottom: 0;
+  z-index: 4;
+  width: 40px;
+  height: 40px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background: var(--text-primary);
+}
+
+/* Card layout */
+
+.timeline ol li .timeline-item {
+  height: 250px;
+  min-height: 310%;
+  position: absolute;
+  left: calc(100% + 7px);
+  width: 350px;
+  padding: 15px;
+  font-size: 0.9rem;
+  white-space: normal;
+  color: var(--offblack);
+  background: white; /* Soll white bleiben! */
+}
+
+/* Layout for meta timeline cards */
+.time-meta{
+  border-radius: 10px;
+}
+
+/* Tags */
+.t-tag{
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  color: var(--ourbeige);
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  padding: 5px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  width: fit-content !important;
+}
+
+button.tabbutton.Patient.active, button.tabbutton.All.active, 
+button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
+button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
+  border-color: var(--offblack);
+}
+
+
+/* and buttons */
+button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
+  background-color: white; /* soll whit ebleiben! */
+}
+
+.Patient, button.tabbutton:nth-child(2), .button.tabbutton:nth-child(7), .skin{
+  background-color: var(--accen-secondary) !important;
+}
+
+.Medical, button.tabbutton:nth-child(3), .button.tabbutton:nth-child(8), .mucosa{
+  background-color: var(--accent-primary);
+}
+
+.Academia, .Research, button.tabbutton:nth-child(4), button.tabbutton:nth-child(9){
+  background-color: var(--lightblue);
+}
+
+.Industry, button.tabbutton:nth-child(5){
+  background-color: var(--mediumpurple);
+}
+.Activist, .Milestone{
+  background-color: var(--igemmediumgreen) !important;
+}
+
+.Education, .Outreach{
+  background-color: var(--igemlightgreen);
+}
+
+.Other{
+  background-color: var(--offblack); 
+}
+
+
+/* * * * * * * */
+/* TIMELINE BFH*/
+/* * * * * * * */
+
+/* Container */
+.timeline-container {
+  display: flex;
+
+  flex-direction: column;
+  position: relative;
+  margin: 40px 0;
+}
+/* Line */
+.timeline-container::after {
+  background-color: var(--text-primary);
+  position: absolute;
+  left: calc(50% - 2px);
+  content: "";
+  width: 4px;
+  height: 100%;
+  z-index: 0;
+} 
+
+/* Cards */
+.timeline-item {
+  min-width: 100px;
+ /*  display: flex; */
+  justify-content: flex-end;
+  padding-right: 30px;
+  position: relative;
+  margin: 10px 0;
+  width: 50%;
+}
+.timeline-item-content {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background-color: white; /* Soll white bleiben! */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 15px;
+  position: relative;
+  text-align: right;
+}
+/* Accomodate for alteration in card design */
+.timeline-item:nth-child(odd) .timeline-item-content {
+  text-align: left;
+  align-items: flex-start;
+}
+
+/* Tags */
+.timeline-item-content .tag {
+  color: var(--ourbeige);
+  font-size: 12px;
+  font-weight: bold;
+  top: 5px;
+  left: 5px;
+  letter-spacing: 1px;
+  padding: 5px;
+  margin-top: 5px;
+  margin-left: 5px;
+  position: absolute;
+  text-transform: uppercase;
+}
+  .timeline-item:nth-child(odd) .timeline-item-content .tag {
+  left: auto;
+  right: 5px;
+  margin-right: 5px;
+}  
+/* Title design */  
+.timeline-item-content time {
+  color: var(--offblack);
+  font-size: 16px;
+  font-weight: bold;
+}
+
+/* To create alternation */
+.timeline-item:nth-child(odd) {
+  align-self: flex-end;
+  justify-content: flex-start;
+  padding-left: 30px;
+  padding-right: 0;
+}
+
+/* To create bigger first and final cards */
+.timeline-end{
+box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+border-radius: 5px;
+background-color: white; /* soll white bleiben */ 
+padding: 15px;
+position: relative;
+text-align: center;
+z-index: 1;
+margin-top: 8vw;
+}
+.timeline-begin{
+box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+border-radius: 5px;
+background-color: white; /* soll white bleiben */
+padding: 15px;
+position: relative;
+text-align: center;
+z-index: 1;
+margin-bottom: 8vw;
+}
+
+/* Make short description on card bigger */
+.timeline-item-content span{
+  font-size: 18px;
+}
+/* Make links on Cards fat */
+.timeline-item-content a {
+  font-weight: bold;
+}
+
+/* Circle */
+.timeline-item-content .circle {
+background-color: var(--ourbeige) !important;
+border: 3px solid var(--text-primary);
+border-radius: 50%;
+position: absolute;
+top: calc(50% - 10px);
+right: -54px !important;
+width: 20px;
+height: 20px;
+z-index: 100;
+} 
+.timeline-item:nth-child(odd) .timeline-item-content .circle {
+  right: auto;
+  left: -53px;
+}
+
+
+
+
+
+
+
+
+
+*/
+.hpbuttonrow {
+  display: flex; /* Flex-Layout für die untere Reihe */
+  margin-top: auto; /* Schiebt diese Reihe nach unten */
+  align-items: center; /* Vertikale Zentrierung */
+}
+
+.fillup {
+flex: 1;
+display: flex; /* Flex-Layout aktivieren */
+align-items: center; /* Vertikale Zentrierung */
+justify-content: center; /* Horizontale Zentrierung */
+}
+
+.timeline-item .row:first-child {
+  flex: 1; /* Füllt den verbleibenden Raum aus */
+  display: flex; /* Flex-Layout aktivieren */
+  align-items: center; /* Vertikale Zentrierung */
+}
+
+/* Untere Reihe */
+.timeline-item .row:last-child {
+  margin-top: auto; /* Schiebt die letzte Reihe nach unten */
+}
+
+
+
+
+.fillup-wrapper{
+display: flex;
+}
+
+
+.timeline-item figcaption{
+  background-color: var(--ourbeige)  !important;
+}
+
+
+.timeline-item figcaption, .timeline-item figure, .timeline-item figcaption h3 {
+  background-color: white !important;
+}
+
+
+
+.timeline-item .img-cube{
+  height: 120px;
+  max-height: 13vh;
+  object-fit: cover !important;
+
+}
\ No newline at end of file

src/App/calendar.css

+
+.month {
+    padding: 70px 25px;
+    width: 100%;
+    margin-top: 40px;
+    background: var(--mediumpurple);
+    text-align: center;
+    border-radius: 10px;
+  }
+
+.cal-entry{
+  border-color: var(--text-primary);
+  border-radius: 10px;
+  border-width: 2px;
+  border-style: dotted; 
+}
+
+.entry-body{
+  padding: 2vw 4vw;
+  
+}
+ 
+.entry-header{
+  background-color: var(--darkerbeige);
+  padding: 15px;
+  border-bottom-color: var(--text-primary);
+  border-bottom-width: 1px;
+  border-bottom-style: solid; 
+}
+  
+  .month ul {
+    margin: 0;
+    padding: 0;
+  }
+  
+  .month ul li {
+    color: var(--ourbeige) !important;
+    font-size: 20px;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    list-style: none;
+  }
+  
+  .prev a, .next a{
+    color: var(--ourbeige) !important;
+  }
+  .month .prev {
+    float: left;
+    padding-top: 10px;
+  }
+  
+  .month .next {
+    float: right;
+    padding-top: 10px;
+  }
+  
+  .weekdays {
+    border-radius: 10px;
+    margin: 0;
+    padding: 10px 0;
+    background-color: #ddd;
+  }
+  
+  .weekdays li {
+    display: inline-block;
+    width: 13.6%;
+    color: #666;
+    text-align: center;
+  }
+  
+  .days {
+    border-radius: 10px;
+    padding: 10px 0;
+    background: #eee;
+    margin: 0;
+  }
+  
+  .days li {
+    list-style-type: none;
+    display: inline-block;
+    width: 13.6%;
+    text-align: center;
+    margin-bottom: 5px;
+    font-size:12px;
+    color: #777;
+  }
+  
+  .days li .active {
+    padding: 5px;
+    background: #1abc9c;
+    color: var(--ourbeige) !important
+  }
+  
+  /* Add media queries for smaller screens */
+  @media screen and (max-width:720px) {
+    .weekdays li, .days li {width: 13.1%;}
+  }
+  
+  @media screen and (max-width: 420px) {
+    .weekdays li, .days li {width: 12.5%;}
+    .days li .active {padding: 2px;}
+  }
+  
+  @media screen and (max-width: 290px) {
+    .weekdays li, .days li {width: 12.2%;}
+  }
\ No newline at end of file

src/App/mediarules.css

+/* * * * * * * */
+/* MEDIA RULES */
+/* * * * * * * */
+
+/*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){
+    .two-pdf-line{ 
+        max-height: 650px !important;
+        height: 26vh !important;
+        max-width: 50vw !important;
+      }
+      .seperator-2{
+        width: 1px !important;
+      }
+      .boxy-1{
+        margin-top: 10px !important;
+      }
+      .navbar {
+        flex-direction: column;
+        align-items: center;
+      }
+      
+    
+      .col-6 {
+        width: 100%; /* Full width on tablets */
+      }
+      .progress-bar{
+        display: none !important;
+      }
+    
+}
+/*For Smartphones*/
+/*12pro*/
+@media screen and (max-width: 600px){
+    .lnp:hover > img{
+        display: block;
+        margin-left: none;
+        margin-right: none;
+        width: 8rem !important;
+        max-width: 100% !important;
+      }
+      .col-6 {
+        width: 100% ; 
+      }
+      .container-fluid {
+        min-height: 100vh; 
+      }
+      /***heading***/
+      .header-title{
+        min-height: 400px;
+        text-align: center;
+        align-items: center;
+        margin: auto !important;
+        padding: 0 30px;
+        font-size: 130px;
+        font-weight: 900;
+        line-height: 130px;
+      }
+      .header-container{
+        padding-top: 170px !important;
+        padding-bottom: 0px !important;
+        background-color: var(--ourbeige);
+      }
+      .base {
+        width: 100%;
+        background-color: var(--lightblue);
+        padding: 0px;
+    }
+    
+      /***footer***/
+      footer {
+          width: 100% !important; 
+          box-sizing: border-box !important; 
+          padding: 15px !important;       
+        
+      }
+      .col {
+        width: 100% !important; 
+        margin-bottom: 20px; 
+      }
+      .col-sm-4, .col-sm-8, .col-6 {
+        width: 100%; 
+      }
+      footer a, footer p {
+        font-size: 14px; 
+        line-height: 1.4; 
+      }
+    
+      footer .socials {
+        display: flex;
+        justify-content: center !important;
+        margin-bottom: 10px;
+      }
+    
+      .contact-info {
+        font-size: 14px; 
+        text-align: center;
+
+      }
+    
+      .img-sponsor {
+        width: 100px; 
+        height: auto;
+        margin: 0 auto; 
+      }
+      .footer-slider {
+        width: 100%; 
+        margin-top: 20px;
+      }
+
+      footer a {
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+      }
+      hr {
+        margin: 20px 0; 
+      }
+
+    /***gif***/
+    .CFTR-gif  {
+      width: 1000px !important; 
+      max-width: 100%;
+      height: auto; 
+    }
+    /***home***/
+   #breatht  {
+    font-size: 1.5em !important; /* Adjust font size for smaller screens */
+    text-align: left; /* Optional: center text for mobile */
+  }
+   #breathf {
+    left: 48vw !important;
+    width: 65vw !important;
+
+  }
+  /*#breatht1 {
+    left: 0 !important;
+    position:initial!important;
+    font-size: 0.5em !important;
+
+  }*/ 
+  img[src*="200k-anim-transparent-bg.gif"] {
+    width: 100%;
+    height: auto;
+  }
+    /***Biosafty***/
+    #safehead {
+      background-size: contain; /* Adjust the image to fit within the container */
+      background-position: center 25%; /* Push the image down for better visibility */
+      height: 10px; /* Adjust the height for mobile screens */
+    }
+    /***contribution***/
+    .timeline-item{
+      padding-right: 0px !important;
+      padding-left: 5%;
+      width: 50% !important;
+      box-sizing: content-box;
+      text-align: left !important;
+
+    }
+    .timeline-item:nth-child(odd) {
+      align-self: flex-end !important;
+      justify-content: flex-start;
+      padding-left: 30px;
+      padding-right: 0;
+    }
+    figure.snipp1113{
+      min-width: 0px !important ;
+      max-width: 120px ;
+      width: 100% ;
+      margin-left: 80px;
+
+    }
+    .timeline-item-content{
+      text-align:initial !important;
+      align-items: flex-end ;
+      padding-left: 30px;
+      font-display: initial !important;
+      display: flex;
+      position: inherit;
+    }
+    .timeline-item-content .tag{
+      padding: 0px !important;
+
+    }
+    /***engineering***/
+    .col-2{
+      width: 50% !important;
+    }
+    /***Description***/
+    .pie-chart-container-small {
+        width: 300px !important; /* Make smaller for mobile */
+        height: 300px !important; /* Adjust height accordingly */
+      }  
+    .quiz-wrapper {
+        flex-direction: column;
+        padding: 10px;
+        width: 100% !important; /* Set width to 100% for mobile screens */
+      }
+    
+    .quiz-front, .quiz-back {
+        padding: 10px !important;
+      }
+    
+    .quiz-heading {
+        font-size: 1.2em;
+      }
+    
+    .quiz-text {
+        font-size: 1em;
+        margin-bottom: 10px !important;
+        word-wrap: break-word; /* Keep word breaking for mobile */
+      }
+    
+    .quiz-button-box {
+        margin-top: 5px !important;
+        justify-content: space-evenly;
+      }
+    
+
+    .row-if-small{
+        --bs-gutter-x: 1.5rem;
+        --bs-gutter-y: 0;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: calc(-1 * var(--bs-gutter-y));
+        margin-right: calc(-.5 * var(--bs-gutter-x));
+        margin-left: calc(-.5 * var(--bs-gutter-x));
+        width: 100% !important;
+    }
+    .col-4, .col-3{
+        margin-top: 10px !important;
+        margin-bottom: 10px !important;
+    }
+    .full-small{
+        width: 100% !important;
+        max-height: 100% !important;
+    }
+    .max400{
+        max-width: 100% !important;
+        max-height: 100% !important;
+    }
+    .panel-talk-gallery div img{
+        max-width: 100% !important;
+    }
+    .panel-talk-gallery .col, .panel-talk-gallery .col:nth-child(5), 
+    .panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(2), 
+    .panel-talk-gallery .col:nth-child(3), .panel-talk-gallery .col:nth-child(4){
+        margin-top: 20px !important;
+    }
+    .bfh-slider{
+        width: 100em !important;
+        max-width: 250px !important;
+    } 
+    
+    .tag{
+        width: min-content !important;
+    }
+    .timeline-item-content  time{
+        width: fit-content !important;
+        margin-top: 0 !important;
+        max-width: 10em !important;
+    }
+    .picture-frame{
+        margin-bottom: 20px !important;
+    }
+    .winner{
+        font-size: x-large;
+    }
+    .small-only{
+        display: block !important;
+    }
+    .small-none{
+        display: none !important;
+    }
+    .bfh-menu{
+        max-width: 50vw !important;
+    }
+    .two-pdf-line{ 
+        max-height: 650px !important;
+        height: 26vh !important;
+        width: 65vw !important;
+        max-width: 60vw !important;
+        margin: auto;
+      }
+svg text{
+    font-size: 5vw !important;
+    stroke-width:1px !important;
+}
+.village-style-button h3{
+    display: none !important;
+}
+.village-style-button{
+    box-shadow: 1px 1px 1px gray;
+    border-radius: 10px;
+    border-color: var(--offblack);
+    padding: 10px; 
+
+}
+.village-style-button:hover{
+    box-shadow: none;
+}
+.village-style-button img{
+    max-width: 90%;
+    max-height: 90%;
+    padding-top: 10px;
+    padding-bottom: 5px;
+}
+.bigtitle {
+    width: 450px !important;
+    height: 200px !important;
+    word-wrap: break-word; 
+}
+
+.framecycletab{
+  margin-left: 0 !important; 
+}
+
+body {
+/*     padding: 10px !important; */
+    width: 202% !important;
+    overflow-x: hidden ; /* Prevents horizontal scrolling */
+    margin: 0;
+    padding: 0;
+    background-size: cover !important; /* Ensures the background scales to cover the entire screen */
+    background-position: center !important; /* Keeps the background centered */
+    background-repeat: no-repeat;
+}
+
+
+.img-half{
+    max-width: 100% !important;
+    height: auto !important;
+}
+/*.container {
+    padding: 10px;
+  }*/
+
+ .row{
+    display: grid !important;
+ }
+
+
+.full-col-phone{
+  width: 100vw !important;
+}
+}
+
+/*For small Smartphones (iphone 13 or similars)*/
+@media screen and (max-width: 400px){
+  .figure-wrapper:first-of-type img {
+    width: 100% !important;  /* Full width on small screens */
+    height: 10% !important;  /* Maintain aspect ratio */
+    max-width: 100% !important;  /* Limit the image width to fit the screen */
+    margin: 0 auto;  /* Center the image horizontally */
+    overflow: visible !important;
+  }
+
+  .figure-wrapper:first-of-type img{
+    text-align: center;  /* Ensure the figure caption is centered */
+  }
+
+    
+}
+/* Big computer screens */
+@media only screen and (min-width: 1600px){
+    .two-pdf-line{
+        max-height: 50vw !important;
+        height: 50vh !important;
+    }
+}
+/*Bigger than smartphones*/
+@media only screen and (min-width: 768px) {
+.col-1 {width: 8.33%;}
+.col-2 {width: 16.66%;}
+.col-3 {width: 25%;}
+.col-4 {width: 33.33%;}
+.col-5 {width: 41.66%;}
+.col-6 {width: 50%;}
+.col-7 {width: 58.33%;}
+.col-8 {width: 66.66%;}
+.col-9 {width: 75%;}
+.col-10 {width: 83.33%;}
+.col-11 {width: 91.66%;}
+.col-12 {width: 100%;}
+
+
+}
+
+/***description***/
+.pie-chart-container {
+  width: 600px;  /* Set the width of the container */
+  height: 600px; /* Set the height of the container */
+  position: relative;
+  margin: 0 auto; /* Center the chart */
+}
+
+@media screen and (max-width: 1300px){
+    .one-pdf-line{
+        height: 115vw !important;
+      }
+}
\ No newline at end of file

src/Ideas.sx

+<div className="gall">
+      <img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain"/>
+      <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers"/>
+      <img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees"/>
+      <img src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky"/>
+      <img src="https://picsum.photos/id/110/300/300" alt="a cool landscape"/>
+      <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings"/>
+      <img src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain"/>
+      <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings"/>
+</div>
+
+
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<a href="https://www.flaticon.com/free-icons/download" title="download icons">Download icons created by Kiranshastry - Flaticon</a>
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+
+componentDidMount() {
+    const script = document.createElement("script");    script.async = true;    script.src = "https://some-scripturl.js";    this.div.appendChild(script);  }
+  render() {
+    return (
+      <div className="App" ref={el => (this.div = el)}>        <h1>Hello react</h1>
+        {/* Scr
+
+
+
+
+<div style="min-height:374px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/llngz/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/llngz/full.png" alt="" /></noscript></div>
+
+

src/components/AOSs.tsx

+
+import { useEffect } from "react";
+import AOS from "aos";
+
+
+export function AOStry(){
+    useEffect(() => {
+        AOS.init({
+          disable: "phone",
+          duration: 700,
+          easing: "ease-out-cubic",
+        }); 
+      }, []);
+    return(
+        <h1 data-aos="zoom-y-out">Sample heading</h1>
+    )
+}
+

src/components/Code.tsx

+export function Code({children}:{children: React.ReactNode} ){
+
+    return(
+        <div className="codesnippet">
+            <code>
+                {children}
+            </code>
+        </div>
+    )
+}
\ No newline at end of file