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 */
main{min-height: 90vh; padding-top: 0.7em; position: relative;}

h1{font-size: 1.75rem; line-height: 1.6; text-align: center; padding: 0 0.5rem;}

h1+p{font-size: 1rem; line-height: 1.6; text-align: center; padding: 0 0.5rem;}

@media (min-width: 900px) {
    h1{font-size: 2rem;}
}

/* TOOLS SECTION STYLING */
.gif-tools{list-style: none; margin: 3rem auto; width: 90%; display: grid; grid-template-columns: 1fr; gap: 1rem;}

@media (min-width: 500px) {
    .gif-tools {grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));}
}

.gif-tools li{border: 1px solid #7c7b7b; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.04); background: #dce3ff;}
/* .gif-tools li{border: 1px solid #1e1e1e; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.04); background: #dce3ff;} */

.gif-tools li:hover{border: 1px solid #1e1e1e; transform: translateY(-1px);}

.gif-tools li a{text-decoration: none; color: black; display: block; padding: 1rem;}

.gif-tools svg{width: 35px; height: 35px; fill: currentColor;}

.gif-tools h2{font-size: 1.3rem; line-height: 1.3; margin: 0.5rem 0;}

.gif-tools h2+p{font-size: 1rem; line-height: 1.5;}