:root {

--colorA:   linear-gradient(45deg, #ffe14f, #ffdd31) ;
--colorB: #282828;
--colorC: #ffecb3;


--colorLin1: linear-gradient(176deg, #ffe14f, #d3cba2);
}



body {
    background: linear-gradient(45deg, #ffe14f, #ffdd31);
}



#Hloader {
    display: flex;
    position: fixed;
    background: #282828;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    justify-content: center;
    align-items: center;
}




.xleebly {

    font-family: 'Urbanist';
    background: var(--colorC);
    text-transform: lowercase;
    padding: 6.5px 16px;
    border: .2px solid #3333334d;
    color: #1e1900;
    border-radius: 5.8px;
    font-weight: 400;
    cursor: pointer;
}


.xleebly:hover, .xleebly:active {
animation:btnxleebly .2s forwards;
}


@keyframes btnxleebly {

0% {
opacity: .4;
transform: scale(.8);
}

100% {
opacity: 1;
transform: scale(1.1);
border: .2px dotted #000;

}

}



a {

text-decoration:none;
}

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

body  * {
box-sizing:border-box;

}

 


.hme {
    height: fit-content;
    display: flex;
    border-radius: 9px;
    border: .2px solid #a87c7c2b;
    justify-content: center;
    background: #282828;
    margin: 0 3vw;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.hmemenu {
   display: flex;
    width: 50px;
    height: 50px;
    border: .2px solid;
    gap: 5px;
    background: #ffde3a;
    padding: 5px;
    border-radius: 4px;
    flex-wrap: wrap;
    flex-direction: column;
    overflow: hidden;
}

span.blocx {
    width: 15px;
    height: 15px;
    background: #282828;
    display: block;
    border-radius: 3px;
}

.liab {
    display: block;
    position: absolute;
    top: 50%;
    background-image: url(/photon/design/vectorone.webp);
    background-size: 300px;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
 
}

.bombNote {
    margin: 8vh 2vw;
    border: .9px solid #232323;
    position: relative;
    border-radius: 10px;
    padding: 16px 3.9vw;
    z-index: -1;
    background: #ffecb36b;
}



.menuHoldr {
cursor: pointer;
}


.mopen, .mclose {
opacity: 0;
animation: gofoward .31s ease-in-out forwards;

}

.hedMenu {
    position: absolute;
    right: 4px;
    border-radius: 9px;
    box-shadow: 9px 9px #282828;
    top: 60px;
    background: #ffdf40;
    display: flex;
    width: 200px;
    border: 3px solid #282828;
   opacity: 0;
animation: gofoward .31s ease-in-out forwards;

}

@keyframes gofoward {

from {
opacity: 0;
filter: blur(5px); 
}

50% {
opacity: .6;
filter: blur(1.5px);
}

to {opacity: 1;
      filter: blur(0);
}
}


.lyneone {

    display: block;
    height: 60px;
    width: 5px;
    background: #333;
    transform: rotate(71deg);
    position: relative;
    left: 20px;
    border-radius: 0;
}


.lynetwo {

    display: block;
    height: 60px;
    width: 5px;
    background: #333;
    transform: rotate(2deg);
    position: relative;
    right: 5px;
    border-radius: 8px;

}

@media (min-width:700px) {

.hme {

    height: fit-content;
    justify-content: space-around;
    align-items: center;
}


.liab {
    top: 70%;

    transform: scale(1.2);
}

}

@media (max-width:700px) {

.hmemenu {
display:none !important;
}


.mopen, .mclose {
display:none;

}

}