html {font-size: 16px;}

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

a {cursor: pointer;}

/* HEADER STYLING  55555*/
header {background-color: #eef0f7; display: flex; justify-content: space-between; align-items: center; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; margin-bottom: 1.3rem; position: relative;}

header img {width: 13rem; height: auto; padding: 0.6em 0.8em 0.4em 0.5em;}

@media (min-width: 600px) {
    header img {width: 16rem;}
}

/* HEADER SVG */
#mobile-icon {width: 1.4rem; height: 1.4rem; cursor: pointer; margin-right: 1.3rem;}

/* NAVIGATION */
.nav {background-color: #111; position: absolute; top: 0; right: 0; z-index: 4; width: 55%; height: 0; overflow-y: auto; transition: height 0.5s ease;}

#mobile-icon:hover + .nav, .nav:hover {height: 100vh;}

.nav-menu {list-style: none; display: flex; flex-direction: column; text-align: left; margin-top: 1.5rem;}

.nav-menu li {border-radius: 0.5rem; padding: 0 0.2em;}

.nav-menu li a, button {text-decoration: none; display: block; border-radius: 0.5rem; font-size: 1.1rem; padding: 0.9rem 1rem; color: #e0e0e0;}

.nav-menu li button {background: none; border: none; cursor: pointer; width: 100%; text-align: left;}

#caret {width: 1rem; height: 1rem; fill: currentColor;}

.nav-menu li a:hover, .nav-menu li button:hover{background-color: #1e1e1e; color: #e0e0e0;}

.nav-dd {width: 95%; margin-left: auto; overflow-y: auto; height: 0;}

.nav-btn:hover + .nav-dd, .nav-dd:hover {height: auto;}

.nav-item-dd:hover .nav-btn, .nav-dd:hover + .nav-btn {background-color: #1e1e1e; color: #e0e0e0;}

@media (min-width: 800px) {
    #mobile-icon {width: 0; height: 0;}

    .nav {position: relative; width: auto; height: auto; transition: none; padding-top: 0; overflow: visible; background-color: transparent;}

    .nav-menu {flex-direction: row; align-items: center; margin-top: 0;}

    .nav-menu li a, button {color: black;}

    .nav-dd li a:hover {background-color: #ddd; color: black;}

    .nav-dd {position: absolute; top: 100%; right: 0; width: 55%; min-width: 240px; background-color:#f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); transition: height 0.3s ease;}

    .nav-btn:hover + .nav-dd, .nav-dd:hover {height: 80vh;}

    #mobile-icon:hover + .nav, .nav:hover {height: auto;}
}

/* FOOTER STYLING 55555*/
footer {background-color: #111827; padding: 1rem; display: flex; justify-content: space-between; flex-direction: column; align-items: center; margin-top: 1rem;}

footer img{width: 13rem; height: auto;}

footer nav{display: flex; align-items: center; gap: 0.1rem;}

footer nav a{text-decoration: none; color: #e0e0e0; padding: 0.5rem; border-radius: 0.5rem; font-size: 1rem;}

footer nav a:hover{background-color: #e0e0e0; color: #111827;}

@media (min-width: 800px) {
    footer{flex-direction: row;}
}

/* MAIN STYLING  55555*/
main{min-height: 90vh; padding-top: 0.7em; position: relative;}

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

h1 {margin-top: 0.3em; text-align: center; margin-bottom: 0.2em; font-size: 1.75rem; line-height: 1.25;
    /* margin-top: 0.6em; */
}

h1 + p {text-align: center; font-size: 1rem; margin: 0.2rem;}

.app img {width: 5em; height: auto; display: block; margin: auto; margin-top: 1.3em; margin-bottom: 1.3em;}

.gif-preview{width: 100%; margin: auto; display: grid; grid-auto-flow: column; grid-auto-columns: 65%; overflow-x: auto; gap: 0.5rem;}

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

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

form label {cursor: pointer; border: 4px solid #6378d9; border-radius: 0.8em; font-size: 1.3rem; padding: 0.2em 1em; font-weight: 500; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

form label:hover {background-color: #6378d9; color: white;}

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

.gif-display {width: 100%; margin: auto; background-color: #1d2b35; border-radius: 0.7em; display: flex; flex-direction: column; align-items: center; margin-bottom: 1em; margin-top: 1em; position: relative; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}

.gif-display > img {width: 90%; height: 20vh; object-fit: contain; border-radius: 0.5em; margin: 0.5em; border: 1px solid white; box-sizing: border-box;}

.gif-display > img:hover {border: 1px solid rgb(214, 211, 211);}

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

.close:hover{background-color: rgb(180, 44, 44);}

.gif-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;}

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

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

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

.gif-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;}

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

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

.progress-div-text{position: absolute; top: 15%;  left: 5%;  color: white; z-index: 2;}

.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);}

/* ADVANCED SETTING */
.advanced-setting {padding: 16px; background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 12px; width: 96%; max-width: 950px; margin: auto;}

.advanced-setting-option {display: flex; flex-direction: column; gap: 8px;}

.advanced-setting-option label {font-size: 0.9rem; font-weight: 600; color: #374151;}

.advanced-setting-option input[type="range"] {width: 100%; height: 8px; border-radius: 6px; background: #e5e7eb; outline: none; cursor: pointer;}

.advanced-setting-option input[type="range"]::-webkit-slider-runnable-track {height: 8px; border-radius: 6px; background: linear-gradient(to right, #bfdbfe, #93c5fd);}

.advanced-setting-option input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: #fff; border: 3px solid #60a5fa; margin-top: -5px; cursor: grab; transition: transform 0.15s ease;}

.advanced-setting-option input[type="range"]::-webkit-slider-thumb:active {transform: scale(1.2); cursor: grabbing;}

#rangeValue {font-size: 14px; font-weight: 500; color: #374151; text-align: right;}

@media (min-width: 768px) {
  .advanced-setting-option {flex-direction: row; align-items: center; gap: 16px;}
}

/* ARTICLE STYLING */
.article {margin: auto; width: 95%;}

.article section {margin-block: 1rem; padding: 0.5rem; border-radius: 0.5rem;}

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

.article p {font-size: 1.125rem; line-height: 1.7; margin-block-end: 1rem;}

section ol, section ul {width: 90%; margin: auto; margin-block: 1rem;}

section li {font-size: 1.125rem; line-height: 1.6; margin-block-end: 0.5rem;}

h2 {font-size: 1.5rem; line-height: 1.3; text-align: center; margin-block: 0.5rem 1.5rem;}

h3 {font-size: 1.25rem; line-height: 1.4; margin: 2rem 0 0.5rem 0;}

@media (min-width: 900px) {
    .article section {margin-block: 2rem;}

    h1{font-size: 2rem;}

    h2{font-size: 1.625rem;}

    h3{font-size: 1.375rem;}
}

.article section img {width: 18rem; height: auto; margin: 1rem auto; display: block; border: 3px solid grey; border-radius: 0.5rem;}

/* AD STYLING */
/* If ad does not load perfectly try adding height (ALSO 'width' if not already) to ad containers - display-ad-container, .side-rail-container */
/* Also add flex-shrink 0 inside ad-slot-2-div styling or else overflow will not work */

.display-ad-container{display: flex; justify-content: center; overflow: auto; margin: auto; margin-bottom: 0.5rem;
    width: 99%; /* important or else bigger ad size in small screens would make the screen to move sidewards to adjust the ad size */
    /* border: 1px solid red; */
}

.side-rail-container{display: none; justify-content: center; align-self: stretch;
    /* border: 1px solid red; */
}

.sticky-ad {position: sticky; top: 20px;}

/* ASSIGN GRID AREA  (follow the comments BELOW after you have added ads in site) */
header { grid-area: header; }
main   { grid-area: main; }
footer { grid-area: footer; }

/* .side-rail-container.left  { grid-area: left; }   Uncomment after adding ads*/
/* .side-rail-container.right { grid-area: right; }  Uncomment after adding ads */

/* .display-ad-container { grid-area: top; }   Uncomment after adding ads */

body {
    display: grid;
    /* grid-template-columns: 1fr; */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
    "header"
    /* "top"    Uncomment after adding ads */
    "main"
    "footer";
}

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

    body {
    grid-template-columns: 1fr minmax(0, 50%) 1fr;
    grid-template-areas:
      "header header header"
      /* "top top top"   Uncomment after adding ads */
      /* "main main right"   Uncomment after adding ads & remove below line*/
      "main main ."
      "footer footer footer";
    }
}

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

    body {
    grid-template-columns: 1fr minmax(0, 65%) 1fr;
    grid-template-areas:
      "header header header"
      /* "top top top"   Uncomment after adding ads */
      /* "left   main   right"    Uncomment after adding ads & remove below line*/
      ". main ."
      "footer footer footer";
    }
}