/* ---------------------------------------------------------------------------------- BASE  */
body { margin: 0; padding: 0; font-family: Verdana, sans-serif; background-color: var(--background-color); color: var(--font-main); height: 100vh; font-size: 12px; }
a, a:visited, a:hover, a:active { color: var(--font-main); text-decoration: none; }

/* ---------------------------------------------------------------------------------- MENU  */

.topbar {width: 100%;height: 25px;background-color: var(--full-black);display: flex;justify-content: space-between;align-items: center;padding: 0 0 0 10px;font-size: 12px;box-sizing: border-box;position: fixed;top: 0;left: 0;z-index: 1000;}
.menu-left, .menu-right { display: flex; align-items: center; }
.menu-right { display: flex; align-items: center; }
.menu-left a {color: var(--font-main);text-decoration: none;text-align: center;padding: 5px 10px;display: inline-block;transition: background 0.2s;}
.menu-right a {background-color: var(--background-color);color: var(--dot-red);text-decoration: none;text-align: center;padding: 5px 10px;display: inline-block;transition: background 0.2s;}
.menu-left a {width:100px;}
.menu-left a.active {background-color: var(--background-color);color: var(--font-main);}
.logo {width: 30px;margin-top:10px;margin-right: 10px;}

/* ---------------------------------------------------------------------------------- CIANBAY  */
.popup {position: fixed;bottom: 0px;z-index: 9999; font-size:14px; }
#popup-right {right: 20px;max-width: 300px;}
#popup-right img {width: 100%;height: auto;display: block;margin: 0 auto;}
#popup-center {font-family: 'Comic Sans MS', cursive, sans-serif;position: fixed;right: 320px;bottom: 300px;background-color: var(--bubble-color);border-radius: 20px 20px 0px 20px;border: 3px solid var(--full-black);text-align: center;padding: 5px;box-shadow: 0 0 10px var(--shadow-color);color: var(--full-black);max-width:300px;}
#popup-left {position: fixed;right: 350px;bottom: 20px;padding: 0;border: none;background: none;box-shadow: none;}
#popup-left textarea {font-size:14px;width: 500px;height: 200px;resize: none;font-family: 'Comic Sans MS', cursive, sans-serif;font-size: 1em;padding: 10px;box-sizing: border-box;border-radius: 20px 20px 20px 0px;border: 3px solid var(--full-black);background-color:var(--input-background);box-shadow: 0 0 10px rgba(0,0,0,0.5);color: var(--font-main);}
.hidden {display: none !important}
#left-textarea:focus {outline: none;border: 3px solid var(--full-black);}

/* ------------------------------------------------------------------------------------------------------------------------ MOBILE -----------------------------------------------------------  */
@media only screen and (max-width: 768px) {

#popup-right { display:none; }

}