.bgcom{
    background-image: url(/images/bg.jpg);
    background-size: cover;
    width: 100%;
    height: 40vh;
}
.topbar{
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    height: 10vh
}
.gor{
    display: flex;
    flex-direction: row-reverse;
}
.mob{
    margin-right: 10px;
}
.menu{
    z-index: 2;
    border: 1.5px rgba(111, 0, 255, 0.548) solid;
    position:absolute;
    margin-top: 22px;
    right: 0px;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 174, 255, 0.568)
}
.menubar{
    width: 95vw;
    height: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    border-top: 1px rgba(0, 0, 0, 0.651) solid;
    border-bottom: 0px;
}
.topcon{
    padding: 2vh
}
.topcon:nth-child(1){
    padding-right: 0vh
}
.topcon:nth-child(2){
    padding-left: 0vh
}
/* .topconmob{
    padding: 2vh
} */
.logo{
    width: auto;
    height: 3.5rem;
    border-radius: 100px;
    background-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 10px 5px rgb(255, 238, 0);
    margin-left: 10px;
    user-select: none;
    animation: zoomin 2s ease-in-out linear;
}
.rotani{
    transition: transform 2s ease-in-out;
}
.rotani:hover{
    transform: rotate(360deg);
}
.centertxt{
    display: flex;
    justify-content: center;
    height: 100%;
    text-shadow: 0px 0px 10px rgb(53, 123, 253);
}
.gani{     /* front right */
    animation: g 2s;
}
@media (orientation:landscape){
    .bgcom{
        height: 100vh
    }
}
@media (max-width:767px) {
    .logo{
        height: 4rem;
    }
    .menulogo{
        height: 2.5rem;
        animation: zoominsmall 2s ease-in-out;
        z-index: 3;
    }
    .bgcom{
        height: 45vh;
    }
    .centertxt{
        padding-top: 13vh
    }
    .topcon{
        padding: 1vh
    }
    .pc{
        display: none;
    }
}
@media (min-width:768px) {
    .centertxt{
        padding-top: 35vh
    }
    .bgcom{
        height: 100vh
    }
    .mob{
        display: none;
    }
}
@keyframes g {
    0% {
        position:absolute;
        font-size: 2rem;
        opacity: 0;
    }
}
@keyframes zoomin {
    0% {
        opacity: 0;
        height: 3rem;
    }
}
@keyframes zoominsmall {
    0% {
        opacity: 0;
        height: 1.5rem;
    }
}
@keyframes rotate {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}