/* Main Default styles used for most things currently */
    .Default {
        background-color: white;
        color: black;
        font-family: "ＭＳ Ｐゴシック", "MS UI Gothic";
    }
    .Default-shifted {
        margin-left: 120px;
        font-family: "ＭＳ Ｐゴシック", "MS UI Gothic";
    }
    .Default-darkmode {
        background-color: black;
        color: white;
        font-family: "ＭＳ Ｐゴシック", "MS UI Gothic";
    }
    .Default-shifted-Xlarge {
        margin-left: 120px;
        font-family: "ＭＳ Ｐゴシック", "MS UI Gothic";
        font-size: x-large;
    }
    /* Main Navigation background and buttons on every page for moving from menu to menu */
    .navbackground {
        /* USED FOR DESIGNING THE BACKGROUND TO THE NAVIGATION BAR #TODO */
        display: flex;
        flex-direction: row;
        gap: 3px;
    }
    .navbuttons {
     opacity: 1;
     box-shadow: 0 2px #000000;
     font-family: "ＭＳ Ｐゴシック", "MS UI Gothic";
     font-weight: bold;
    }
    .navbuttons:hover {
     opacity: 0.8;
     transform: translateY(1px);
    }
    .navbuttons:active {
        box-shadow: 0 5px #6e6e6e;
        transform: translateY(3px);
    }
    /* For the buttons on the side of the screen in the gallery */
    .sidebuttons {
        transform: translateX(-200%);
        position: relative;
        opacity: 1;
        box-shadow: 0 2px #000000;
        font-family: "ＭＳ Ｐゴシック", "MS UI Gothic";
        font-weight: bold;
        animation: slideInLeft 0.5s ease-out forwards;
    }
    .sidebuttons:hover {
        opacity: 0.8;
        transform: translateY(1px);
    }
    .sidebuttons:active {
        box-shadow: 0 5px #6e6e6e;
        transform: translateY(3px);
    }
    /* Currently only used in one section in the gallery */
    .Meiryo-UI {
        margin-left: 120px;
        font-family: "メイリオ", "Meiryo UI";
    }
    /* Should be used any time a youtube player is created */
    .Youtube-player{
        position: relative;
        animation: fadeIn 1s ease-in forwards;
    }
   
 /* keyframes could be useful for any css so they should all be kept here */   
    @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
    }
    @keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0%); }
    }