/* Global Styling
    */
html {
  /* To add padding for sticky navbar when jumping to content */
  scroll-padding-top: 50px;
}

body {
    /**/
    background: linear-gradient(20deg,  #fff6f6 0%,  #fff8ed 51%,  #f5f2db 85%);
    font-family: "Rubik" ,Arial, Helvetica, sans-serif;
}

/* NAVBAR Styling
    Styling related to the navigation bar
    */
.topnav {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: Black;
}

/* Navbar Link Formatting */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Hover Formatting  */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Active Formatting */
.topnav a:active {
  background-color: Yellow;
  color: Black;
}

/* Active Hover Formatting */
.topnav a.active:hover {
  background-color: #ffbb00;
  color: Black;
  font-weight: bold;
}

/* Hide icon when not necessary */
.topnav .nav_icon {
  display: none;
}

/* 
  Progress Container
*/
.progress-container {
  width: 100%;
  height: 3px;
  background: #ccc;
}

/* 
  Progress Bar
*/
.progress-bar {
  height: 3px;
  background: #ffde25dc;
  width: 0%;
}

/* Navbar media queries */
/* When screen is less than 1050px */
/* Hide all buttons except Home */
@media screen and (max-width: 1050px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.nav_icon {
    float: right;
    display: block;
  }
  .topnav.responsive {
    position: sticky;
  }
  .topnav.responsive a.nav_icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* When screen width is greater than 1051px */
@media screen and (min-width: 1051px){
  .language {
    float:left;
    padding-left: 20px;
    padding-right: 20px;
    width: 33%;
  }
}

/* Progress Bar */
.progress {
  background: rgba(0, 0, 0, 0.144);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 20px;
}

.progress-70 {
  animation: load_70 3s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #000000;
  height: 20px;
  width: 0;
}

.progress-80 {
  animation: load_80 3s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #000000;
  height: 20px;
  width: 0;
}

.progress-full {
  animation: load_full 3s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #000000;
  height: 20px;
  width: 0;
}

@keyframes load_70 {
  0% { width: 0; }
  100% { width: 70%; }
}

@keyframes load_80 {
  0% { width: 0; }
  100% { width: 80%; }
}

@keyframes load_full {
  0% { width: 0; }
  100% { width: 100%; }
}

/* CONTENT STYLING
    Styling content on the page
    */
h1 {
  font-family: "Lato", system-ui;
  font-weight: 700;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  width: 100%;
  background-color: #000000;
  color: white;
}

h2 {
  font-family: "Lato", system-ui;
  font-size: 20px;
  
}

h3 {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-size: 15px;
}

h4 {
  font-family: "Noto Serif", serif;
  font-size: 12px;
}

p {
  font-family: "Rubik", sans-serif;
}

.details{
  padding: 20px;
}

/* Font Flags */
.noto-serif {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.rubik {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* List formatting
 */
 ul {

 }
 
 /* Button Styling */
 button {
  
 }

 /* Style the button that is used to open and close the collapsible content */
 .collapsible {
  padding: 0;
  width: 100%;
  background-color: #00000005;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:hover {
  background-color: #eeff0080;
}

.collapsible:active {
  background-color: #ffc4007c;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.clicked .collapsible:hover {
  background-color: #ffc4007c;
}

/* Style the expanded collapsible-content*/
.content-expand {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #fbff000c;
}