@charset "utf-8"
/*css document*/


body, html {
	height: 100%;
}

body {
	margin: 0;
}





/*   -----------    M E N Ü -----------   */





.menu {
    position: fixed;
    z-index: 3;
    left: 90px;
    top: 32px;
    visibility: visible;
}
#menu-btn1 {
    position: relative;
    background-color: var(--black);
    height: 3px;
    width: 35px;
    transition: 0s
}
#menu-btn2 {
    position: relative;
    top: 7px;
    background-color: var(--black);
    height: 3px;
    width: 18px;
    transition: 0s

}

.menu-back {
    position: fixed;
    z-index: 3;
    left: 90px;
    top: 27px;
    transform: translate(-10%) ;
    
    visibility: hidden;
}
.logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 26px;
    z-index: 1;
    transition: 0.3s
}
.logo svg path {
    fill: var(--black)
}
.insta-kicsi {
    position: absolute;
    left: 27.5vw;
    top: 25px;
    z-index: 1;
    transition: 0.3s;
    display: block;
}
.insta-kicsi svg {
    width: 32px;
    height: 32px;
}
.behance-kicsi {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 27.5vw;
    top: 24px;
    z-index: 1;
    transition: 0.3s;
    display: block;
}
.behance-kicsi svg {
    fill: var(--black)
}

.dark-mode-btn {
    position: absolute;
    width: 60px;
    height: 30px;
    right: 90px;
    top: 25px;
    z-index: 1;
    transition: 0.3s;
    cursor: grab;
}
.dark-mode-slide {
    transform: translate(63px);
    transition: transform 0.7s;
    transition-timing-function: ease-in-out;
}
#dark-mode-slide {
    transition: transform 0.7s;
    transition-timing-function: ease-in-out;
}
.hide {
    display: none
}
.show {
    display: block
}
.menu-background {
    position: fixed;
    z-index: 2;
    width: 180px;
    height: 75px;
    left: -50%;
    top: 0px;
    border-radius: 0 0 45px 0;
    background-color: var(--blur-menu);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px) ;
    transition: 0.2s
}


.toggler {
    position: fixed;
    z-index: 4;
    width: 314px;
    height: 75px;
    left: 0px;
    top: 0px;
    opacity: 0;
    cursor: pointer;
}


.menu-full {
    position: fixed;
    z-index: 2;
    width: 100%;
    text-align: center;
    visibility: hidden;
    top: auto;
    bottom: 0;
    border-radius: 45px 45px 0 0;
    background-color: var(--blur-menu); 
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);

}

.menu-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 1;
    visibility: hidden;
    top: 0;
}






a {
    text-decoration: none;
    color: inherit;
}






 
/*---     MENÜ GRID   RENDSZER   ---*/




.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    max-width: 880px;
    margin: auto;
    position: relative;
    padding: 2vw; 
    margin-bottom: 5px;
    bottom: 0;
}
.menu-box {
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
}
.menu-box-content {
    width: 100%;
    background: var(--white);
    color: var(--kek);
    border-radius: 30px;
    margin: 1.5vw;  
    padding: 4vh 0;
    transition-property: color, transform, background;
    transition-duration: 0.3s, 0.6s, 0.1s;
}
.menu-box-content:hover {
    color: var(--gray2);
    background: var(--gray3);
    transform: translateY(2%);
}
.menu-box-content2 /*active oldal*/ {
    width: 100%;
    background: var(--gray3);
    color: var(--gray2);
    border-radius: 30px;
    margin: 1.5vw;  
    padding: 4vh 0;
    transition-property: color, background;
    transition-duration: 0.3s, 0.1s
}











/*-----------SHOW MENU-------------*/


.toggler:checked ~ .menu-full {
    visibility: visible;
}
.toggler:checked ~ .menu {
    visibility: hidden;
}
.toggler:checked ~ .menu-back {
    visibility: visible;
}
.toggler:checked ~ .menu-overlay {
    visibility: visible;
}
.toggler:checked ~ #slide-menu {
    left: 0%;
}





/*----- MENU ANIMATION ------*/


.toggler:checked ~ .menu-full {
    animation-name: menu-animation;
    animation-duration: 0.5s;
    animation-timing-function: ease;
}
@keyframes menu-animation {
    from { 
        bottom: -100vh;
    }
    to {
        bottom: 0
    }
}

.toggler:checked ~ .menu-overlay {
    animation-name: menu-overlay;
    animation-duration: 3s;
    animation-timing-function: ease;
}
@keyframes menu-overlay {
    from { 
        opacity: 0;
    }
}

.toggler:checked ~ .menu-full #menu-box-1 {
    animation-name: slide-up-menu;
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
 }
.toggler:checked ~ .menu-full #menu-box-2 {
    animation-name: slide-up-menu;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
 }
.toggler:checked ~ .menu-full #menu-box-3 {
    animation-name: slide-up-menu;
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
 }
.toggler:checked ~ .menu-full #menu-box-4 {
    animation-name: slide-up-menu;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
 }
.toggler:checked ~ .menu-full #menu-box-5 {
    animation-name: slide-up-menu;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
 }
.toggler:checked ~ .menu-full #menu-box-6 {
    animation-name: slide-up-menu;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
 }
@keyframes slide-up-menu {
    from {
        transform: translateY(20%); opacity: 0;
    }
    to {
        transform: translateY(0%)
    }
}










/* 768 SCREEN - 768 SCREEN -768 SCREEN */

/*---------- 1000 PX SCREEN ----------*/


@media (max-width:1000px){    
 
    
    
    
    
    
/*-----MENU-----*/
    
    
    
.menu , .menu-back {
    left: 45px;
}

.insta-kicsi {      
    display: none;
}
.behance-kicsi {      
    display: none;
}
.dark-mode-btn {
    right: 40px;
}
.darkmode-section input {
    right: 0px;
} 
    
.menu-background {
    width: 120px;
    border-radius: 0 0 20px 0;
}
    

.menu-box-content, .menu-box-content2 {
    border-radius: 15px;
}
    
    
    
    
    
.toggler {
    width: 120px;
    }


.menu-full {
    border-radius: 20px 20px 0 0;
}

}






/*---------500px-------*/


@media (max-width: 500px) {
.menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
}
    
}