@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,700&family=Montserrat&family=Poppins&display=swap);
.container {
  position: relative;
  width: 100%;
}

button, div, img, p, h1, h2, h3, h4, h5, h6, .prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

p, h1, h2, h3, h4, h5, h6, label {
  color: white;
}

select, textarea {
  background-color: rgb(70, 70, 70);
  color: white;
}

.no-pointer-events {
  pointer-events: none;
}
* {
    margin: 0;
    padding: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #121212;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

button {
    background-color: #323232;
    color: white;
    font-size: 1rem;
}
input {
    background-color: #323232;
    color: white;
    font-size: 1rem;
}
input[type="text"]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* Color of the thumb */
}
textarea {
  background-color: #323232;
  color: white;
  font-size: 1rem;
  width: 100%;
}

.text-shadowed-5 {
    color: white;
    text-shadow: rgb(20, 20, 20) 5px 0px 0px,
        rgb(20, 20, 20) 4.90033px 0.993347px 0px,
        rgb(20, 20, 20) 4.60531px 1.94709px 0px,
        rgb(20, 20, 20) 4.12668px 2.82321px 0px,
        rgb(20, 20, 20) 3.48353px 3.58678px 0px,
        rgb(20, 20, 20) 2.70151px 4.20736px 0px,
        rgb(20, 20, 20) 1.81179px 4.6602px 0px,
        rgb(20, 20, 20) 0.849836px 4.92725px 0px,
        rgb(20, 20, 20) -0.145998px 4.99787px 0px,
        rgb(20, 20, 20) -1.13601px 4.86924px 0px,
        rgb(20, 20, 20) -2.08073px 4.54649px 0px,
        rgb(20, 20, 20) -2.94251px 4.04248px 0px,
        rgb(20, 20, 20) -3.68697px 3.37732px 0px,
        rgb(20, 20, 20) -4.28444px 2.57751px 0px,
        rgb(20, 20, 20) -4.71111px 1.67494px 0px,
        rgb(20, 20, 20) -4.94996px 0.7056px 0px,
        rgb(20, 20, 20) -4.99147px -0.291871px 0px,
        rgb(20, 20, 20) -4.83399px -1.27771px 0px,
        rgb(20, 20, 20) -4.48379px -2.2126px 0px,
        rgb(20, 20, 20) -3.95484px -3.05929px 0px,
        rgb(20, 20, 20) -3.26822px -3.78401px 0px,
        rgb(20, 20, 20) -2.4513px -4.35788px 0px,
        rgb(20, 20, 20) -1.53666px -4.75801px 0px,
        rgb(20, 20, 20) -0.560763px -4.96845px 0px,
        rgb(20, 20, 20) 0.437495px -4.98082px 0px,
        rgb(20, 20, 20) 1.41831px -4.79462px 0px,
        rgb(20, 20, 20) 2.34258px -4.41727px 0px,
        rgb(20, 20, 20) 3.17346px -3.86382px 0px,
        rgb(20, 20, 20) 3.87783px -3.15633px 0px,
        rgb(20, 20, 20) 4.4276px -2.32301px 0px,
        rgb(20, 20, 20) 4.80085px -1.39708px 0px,
        rgb(20, 20, 20) 4.98271px -0.415447px 0px;
}

.text-shadowed-3 {
    color: white;
    text-shadow: rgb(20, 20, 20) 3px 0px 0px,
        rgb(20, 20, 20) 2.83487px 0.981584px 0px,
        rgb(20, 20, 20) 2.35766px 1.85511px 0px,
        rgb(20, 20, 20) 1.62091px 2.52441px 0px,
        rgb(20, 20, 20) 0.705713px 2.91581px 0px,
        rgb(20, 20, 20) -0.287171px 2.98622px 0px,
        rgb(20, 20, 20) -1.24844px 2.72789px 0px,
        rgb(20, 20, 20) -2.07227px 2.16926px 0px,
        rgb(20, 20, 20) -2.66798px 1.37182px 0px,
        rgb(20, 20, 20) -2.96998px 0.42336px 0px,
        rgb(20, 20, 20) -2.94502px -0.571704px 0px,
        rgb(20, 20, 20) -2.59586px -1.50383px 0px,
        rgb(20, 20, 20) -1.96093px -2.27041px 0px,
        rgb(20, 20, 20) -1.11013px -2.78704px 0px,
        rgb(20, 20, 20) -0.137119px -2.99686px 0px,
        rgb(20, 20, 20) 0.850987px -2.87677px 0px,
        rgb(20, 20, 20) 1.74541px -2.43999px 0px,
        rgb(20, 20, 20) 2.44769px -1.73459px 0px,
        rgb(20, 20, 20) 2.88051px -0.838247px 0px;
}

/*
.page-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: absolute;
}
*/

#canvas {
    position: absolute;
    width: 100vw;
    height: 100vh;
    right: 0;
    left: 0;
}

.no-focus-outline:focus {
    outline: none;
}

hr {
  border: 1px solid grey; /* Set the border color to grey */
  width: 100%; /* Optional: Set the width of the hr */
  margin: 20px 0; /* Optional: Add some margin for spacing */
}

/* RECIPE DISPLAY */
.row-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px; /* Adjust spacing between rows */
}

.item-container {
  margin-right: 10px; /* Adjust spacing between items */
}

#img_homepageBackgroundImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Change link color to light blue */
a {
    color: #3498db; /* Light blue color */
    text-decoration: none; /* Removes underline, optional */
  }
  
/* Change link color on hover, optional */
a:hover {
    color: #2980b9; /* Slightly darker blue on hover */
}

/*below is the style for the credit and legal policies toggle window */

.toggleWindowMainMenu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 80%;
    max-height: 80%;
    overflow-y: auto;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.85);
    border: 3px solid #FFD700;
    border-radius: 10px;
    box-shadow: 0 0 20px #FFD700;
    color: #FFFFFF;
    text-align: center;
    scrollbar-width: thin;
    scrollbar-color: #FFD700 #000000;
}

.toggleWindowMainMenu::-webkit-scrollbar {
    width: 12px;
}

.toggleWindowMainMenu::-webkit-scrollbar-track {
    background: #000000;
}

.toggleWindowMainMenu::-webkit-scrollbar-thumb {
    background-color: #FFD700;
    border-radius: 20px;
    border: 3px solid #000000;
}

.toggleWindowMainMenu h1 {
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.toggleWindowMainMenu h2 {
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.toggleWindowMainMenu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.toggleWindowMainMenu li {
    margin-bottom: 15px;
    line-height: 1.6;
}

.closeButton_credits {
    position: sticky;
    z-index: 1001;
    top: 0px;
    right: 0px;
    float: right;
    background-color: #FFD700;
    border: none;
    padding: 10px;
    width: 50px;
    cursor: pointer;
    color: #000000;
    border-radius: 5px;
}

.closeButton_credits:hover {
    background-color: #FFA500;
}

#game-over-screen {
    text-align: center;

    background: rgba(0, 0, 0, 0.6);
    padding: 1rem;
    border-radius: 10px;

    button {
        margin: 4px 0;
        width: 100%;
        display: inline-block;
    }

    .modal-item {
        margin-bottom: 0;
    }

    h1,
    h2 {
        margin-top: 0;
        margin-bottom: 5px;
    }

    #game-over-stats {
        width: 250px;
        margin: auto;
        padding: 16px 20px 16px 20px;

        @media screen and (max-width: 100%) {
            width: 200px;
            padding: 8px 20px 8px 20px;
        }

        .stat {
            font-weight: bold;
            width: 100%;
            display: flex;
            padding: 0.5rem 0;

            @media screen and (max-width: 100%) {
                padding: 0.25rem 0;
            }
        }

        .stat-name {
            text-align: right;
        }

        .stat-value {
            text-align: right;
            margin-left: auto;
        }
    }

    @media screen and (max-width: 100%) {
        font-size: 12px;
        max-width: fit-content;
        width: 280px;
        padding: 0.75rem;

        button {
            font-size: 14px;
            height: 35px;
        }
    }
}
.craftable-buildable-img {
    border: 1px solid black;
    /* Set width and height to 100x100px */
    width: 100px;
    height: 100px;
    /* Keep aspect ratio */
    object-fit: contain;
    /* Align images top left to right */
    float: left;
    /* Add spacing between images */
    margin: 5px;
}
textarea {
    scrollbar-width: thin;
    scrollbar-color: #444 #1e1e1e;
}

textarea::-webkit-scrollbar {
    width: 8px;
}

textarea::-webkit-scrollbar-track {
    background: #1e1e1e;
}

textarea::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}
#div_bottomRightLinks     {grid-area: bottomRightLinks; }
#div_topRightLinks        {grid-area: topRightLinks   ; }
#sec_homepageMiddleCenter {grid-area: homepageMiddleCenter; }
#sec_socialMediaLinks     {grid-area: socialMediaLinks}

.css-grid-homescreen-desktop {
  display: grid;
  min-height: 100vh;
  grid-template-areas:
    '. . topRightLinks'
    '. homepageMiddleCenter .'
    'socialMediaLinks . bottomRightLinks';
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
}

@media screen and (max-width: 767px) {
  .css-grid-homescreen-desktop {
    grid-template-areas:
      '. . . .'
      '. homepageMiddleCenter homepageMiddleCenter .'
      '. socialMediaLinks socialMediaLinks .'
      '. topRightLinks bottomRightLinks .'
      '. . . .';
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-columns: auto auto auto auto;
    align-content: center;
    justify-items: center;
  }

  #sec_homepageMiddleCenter,
  #sec_socialMediaLinks {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .css-grid-homescreen-desktop {
    grid-template-areas:
      'homepageMiddleCenter topRightLinks'
      'homepageMiddleCenter bottomRightLinks'
      'homepageMiddleCenter socialMediaLinks';
    grid-template-rows: auto auto auto;
    grid-template-columns: auto auto;
    align-content: center;
    align-items: center;
    justify-items: center;
  }

  #sec_homepageMiddleCenter {
    margin-right: 20px;
  }

  #sec_socialMediaLinks,
  #div_topRightLinks,
  #div_bottomRightLinks {
    margin-bottom: 20px;
  }
}
#div_bottomCenter                    {grid-area: bottomCenter                   ; }
#div_bottomRightSection              {grid-area: bottomRightSection             ; }
#div_containerGaugesImagePlaceholder {grid-area: containerGaugesImagePlaceholder; }
#div_containerLeaderboard            {grid-area: containerLeaderboard           ; }
#div_containerTierTreeCharacters     {grid-area: containerTierTreeCharacters    ; }
#div_centerMiddle                    {grid-area: centerMiddle                   ; }
#div_topRightSettingsContainer       {grid-area: topRightSettingsContainer      ; }

.css-grid-game-desktop {
  display: grid;
  height: 100vh;
  grid-template-areas:
    'containerTierTreeCharacters containerTierTreeCharacters topRightSettingsContainer'
    '. . containerLeaderboard'
    '. centerMiddle bottomRightSection'
    'containerGaugesImagePlaceholder bottomCenter bottomRightSection';
  grid-template-rows: 5vw 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}
#sec_respawnPage { grid-area: respawnPage; }

.css-grid-respawn-desktop {
  display: grid;
  height: 100vh;
  grid-template-areas:
    '.'
    'respawnPage'
    '.';
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr;
  position: relative;
}

@media screen and (max-width: 767px) {
  .css-grid-respawn-desktop {
    grid-template-areas:
      'respawnPage';
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
}
:root {
    --ability-icon-size: calc(5vw + 20px);
    --ability-icon-max-size: 100px;
    --ability-icon-border-width: calc(0.3vw + 2px);
    --ability-icon-border-color: gray;
    --ability-icon-background-color: #333;
    --ability-icon-position: calc(0.5vh + 3vw + 20px);
    --level-up-bar-height: calc(1.5vw + 10px);
    --level-up-bar-max-height: 40px;
}

#img_abilityIcon {
    background-color: var(--ability-icon-background-color);
    position: fixed;
    bottom: var(--ability-icon-position);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    width: var(--ability-icon-size);
    max-width: var(--ability-icon-max-size);
    height: var(--ability-icon-size);
    max-height: var(--ability-icon-max-size);
    border-color: var(--ability-icon-border-color);
    border-width: var(--ability-icon-border-width);
    border-style: solid;
    display: inline-block;
    box-sizing: border-box;
    filter: brightness(75%);
    cursor: pointer;
}

#div_abilityIconOverlay {
    background-color: var(--ability-icon-background-color);
    opacity: 50%;
    position: fixed;
    bottom: var(--ability-icon-position);
    left: 50%;
    transform: translateX(-50%);
    width: var(--ability-icon-size);
    max-width: var(--ability-icon-max-size);
    height: var(--ability-icon-size);
    max-height: var(--ability-icon-max-size);
    border-radius: 10px;
}

#p_currentCharacterName {
    background-color: #333;
    color: white;
    height: var(--level-up-bar-height);
    max-height: var(--level-up-bar-max-height);
    position: absolute;
    bottom: calc(5px + var(--level-up-bar-height));
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0 10px;
    white-space: nowrap;
    font-size: calc(1vw + 8px);
}

#div_levelUpBarBack {
    background-color: #222;
    color: white;
    width: 20%;
    height: var(--level-up-bar-height);
    max-height: var(--level-up-bar-max-height);
    position: absolute;
    bottom: 5px;
    left: 40%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#div_levelUpBarFront {
    background-color: #132857;
    color: white;
    width: 0%;
    height: var(--level-up-bar-height);
    max-height: var(--level-up-bar-max-height);
    position: absolute;
    bottom: 5px;
    left: 40%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#p_levelText {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    pointer-events: none;
    text-align: center;
    font-size: calc(1vw + 8px);
    white-space: nowrap;
}
#btn_recipes {
    background-color: rgb(89, 60, 10) 
}

#cnv_minimapCanvas {
    position: absolute; 
    left: 0; 
    width: 100%; 
    pointer-events: none;
}    

#div_bottomRightSection {
    position: relative;   
}

#div_btnRecipes {
    text-align: center
}

#div_containerResources {
    margin-bottom: 10px; 
    background-color: rgb(89, 89, 89); 
    position: absolute; 
    bottom: calc(10vw + 10px); 
    right: 0;
}

#div_containerZoom {
    margin-bottom: 10px; 
    background-color: rgb(89, 89, 89); 
    position: absolute; 
    bottom: calc(10vw + 10px); 
    right: 0;
}

#div_minimapContainer {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000; /* Ensures it's above other elements */
}

#img_minimap {
    width: 10vw; 
    user-select: none; 
    pointer-events: none;
}

#div_resource1,
#div_resource2,
#div_resource3,
#div_resource4 {
    display: flex; 
    align-items: center;
}

#img_resourceIcon_1,
#img_resourceIcon_2,
#img_resourceIcon_3,
#img_resourceIcon_4 {
    width: 3vw;
}

#span_resource1,
#span_resource2,
#span_resource3,
#span_resource4 {
    text-align: right; 
    margin-right: 10px; 
    font-size: 1.5rem; 
    color: white;
}
#btn_closeRecipesDiv,
#btn_settings {
    font-size: 18px;
    float: right; 
    width: 40px;
}

#chk_settingToggleUsernameVisibility {
    align-items: center;
}

#div_recipes {
    display: none; 
    background-color: rgb(60, 60, 60); 
    width: 300px;
}

#div_settings {
    display: none;
    background-color: rgb(60, 60, 60);
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

#lbl_musicVolume,
#lbl_soundVolume,
#rng_musicVolume,
#rng_soundVolume {
    display: inline-block; 
    vertical-align: middle;
}
#div_chatBox {
    position: absolute;
    display: none;
    left: 50%;
    transform: translate(-50%, 0);
    top: 50%;
    margin-top: 35px;
    outline: none; 
}

#inp_chatBox {
    border-radius: 7px;
    border: 5px solid #141414;
    padding: 5px;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}
#p_availableUpgradePoints,
#p_availableUpgradePointsLabel {
    display: inline;
}

#div_containerGaugesImagePlaceholder {
    /* Default styles for larger screens */
    transform: scale(1);
    transform-origin: bottom left;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  
  /* For tablets and large phones */
  @media screen and (max-width: 768px) {
    #div_containerGaugesImagePlaceholder {
      transform: scale(0.6);
    }
  }
  
  /* For smaller phones in portrait mode */
  @media screen and (max-width: 480px) and (orientation: portrait) {
    #div_containerGaugesImagePlaceholder {
      transform: scale(0.4);
    }
  }
  
  /* For phones in landscape mode */
  @media screen and (max-height: 480px) and (orientation: landscape) {
    #div_containerGaugesImagePlaceholder {
      transform: scale(0.3);
    }
  }
  
  /* For very small devices or extreme cases */
  @media screen and (max-width: 320px), screen and (max-height: 320px) {
    #div_containerGaugesImagePlaceholder {
      transform: scale(0.2);
    }
  }
#div_containerLeaderboard {
    position: fixed;
    top: calc(8vw);
    right: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#div_containerLeaderboardChild {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#div_leaderboardUsernames {
    width: 12ch;
    font-family: monospace;
    font-size: 1vw;
    color: white;
    overflow: hidden;
    margin-right: 2vw;
}

#div_leaderboardUsernamesChild {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#div_leaderboardScores {
    width: 8ch;
    font-family: monospace;
    font-size: 1vw;
    text-align: right;
    white-space: nowrap;
    color: white;
}
#div_joystickMovement {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
}

#div_joystickRotation {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
}


#div_joystickMovement, /* used to remove ios share function that pops up when fast tapping and it seems to select the div joystick element -- may not need all of these, haven't tested if need both no select and no touch or both */
#div_joystickRotation {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
}
#div_topRightSettingsContainer{
    position: absolute; 
    top: 1vh; 
    right: 1vw; 
    display: flex; 
    align-items: flex-start; 
    justify-content: flex-end;
}

#img_soundToggle,
#img_settingsIcon,
#img_fullscreenToggle {
    margin-left: 1vh; 
    user-select: none; 
    cursor: pointer; 
    width: 5vw;
}
#div_containerTierTreeCharacters {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    justify-content: space-between;
    align-items: flex-start;
    user-select: none;
}
#div_homepageBackgroundImageContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  #div_homepageBackgroundImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  @media screen and (max-aspect-ratio: 1/1) {
    #div_homepageBackgroundImageContainer img {
      width: 100%;
      height: auto;
      min-height: 100dvh;
    }
  }
/*
#div_bottomRightLinks {
    position: absolute; 
    right: 40px; 
    bottom: 40px;
}
*/
#div_bottomRightCreditsToggle {
    margin-left: 20px;
}

#div_bottomRightCreditsToggle,
#div_bottomRightLegalToggle {
    display: inline-block;
}
#div_changelogMenuWindow {
    display: none;
}
#div_creditsMainMenuWindow {
    display: none
}
#div_legalPoliciesMenuWindow {
    display: none
}
#alert-dialogue {
    display: none;
}

#join-options {
    display: none;
    max-width: 450px; /* Set the maximum width to match the image width */
    margin: 0 auto; /* Center the container horizontally */
}

.brand img {
    max-width: 100%; /* Add this line to make the image responsive */
    height: auto; /* Add this line to maintain the aspect ratio */
}
#div_roadmapMenuWindow {
    display: none;
}
/*
#div_topRightLinks {
    position: absolute; 
    right: 40px; 
    top: 40px;
}
*/

#div_changelogToggle {
    margin-left: 20px;
}

#div_changelogToggle,
#div_roadmapToggle {
    display: inline-block;
}
#div_mapEditorAssets {
    background-color: #121212; 
    position: absolute; 
    top: 22px
}

#div_parentMapEditorAssetsPreviewImages {
    background-color: #121212; 
    height: 100vh; 
    width: 300px; 
    overflow-y: auto;
} 

#div_mapEditorAssetsPreviewImages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-items: center;
    gap: 10px;
}

#div_mapEditorAssetsPreviewImages img {
    max-width: 100%;
    height: auto;
}
#div_mapEditorInspector {
    background-color: #121212; 
    position: absolute; 
    height: 100vh; 
    overflow-y: auto; 
    right: 0px;
    top: 0px;
}
#div_mapEditorSelectMode {
    background-color: #121212; 
    position: absolute; 
    height: 100vh; 
    overflow-y: auto; 
    right: 0px; 
    display: none;
}
#img_semiOpaqueMousePlacementPreview {
  visibility: hidden;
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
}
#div_mapEditorSettingsMode {
    background-color: #121212; 
    position: absolute; 
    height: 100vh; 
    overflow-y: auto; 
    right: 0px; 
    display: none;
}
#sel_mapEditorToggle {
    position: fixed;
    top: 0px;
}
.game-over-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
}

.respawn-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9999;
}

.menu {
    text-align: center;
    margin: auto;
    /* background-color: #f2f2f2;
    border: 1px solid #ccc; */
}

.menu .brand h1 {
    font-size: 45px;
    color: rgb(223, 118, 114);
}

.menu .input {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#sel_gameServer,
#inp_username {
    margin-bottom: 20px;
}

.menu .input p {
    text-align: left;
    font-size: 14px;
    margin-top: 5px;
    font-weight: bold;
}

.menu .input input {
    outline: none;
    border-radius: 7px;
    border: 5px solid #141414;

    padding: 15px;
    background-color: #323232;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    /* box-shadow: inset 0 -4px 0 0 inset 0 5px 0 #d1c9b0; */
    box-shadow: inset 0 -4px 0 0 #4b4949;
}

.menu .input button {
    display: flex;
    flex-direction: row;
    justify-content: center;

    border-radius: 7px;
    border: grey;
    cursor: pointer;

    padding: 15px;

    background-color: rgb(112, 160, 207);
    color: white;
    box-shadow: inset 0 -4px 0 0 rgb(77, 124, 172);
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    width: 100%;
}

.menu .input .green {
    background-color: rgb(86, 164, 41);
    color: white;
    box-shadow: inset 0 -4px 0 0 rgb(106, 150, 11);
}
#btn_discordSocialMediaLink {
    display: flex; 
    align-items: center; 
    background-color: #7289DA; 
    border: 2px solid #7289DA; 
    border-radius: 5px; 
    color: #FFFFFF; 
    cursor: pointer; 
    padding: 10px 20px; 
    font-family: Arial, sans-serif; 
    font-size: 16px; 
    font-weight: bold;
}

#spn_discordSocialMediaLink {
    margin-right: 10px
}

#img_discordSocialMediaLink {
    width: 24px; 
    height: 24px;
}

#div_homepageSocialMediaLinkButtons {
    display: flex;
    justify-content: center;
}