@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Roboto&display=swap');


*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

:root{
    font-family: Montserrat;
    font-weight: 700;
}
/*-------------HEADER-------------*/
nav{
    position: relative;
    display: flex;
    justify-content: space-between;
}


.logo{
    height: 38.8px;
    width: 48.8px;
    margin: 29px 0 0 22px;
}

.menu-desck{
    display: none;
}

.check{
    display: none;
}

.check-bg{
    width: 15pxs;
    margin: 47px 26px 0 0;
}

.checkburger:checked~.burger{
    display: none;
}

.checkburger:not(:checked)~.cross{
    display: none;
}

.checkburger:checked~.menu-burger{
    position: absolute;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #572EE5;
    opacity: 90%;
    width: 100vw;
    height: 484px;
    z-index: 1;
}

.checkburger:not(:checked)~.menu-burger{
    display:none
}

li{
    font-size: 15px;
    list-style-type: none;
    line-height: 60px;
    margin-top: 17px;
}
.line{
    display: block;
    height: 1px;
    width: 41px;
    background-color: #FFFFFF;
    opacity: 50%;
}

a{
    text-decoration: none;
    color: #FFFFFF;
    font-size: 15px;
}

.btndark{
    color: #FFFFFF;
    font-size: 15px;
}

/*-------------MAIN-------------*/
.sect-searcher{
    display: flex;
    flex-direction: column;
    align-items: center;

}

.div-title{
    font-size: 25px;
    width: 286px;
    margin-top: 7px;
    color: #572EE5;
    text-align: center;
}

.span-GIFOS{
    color: #50E3C2;
    font-size: 25px;
}

.img-main{
    width: 273px;
    margin-top: 31px;
}

.searcher{
    max-width: 551px;
    width: 80%;
    font-family: Roboto;
    font-size: 16px;
}

.searcher .searchInput{
    width: 100%;
    border-radius: 27px;
    border: solid #572EE5 1px;
    position: relative;   
}

.searchInput input{
    width: 75%;
    height: 50px;
    outline: none;
    border: none;
    border-radius: 27px;
    margin-left: 54px;
}

.searchInput .autocompletBox{
    padding: 0px;
    pointer-events: none;
    overflow-y: auto;
    opacity: 0;
}

.searchInput  .autocompletBox.active{
    padding: 10px 8px;
    opacity: 1;
    pointer-events: auto;
}

.iconSearch{
    position: absolute;
    top: 15px;
    right: 25px;
}

.iconSearch.active{
    position: absolute;
    top: 15px;
    left: 20px;
}

.iconDelete.active{
    display: block;
    position: absolute;
    top: 15px;
    right: 25px;
}

.iconDelete{
    display: none;
}

.autocompletBox .searchItem{
    list-style: none;
    margin-left: 54px;
    width: 85%;
    cursor: default;
    border-radius: 3px;
    display: none;
}

.iconSearchItem{
    margin: 0 1.5vw 0 -3vw;
}

.autocompletBox.active .searchItem{
    display: block;
}

.trending-h2{
    color: #572EE5;
    font-size: 16px;
    margin-top: 31px;
}

.trending-p{
    width: 225px;
    font-size: 14px;
    color: #572EE5;
    text-align: center;
    font-weight: 500;
}

.bar{
    background-color: #9CAFC3;
    width: 157px;
    height: 1px;
    margin-top: 157px;
}

.moreResults{
    display: none;
    width: 127px;
    height: 50px;
    margin: 78px 0px;
}

.moreResultsButtHover{
    display: none;
}

.moreResults:hover .moreResultsButt{
    display:none;
}

.moreResults:hover .moreResultsButtHover{
    display:block;
}

.noFav{
    display: none;
}

.gifSearchImg, .gifRend{
    width: 100%;
    height: 100%;
}

.gifosResults{
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-evenly;
}

.gifSearchCont{
    width: 156px;
    height: 120px;
    margin-top: 18px;
}

.button-gif.zoom{
    display: none;
}

.gifSearchHover{
    display: none;
}

.gifSearchCont.active{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gifSearchCont.active .gifSearchImg, .gif-container.active .gif-img{
    width: 318px;
    height: 245px;
}

.gifSearchCont.active .gifSearchHover, .gif-container.active .gif-hover{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

.gifSearchCont.active .button-gif, .gif-container.active .button-gif{
    background-color: #FFFFFF;
    border:none;
    position: absolute;
}

.gifSearchCont.active .button-gif.close, .gif-container.active .button-gif.close{
    top:10%;
    right:10%;
    height:14px;
}

.gifSearchCont.active .button-gif.fav, .gifSearchCont.active .button-gif.noFav, .gif-container.active .button-gif.fav, .gif-container.active .button-gif.noFav{
    top:72.5%;
    right:40%;
    height: 18px;
}

.gifSearchCont.active .button-gif.down, .gif-container.active .button-gif.down{
    top:72.5%;
    right:12%;
    height: 36px;
}

.gifSearchCont.active .gif-text, .gif-container.active .gif-text{
    position: absolute;
    display: flex;
    flex-direction: column;
    top:72.5%;
    left:7%;
}

.gifSearchCont.active .gif-text .text-user, .gif-container.active .gif-text .text-user{
    font-size: 15px;
    font-weight: 200;
    width: 50%;
}

.gifSearchCont.active .gif-text .text-name, .gif-container.active .gif-text .text-name{
    font-size: 16px;
    width: 50%;
}

/*-------------TRENDING-------------*/

.sect-trending-gif{
    background-color: #F3F5F8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*height: 430px;*/
}

.trend-h1{
    color: #572EE5;
    font-size: 25px;
    text-align: center;
}

.trend-p-mob{
    font-family: Roboto;
    font-size: 16px;
    text-align: center;
    font-weight: 400;
}
.trend-p-desk, .gif-hover{
    display: none;
}

.trend-galery{
    display: flex;
    justify-content: space-evenly;
}

.trend-gifos{
    display:flex;
    overflow-x: auto;
    max-height: 187px;
    margin: 32px 0 82px 0;
}

.gif-container{
    position: relative;
}

.gif-trending{
    margin-right: 22px;
    min-width: 243px;
    width: 243px;
    height: 187px;
}

.slider{
    display: none;
    border: none;
    background-color: #F3F5F8;
}

.slider-hover{
    display: none;
    border: none;
}

.slider-left .slider-right{
    display: none;
}


.gifSearchCont.active, .gif-container.active{
    display: flex;
    justify-content: center;
    position: fixed;
    background-color: #FFFFFF;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
    width: 100%;
    margin: 0;
}

.gif-container.active .gif-trending{
    height: 100%;
    width: 100%;
}

/*-------------FOOTER-------------*/
footer{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-title{
    font-family: Roboto;
    font-size: 15px;
    margin: 49px 0 24px 0;
    font-weight: 400;
}

.social-media{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 30%;
}

.rights{
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    margin: 47.8px 0 23px 0;
}

/*-------------FAVORITES-------------*/

.sect-favorite{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.favTitle{
    font-size: 20px;
    color: #572EE5;
}

.favImg{
    height: 28px;
}

.favorites.fav{
    display: none;
}

.favorites.noFav{
    display:inline-block;
}

.favNoCont{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.favNoContImg{
    width: 150px;
    margin-top: 30%;
}

.favNoContText{
    width: 431px;
    margin-top: 10%;
    margin-bottom: 30%;
    text-align: center;
    font-size: 22px;
    color: #50E3C2;
}

.gifFavorites.gifFavorites{
    margin-top: 10%;
    margin-bottom: 10%;
}

.gifGets{
    display: none;
}
/*-------------MY GIFS-------------*/

.sect-myGif{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.imgMyGif{
    margin-top: 10px;
    width: 24px;
}

.textMyGif{
    color: #572EE5;
    font-size: 20px;
}

.myGifNoCont{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 11%;
}

.myGifNoContImg{
    height: 150px;
}

.myGifNoContText{
    color:#50E3C2;
    font-size: 22px;
    margin: 2.9% 0 9.8%;
}

@media screen and (min-width:1024px) {

/*-------------HEADER DESCKTOP-------------*/

    .menu-burger{
        display:none
    }

    .check-bg{
        display: none;
    }

    .menu-desck{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-right: 50px;
        margin-top: 10px;
    }

    a{
        color: #572EE5;
        font-size: 13px;
        margin-right: 50px;
    }

    .itemActive{
        color:#9CAFC3;
        font-size: 13px;
        margin-right: 50px;
    }

    .itemDesck:hover {
        text-decoration: underline solid 3px #50E3C2;
    }

    .linkMake{
        color: transparent;
    }
    
    .makeAccessBtn{
        border: none;
        background-color: transparent;
    }

    .makeAcces{
        position: relative;
    }

    .makeActive, .makeHover{
        display: none;
    }

    .makeGifBtn{
        position:absolute;
        margin-top: -20px;
    }

    .makeAccess:not(:target) .makeActive{
        display: none;
    }


    .makeAccess:hover .makeGifBtn{
        display: none;
    }

    .makeAccess:hover .makeHover{
        display: block;
        position: absolute;
        margin-top: -20px;
    }

/*-------------MAIN DESKTOP-------------*/

    .div-title{
        font-size: 35px;
        width: 551px;
        margin-top: 76px;
    }
    
    .span-GIFOS{
        font-size: 35px;
    }
    
    .img-main{
        margin-top: 24px;
        width: 399px;
    }
    
    .searcher{
        max-width: 551px;
        width: 551px;
    }
    
    .searchInput input{
        width: 75%;
        height: 50px;
        outline: none;
        border: none;
        border-radius: 27px;
        margin-left: 54px;
    }

    .autocompletBox{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .searchItem{
        margin-left: 54px;
    }

    .trending-h2{
        font-size: 18px;
    }

    .trending-p{
        font-size: 16px;
        width: 402px;
    }

    .gifosResults{
        display: flex;
        width: 1160px;
        flex-wrap: wrap;
        margin: auto;
        justify-content: space-between;
    }
    
    .gifSearchCont {
        position: relative;
        width: 260px;
        height: 200px;
        margin: 15px 0px;
    }

    

    .gifSearchImg, .gifRend{
        width:100%;
        height:100%;
    }

    .gifSearchHover{
        position:absolute;
        display:block;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background-color:#572EE5;
        opacity:0;
    }

    .gifSearchCont:hover .gifSearchHover{
        opacity:0.7;
    }

    .button-gif.zoom{
        display:inline-block;
    }

    .gifSearchCont.active, .gif-container.active{
        display:flex;
        justify-content:center;
        align-items:center;
        position:fixed;
        background-color:#FFFFFF;
        left:0;
        right:0;
        top:0;
        bottom:0;
        height:100%;
        z-index:1;
        width:100%;
        margin:0;
    }

    .gifSearchCont.active  .gifSearchImg, .gif-container.active .gif-img{
        height:385px;
        width:auto;
    }

    .gifSearchCont.active .gifSearchHover, .gif-container.active .gif-hover{
        background-color:transparent;
        opacity:1;
    }

/*-------------TRENDING DESKTOP-------------*/
    .sect-trending-gif{
        height: 28vw;
        min-height: 550px;
    }

    .trend-h1{
        font-size: 25px;
        margin: 67px 0 12px 0;
    }

    .trend-p-mob{
        display: none;
    }

    .trend-p-desk{
        display: block;
        font-size: 18px;
        font-family: Roboto;
        font-weight: 400;
        text-align: center;
    }

    .trend-galery{
        align-items: center;
    }

    .gif-cont{
        width: 357px;
        height: 275px;
        margin: 53px 15px 182px 15px;
    }

    .trend-gifos{
        overflow-x: unset;
    }

    .gif-trending{
        width: 357px;
        height: 275px;
    }

    
    .gif-hover{
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #572EE5;
        opacity: 0;
    }

    .gif-hover:hover{
        opacity: 0.7;
    }

    .buttons{
        position: absolute;
        width: 135px;
        right: 0;
        top: 0;
    }

    .button-gif{
        border-radius: 6px;
        border: none;
        margin: 5% 1% 0 0;
        background-color: transparent;
    }

    .button-gif.close{
        display: none;
    }

    .gifSearchCont.active .button-gif.close, .gif-container.active .button-gif.close{
        position: absolute;
        top: 0;
        right: 5%;
        display:block;
        border: none;
        height: 15,2px;
    }

    .gifSearchCont.active .button-gif.zoom, .gif-container.active .button-gif.zoom{
        display: none;
    }

    .gifSearchCont.active .buttons, .gif-container.active .buttons{
        margin-top: 80vh;
        right: 5%;
    }

    .gifSearchCont.active .button-gif.fav{
        right: 35%;
    }

    .gif-text{
        color: #FFFFFF;
        font-family: Roboto;
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: 12%;
        left: 3%;
    }

    .gifSearchCont.active .gif-text, .gif-container.active .gif-text{
        color: black;
        opacity: 1;
    }

    .text-user{
        font-weight: 200;
    }

    .gifSearchCont.active .text-user, .gif-container.active .text-user{
        font-size: 15px;
    }

    .text-name{
        font-weight: 600;
    }

    .gifSearchCont.active .text-name, .gif-container.active .text-name{
        margin-top: 10px;
        font-size: 16px;
        font-weight: 800;
    }

    .slider-left .slider-right{
        display: flex;
        width: 40px;
        height: 40px;
    }

    .slider{
        display: block;
        margin-top: 10vw;
    }

    .slider-l{
        margin-left: 10vw;
    }

    .slider-r{
        margin-right: 10vw;
    }

    .slider-left:hover .slider-l{
        display: none;        
    }

    .slider-left:hover .slider-hover-l{
        display: block;
        margin-top: 10vw;
        margin-left: 10vw;        
    }

    .slider-right:hover .slider-r{
        display: none;        
    }

    .slider-right:hover .slider-hover-r{
        display: block;
        margin-top: 10vw;
        margin-right: 10vw;        
    }


/*-------------FOOTER DESKTOP-------------*/

    footer{
        flex-direction: row;
        justify-content: space-around;
    }

    .footer-title, .rights{
        font-size: 13px;
        margin: 49.5px 0 51.5px 0;
    }


    .social-media{
        margin: 49.5px 200px 51.5px 0px;
        justify-content: center;
        align-items: center;
        width: 100px;
    }

/*-------------FAVORITES DESCKTOP-------------*/

.favTitle{
    font-size: 25px;
}

.gifosResults.noFavorites{
    width: 100%;
    justify-content: center;
}

/*-------------MAKE DESCKTOP-------------*/

.makeGifSection{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mainMake{
    position: relative;
    display: flex;
}

.imagesCamara{
    position: absolute;
    align-self: center;
    left: -230px;
}

.mainLight{
    margin-bottom: 12px
}

.mainScreen{
    border: 1px solid #572EE5;
    height: 390px;
    width: 688px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video{
    display: none;
    width: 100%;
    height: 100%;
}

.mainTitle, .secondTitle{
    line-height: 30px;
    color:#572EE5;
    font-size: 25px;
    text-align: center;
}

.secondTitle, .secondText, .makeButtonRec, .makeButtonFinish, .makeButtonUpload, .videoContainer{
    display: none;
}

.spanMake-GIFOS{
    color: #50E3C2;
}

.videoContainer{
    position: relative;
    align-self: center;
    width: 480px;
    height: 360px;
}

.videoHover{
    position:absolute;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #572EE5;
    opacity: 0.7;
}

.imgHover{
    height: 22px;
}

.videoHoverText{
    color: #FFFFFF;
    margin-top: 10px;
}

.buttonsMyGif{
    position: absolute;
    display: flex;
    top: 8px;
    right: 8px;
}

.MyGifDown{
    margin-right: 8px;
}

.mainText, .secondText{
    font-family: Roboto;
    font-size: 16px;
    text-align: center;
}

.makeSteps{
    width: 100%;
    position: relative;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.stepsNumbers{
    width: 160px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.makeButton{
    font-size: 18px;
    border: 1px solid #572EE5;
    text-align: center;
    color: #572EE5;
    font-weight: bold;
    border-radius: 25px;
    width: 32px;
    height: 32px;
    transform: translate(-50%);
    background-color: transparent;
}

.stepsNumbers .makeButton.active{
    background-color: #572EE5;
    color: #FFFFFF;
}

.makeCounterBack{
    display: none;
    color: #572EE5;
    font-size: 15px;
    width: 150px;
    position: absolute;
    left: 65%;
}

.makeFilm{
    position: absolute;
    left: 80%;
}

.makeLine{
    background-color:#572EE5;
    height: 7px;
    width: 800px;
    border-radius: 30px;
    margin-top: 25px;
}

.makeButtonStar, .makeButtonRec, .makeButtonFinish, .makeButtonUpload{
    border: 1px solid #572EE5;
    color: #572EE5;
    font-family: 'Montserrat';
    font-weight: bold;
    border-radius: 25px;
    width: 127px;
    height: 50px;
    margin-top: 2%;
    background-color: transparent;
}

.makeButtonHvr:hover {
    color: #FFFFFF;
    background-color: #572EE5;
    border: 1px solid #FFFFFF;
}


}

/*-------------DARK MODE-------------*/
body.dark{
    background-color: #37383c;
}

body.dark main .sect-trending-gif{
    background-color: #222326;
}

body.dark main .sect-searcher .searcher .searchInput .inputSearch{
    background-color: #37383c;
}

body.dark a, body.dark .div-title, body.dark .trending-h2, body.dark .trending-p, body.dark main .sect-trending-gif .trend-h1, body.dark main .sect-trending-gif .trend-p-mob, body.dark main .sect-trending-gif .trend-p-desk, body.dark .footer-title, body.dark .rights, body.dark .textMyGif, body.dark .myGifNoContText, body.dark .mainScreen, body.dark .mainTitle, body.dark .makeButton, body.dark .makeButtonStar, body.dark .makeButtonRec, body.dark .makeButtonFinish, body.dark .makeButtonUpload{
    color: white;
}

body.dark .searchInput{
    border: #FFFFFF solid 1px;
}

body.dark .mainScreen, body.dark .makeButton, body.dark .makeButtonStar, body.dark .makeButtonRec, body.dark .makeButtonFinish, body.dark .makeButtonUpload{
    border: #FFFFFF solid 1px;
}

body.dark .makeLine{
    background-color: #FFFFFF;
}

body.dark .searchInput .inputSearch{
    color: #FFFFFF;
}

body.dark .autocompletBox{
    color: #FFFFFF;
}

body.dark .zoomGif.active{
    background-color: #000000;
}

body.dark .gif-container.active .gif-text, body.dark .gifSearchCont.active .gif-text{
    color: #FFFFFF;
}

body.dark .gif-container.active, body.dark .gifSearchCont.active{
    background-color: #37383c;
}

body.dark .checkburger:checked~.menu-burger{
    background-color: #000000;
}

body.dark .slider{
    background-color: #222326;
}