@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.pixeled-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    letter-spacing: 5px;
}

a.menu-link {
    text-decoration: none;
    cursor: pointer;
    color: white;
}

.menu-bar-text {
    transform: translate(0%, -25%);
}

.nav-pane {
    display: block;
    overflow: hidden;
    /*background-color: coral;*/
    height: 100px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: fit-content;
}

.menu-bar-container {
    background-color: #000000; /* Example background color */
    color: #fff; /* Example text color */
    /*padding: 14px; /* Example padding */
    font-size: 16px; /* Example font size */
    text-align: left; /* Example text alignment */
    align-content: center;
    z-index: 1000;
    position: relative;
    min-height: 53px;
    max-height: 53px;
    padding-left: 20px;
    padding-right: 0px;
}

.menu-bar-container.pastel {
    background-color: #22c9fc; /* Example background color */
    color: #fff; /* Example text color */
}

.menu-bar-text {
    display: inline-block;
    font-size: 14px; /* Example font size for the text within the menu bar */
}

.two-cols-grid {
    display: grid;
    position: relative;
    column-gap: 5px;
    grid-template-columns: 3fr 1fr;
    justify-items: stretch;
    /*background-color: chartreuse;*/
    max-height: fit-content;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    margin-right: 20px;
}

.ham-menu-container {
    display: none; 
    font-size: 14px;
    position: relative;
    margin-left: auto;
    justify-content: right;
    background-color: black;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    width: fit-content; /* Adjust as needed */
    min-width: 150px;
    /*height: 100vh;*/
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 0;
}

.ham-menu-container.show {
    display: flex;
    transform: translateY(0);
}

.menu-content {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 10px 0px;
    align-items: end;
    text-align: right;
    font-size: larger;
    color: white;
}

.hamburger-menu {
    display: flex;
    flex-direction: column;
    transform: translate(0%, 20%);
    cursor: pointer;
}

.hamburger-menu .bar {
    width: 25px;
    height: 3px;
    margin: 3px 0;
    background-color: white;
}

.ul-menu ul li:hover {
    background-color: aqua;
    color: black;
    border-radius: 10px;
    cursor: pointer;
  }

#logoIcon {
    margin-right: 15px; 
    font-size: 20px; 
    transform: translate(0%, -20%);
}

#largeLogoName {
    display: none;
}

#mediumLogoName {
    display: none;
}

#miniLogoName {
    display: none;
}

@media (max-width: 1000px) {
    #logoName {
        display: none;
    }
    #largeLogoName {
        display: inline-block;
    }
}

@media (max-width: 850px) {
    #largeLogoName {
        display: none;
    }
    #mediumLogoName {
        display: inline-block;
    }
}

@media (max-width: 630px) {
    #mediumLogoName {
        display: none;
    }
    #miniLogoName {
        display: inline-block;
    }
}

@media (max-width: 450px) {
    #project-menu-bar,
    #menu-separator1 {
        display: none;
    }
}

@media (max-width: 280px) {
    #home-menu-bar {
        display: none;
    }
}

@media (max-width: 210px) {
    #miniLogoName {
        display: none;
    }
}