/* ----------------------------------------------------- GLOBAL VARIABLES -----*/
/* ----------------------------------------------------- COLORS AND STYLING -----*/
/* ---- MAIN WEBSITE---- */
/* ---- PROJECT MAIN PAGE STYLING ---- */
/* ---- PROJECT STYLING ---- */
/* ---- PROJECT IMAGE STYLING ---- */
/* ---- PROJECT BUTTON STYLING ---- */
/* ----------------------------------------------------- RESPONSIVE -----*/
/* ----------------------------------------------------- LAYOUT -----*/
/* ----------------------------------------------------- FONTS -----*/
/*
'Sofia Sans Semi Condensed'
Arial, Helvetica, sans-serif; 
'Ysabeau';
'Lato';
"Comfortaa", sans-serif;
*/
/* ----------------------------------------------------- MENU MOBILE -----*/
@media (max-width: 900px) {
  :root {
    --mode: mobile;
  }
  #menu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 40;
    background-color: white;
  }
  #menu-bar {
    display: block;
    position: relative;
    top: 0;
    width: 100%;
    padding: 16px;
  }
  .fa-bars {
    float: right;
    color: black;
  }
  #profile-name {
    display: none;
  }
  #menu-frame {
    width: 100%;
    display: none;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    padding: 16px;
  }
  #menu-items-desktop {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 16px;
  }
  #social-desktop {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 24px;
  }
  .social-icon-desktop {
    margin-right: 8px;
  }
  #profile-name-mobile {
    display: block;
    position: relative;
    width: 57%;
    top: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
  }
}/*# sourceMappingURL=menu_mobile.css.map */