* {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  background-color: #eef0f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 7px, rgba(0, 0, 0, 0.25) 0px 3px 6px;
  margin-bottom: 1.3em;
}

.logo-text{
  text-decoration: none;
  font-size: 1.4rem;
  color: black;
  padding: 0.5em 1em;
}

.mobile-svg{
  display: none;
  margin-right: 1.5rem;
  width: 1.3rem;
}

.mobile-svg path {
  fill: black;
}

.header-nav ul li .drop-list{
  position: absolute;
  background: #242526;
  top: calc(130%);
  right: 0;
  width: 150px;
  width: 25vw;
  display: flex;
  flex-direction: column;
  border-radius: 0.3em;
  justify-content: flex-start;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  max-height: 70vh;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  background-color: #f9f9f9;
  z-index: 11;
}

.header-nav ul li .lang-button + .drop-list{
  width: 150px;
}

.header-nav ul li .lang-button + .drop-list li a{
  padding: 0.1em 0 0.1em 1em;
}

.header-nav ul li:hover ul{
  transition: all 0.3s ease;
  top: calc(100%);
  opacity: 1;
  visibility: visible;
}

.header-nav ul li .drop-list li {
  width: 100%;
  border-radius: 0.5em;
  padding: 0;
}
.header-nav ul li .drop-list li:hover a{
  background: #ddd;  
}
.header-nav ul li .drop-list li a{
  color: black;
  padding: 0 0 0 15px;
  display: block;
  padding: 0.3em 0 0.3em 1em;
}

.header-nav ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 0.3em;
}
.header-nav ul li{
  position: relative;
  padding: 0.5em 0em;  
}
.header-nav ul li > a, button {
  border: 3px solid transparent;
  padding: 1em;
  font-size: 1.1em;
  text-decoration: none;
  color: black;
  background: none;
  cursor: pointer;
  padding: 0.3em 0.6em;
  border-radius: 0.3em;
  margin: 0 0.1em;
}
.header-nav ul li > a:hover, button:hover {
  background: #3A3B3C;
  color: white;
  background-color: #6378d9;
}

.lang-button{
  border: 3px solid #6378d9;
  border-radius: 0.5em;
}
.lang-button:hover{
  /*background-color: #1cd283;*/
  background-color: #6378d9;
}

@media screen and (min-width: 1024px){
  .header-nav ul li .drop-list{
      width: 20vw;
  }
}

@media screen and (max-width: 760px){
  .mobile-svg{
      display: block;
  }
  .mobile-svg:hover + .header-nav, .header-nav:hover{
      width: 250px;
  }

  .header-nav{
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 0;
      background-color: #111;
      z-index: 12;
      overflow-x: hidden;
      padding-top: 60px;
      transition: 0.5s;
  }

  .header-nav ul{
      flex-direction: column;
      align-items: flex-start;
  }

  .header-nav ul li > a, button {
      color: #818181;
      margin: 0;
      font-size: 1.3em;
      border: none;
      margin: 0;
      padding: 18px 8px 18px 22px;
      padding: 0 8px 0 22px;
  }
  .header-nav ul li > button {
      padding: 0px 8px 0 22px;
  }
  .header-nav ul li > a:hover, button:hover {
      background: none;
      color: white;
  }

  .lang-button{
      border: none;
  }
  .lang-button:hover{
      background: none;
  }

  .header-nav ul li .drop-list{
      z-index: 12;
      top: calc(70%);
      left: calc(10%);
      width: 190px;
      font-size: 0.8rem;
      border-radius: 0.4em;
      background: #242526;
      opacity: 0;
      visibility: hidden;
      overflow-y: auto;
      max-height: 70vh;
  }
  .header-nav ul li:hover .drop-list{
      top: calc(100%);
  }
  .header-nav ul li .drop-list li {
      border-radius: 0;
      padding: 0;
  }

  .header-nav ul li .drop-list li a{
      color: #818181;
      display: block;
      padding: 0.5em 0 0.5em 1em;
  }

  .header-nav ul li .lang-button + .drop-list li a{
      padding: 0.4em 0 0.4em 1em;
  }
  .header-nav ul li .drop-list li:hover a{
      background: #3A3B3C;
      color: white;
  }
}

#caret{
  width: 0.5rem;
  height: auto;
  fill: currentColor;
  margin-left: 0.05em;
}

/* Header Styling Finishes */

main {
  padding-top: 0.7em; 
}

.converter {
  border: 3px dashed black;
  border-radius: 1em;
  width: 96%;
  max-width: 950px;
  margin: auto;
  margin-bottom: 1em;
  padding: 0.4em;
  background-color: #dce3ff;
}

@media (min-width: 600px) {
  .converter {
      width: 80%; 
  } 
}

@media (min-width: 900px) {
  .converter {
      width: 65%; 
  } 
}

@media (min-width: 900px) {
  .converter-article {
      width: 65%;
      margin: auto; 
  } 
}

main nav ul {
  list-style: none;
  display: flex;
  justify-content: center; 
}
main nav ul li a {
  text-decoration: none;
  border: 2px solid black;
  border-radius: 0.5em;
  padding: 0 0.6rem;
  font-size: 1rem;
  color: black;
  font-weight: 700;
  background-color: #dce3ff; 
}
main nav ul a:hover {
  background-color: white;
  color: #6378d9; 
}

.active {
  background-color: white;
  color: #6378d9; 
}

main h1 {
  margin-top: 0.6em;
  text-align: center;
  margin-bottom: 0.2em;
}
main p {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 0.2em; 
}
main img {
  width: 6em;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 1.3em;
  margin-bottom: 1.3em;
}

.form {
  display: flex;
  justify-content: center;
  margin: 0.5em 0;
  flex-direction: column; 
  align-items: center;
}

.form label {
  cursor: pointer;
  border: 4px solid #5b6fc8;
  border-radius: 0.9em;
  font-size: 1.3rem;
  padding: 0.2em 1em;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 7px;
}
.form label:hover {
  background-color: #5b6fc8;
  color: white; 
}

.hidden-element{
  font-size: 0rem; 
  opacity: 0; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  height: 0; 
  line-height: 0;
}

.converter-preview{
  width: 100%;
  margin: auto;
  display: grid;
  grid-auto-flow: column;
 /* grid-auto-columns: 40, 75%;*/
  grid-auto-columns: 85%;
  overflow-x: auto;
  gap: 0.5rem;
}

@media (min-width: 500px) {
  .converter-preview{
      grid-auto-columns: 40%;
  }
}

@media (min-width: 700px) {
  .converter-preview{
      grid-auto-columns: 40%; 
  }
}

@media (min-width: 850px) {
  .converter-preview{
      grid-auto-columns: 40%; 
  }
}

@media (min-width: 900px) {
  .converter-preview{
      grid-auto-columns: 40%; 
  }
}

@media (min-width: 1000px) {
  .converter-preview{
      grid-auto-columns: 40%;
  }
}

@media (min-width: 1200px) {
  .converter-preview{
      grid-auto-columns: 40%; 
  }
}

/* Classes and IDs found in JS file */
.progress-div{
  width: 82%; 
  margin: auto; 
  position: relative;
  margin: 0.5em 1em;
}
.progress-div-text{
  position: absolute; 
  top: 15%; 
  left: 0%; 
  color: white;
  z-index: 2;
}

.img-display{
  all: revert;
  width: 100%;
  margin: auto;
  background-color: #1e2e39;
  border-radius: 0.7em;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1em;
  margin-top: 1em;
  position: relative;
  box-shadow: rgba(49, 51, 92, 0.20) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.img-display > img{
  all: revert;
  width: 90%;
  height: 20vh;
  object-fit: contain;
  border-radius: 0.51em;
  margin: 0.5em;
  border: 1px solid rgb(244, 236, 236);
  box-sizing: border-box;
}

/*.img-display > video{
  all: revert;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid white;
  border-radius: 0.5em;
  z-index: 3;
}*/

.img-display > img:hover{
  border: 1px solid rgb(191, 183, 183);
}

.img-display > a{
  border: 1px solid white;
  color: white;
  width: 82%;
  margin: auto;
  text-align: center;
  text-decoration: none;
  margin: 0.5em 1em;
  border-radius: 0.2em;
  background-color: white;
  color: #1d2b35;
  font-size: 1.2rem;
}

.img-display > a:hover{
  background-color: #dddee1;
}

.img-display p{
  color: white;
  align-self: flex-start;
  margin-left: 10%;   
}

.close{
  color: white;
  font-size: 0.9rem;
  background-color: rgb(255,0,0);
  padding: 0.2em 0.5em;
  border-radius: 0.6em;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  z-index: 10;
}

.close:hover{
  background-color: rgb(217, 60, 60);
}

.img-name{
  color: white;
  align-self: flex-start;
  align-items: start;
  margin-left: 10%;
  font-size: 0.96rem; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  width: 85%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.img-size{
  font-size: 1.2rem;
  
  text-overflow: ellipsis; 
  overflow: hidden; 
  width: 85%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;        
}

.img-size span{
  background-color: #17b06e; 
  border-radius: 0.2em; 
  padding: 0 0.3em;
  color: white;
}

.strike-through{
  text-decoration: line-through;
  margin-right: 0.2em;
  color: gray;
}

.progress-div{
  width: 82%; 
  margin: auto; 
  position: relative;
  margin: 0.5em 1em; 
}

.progress-bar-new-indeterminate {
  height: 4px;
  background-color: rgba(5, 114, 206, 0.2);
  width: 100%;
  overflow: hidden;
  width: 100%;
  height: 26px;
  border: 1px solid white;
  border-radius: 0.2em;
  margin: auto;
}

.progress-bar-value-new-indeterminate {
  width: 100%;
  height: 100%;
  background-color: #17b06e;
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
  0% {
    transform:  translateX(0) scaleX(0);
  }
  40% {
    transform:  translateX(0) scaleX(0.4);
  }
  100% {
    transform:  translateX(100%) scaleX(0.5);
  }
}

.solid-border{
  border: 3px solid rgb(30, 29, 29);
}

.download-btn {
  text-decoration: none;
  list-style: none;
  color: white;
  cursor: pointer; 
}

#output-image{
  width: 90%;
  height: 25vh;
  margin: 0.5rem 0;
}

/* Styling For Artcile */
article section {
  max-width: 900px;
  margin: auto; 
}

article section img {
  /*width: 14em;*/
  height: auto;
  border: 3px solid grey;
  border-radius: 0.3em; 
  width: 25rem;
}
article section h2 {
  text-align: center;
  margin: 0.5em 0.5em 0 0.5em;
  padding-top: 0.5em;
  font-size: 1.8rem; 
}
/*article section h3 {
  text-align: center;
  font-size: 1.45rem;
  margin: 0.5em;
  margin-bottom: 0; 
}*/
article section h3 {
  text-align: start;
  font-size: 1.3rem;
  padding: 1em 0 0 0.5em;
  margin: 0.5em;
  margin-bottom: 0; 
}

article section h3 + p{
  font-size: 1.1em;
}
article section h3 + p + ol{
  font-size: 1.1em;
}
  

article section ol, article section ul{
  padding: 0.8em 1em 0.8em 3em;
  font-size: 1.2rem;
  line-height: 1;
}
article section li{
  line-height: 1.7;
}

article section p {
  text-align: start;
  padding: 1em;
  padding-bottom: 0.55em;
  font-size: 1.3rem;
  line-height: 1.7;
  margin: auto; 
}
article section p a {
  text-decoration: none;
  color: #bb4a03; 
}

section:nth-child(even) {
  background: #f8f8f8; 
}

.ol-detailed{
  all: unset;
  list-style-type: none;
  padding-left: 0;
}

.ol-detailed h3{
  text-align: center;
  font-size: 1.45rem;
  margin: 0.2em 0.2em 0 0.2em;   
}

/* STYLING for Footer */
footer {
  text-align: center;
  margin-top: 0.3em;
  background: #1d2b35; 
}
.footer-nav{
  padding-bottom: 0.5em; 
}

.footer-links{
  padding: 0 1em;
  color: white;
  text-decoration: none;
}
.footer-links:hover{
  color: rgb(220, 213, 213);
}

.footer-logo{
  color: white;
  text-decoration: none;
  font-size: 1.4rem;
  margin: 0.5em 1em;
  display: inline-block;
}

/* Styling for ADS */
.display-ad-container{    
  width: 90%;
  height: 281px;
  margin: auto;
  margin-bottom: 0.4rem;
  margin-top: 2rem;

  display: flex;
  justify-content: center;
  background-color: #eef0f7;
  overflow: auto;
  /*overflow: auto; - This will not allow the leaderboard ad 728x90 to stick */
}

main{
  position: relative;    
}

.side-rail-container{
  position: absolute;
  height: 99%;
  width: 17%;
  top: 0.8rem;
  left: 0.1rem;

  display: none;
  justify-content: center;
  background-color: #eef0f7;
}
.side-rail-container-right{
  left: auto;
  right: 0.1rem;
}

.sticky-sidebar-ad{
  position: sticky;
  top: 1rem;
  max-height: 620px;
}

@media (min-width: 900px) {
  .side-rail-container {
      display: flex;
  }

  .display-ad-container {
      width: 65%; 
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  background-color: black;
  color: white;
}

.footer-svg{
  width: 1.5rem;
  margin-top: 0.5rem;
  transition: transform 0.3s ease;
}
.footer-svg:hover {
  transform: scale(1.2);
}

.footer-svg path{
  fill: white;
}