/*********************************************************************************************************************/
/*                                                                                                                   */
/*                                                     VARIABLES                                                     */
/*                                                                                                                   */
/*********************************************************************************************************************/

:root { --paper:        #171B22                                   ;
        --ink:          #D9D9CB                                   ;
        --darkink:      #8C948F                                   ;
        --yellow:       #E8D76A                                   ;
        --yellowish:    #E8D76A12                                 ;
        --green:        #92BDA0                                   ;
        --red:          #DF897F                                   ;
        --orange:       #D6A06D                                   ;
        --pink:         #D69BBF                                   ;
        --purple:       #B4A1DB                                   ;
        --darkpurple:   #0D1119                                   ;
        --blue:         #8FBBD9                                   ;
        --teal:         #72C6B6                                   ;
        --cream:        #EDE3CA                                   ;
        --grid:         #A6B6A544                                 ;
        --notebook:     #91A2980D                                 ;
        --margin:       #B9767444                                 ;
        --handwriting:  'brain-heater', 'Comic Sans MS', cursive  ;
        --grid_size:    4;                                        }

/*********************************************************************************************************************/
/*                                                                                                                   */
/*                                                      GENERAL                                                      */
/*                                                                                                                   */
/*********************************************************************************************************************/

@font-face            { font-family: 'brain-heater'; src: url('./kalam.ttf') format('truetype')                       ;
                        font-style: normal; font-weight: 400; font-display: swap;                                     }
*, *:before, *:after  { box-sizing: border-box;                                                                       }
body                  { margin: 0; background-color: var(--paper); color: var(--ink); font-family: var(--handwriting) ;
                        line-height: 1.5; background-image: repeating-linear-gradient( to bottom, transparent 0       ,
                        transparent 27px, var(--notebook) 27px, var(--notebook) 28px );                               }
button, select        { font: inherit; color: inherit;                                                                }
button                { cursor: pointer; background: none; border: 0;                                                 }
button:hover          { color: var(--yellow);                                                                         }
button:focus-visible, select:focus-visible, .brain_board:focus-visible
                      { outline: 2px dashed var(--yellow); outline-offset: 5px;                                       }
[hidden]              { display: none !important;                                                                     }

/*********************************************************************************************************************/
/*                                                                                                                   */
/*                                                  PAGE STRUCTURE                                                   */
/*                                                                                                                   */
/*********************************************************************************************************************/

.brain_header           { display: flex; justify-content: center; align-items: center             ;
                          gap: 1rem; margin-bottom: 1rem;                                         }
.brain_title i          { display: inline-block; margin-left: 7px; color: var(--red)              ;
                          font-size: 0.8em; font-style: normal; transform: rotate(14deg);         }
.brain_title span       { position: relative; color: var(--yellow); border: 0; border-radius: 0;  }
.brain_title span:after { content: ''; position: absolute; left: 2px; right: -2px; bottom: -3px   ;
                          height: 5px; border-top: 2px solid var(--yellow); border-radius: 50%    ;
                          border-bottom: 1px solid #E8D76A66; transform: rotate(-2deg)            ;
                          pointer-events: none;                                                   }
.brain_container        { position: relative; width: 100%; max-width: 42rem; margin: 0 auto       ;
                          padding: 2rem 3rem 2rem 4rem; min-height: 100vh; min-height: 100dvh;    }
.brain_container:before { content: ''; position: absolute; top: 0; bottom: 0; left: 1.5rem        ;
                          width: 1px; background: var(--margin); box-shadow: 3px 0 #B976741A      ;
                          pointer-events: none;                                                   }

/*********************************************************************************************************************/
/*                                                                                                                   */
/*                                                     CONTROLS                                                      */
/*                                                                                                                   */
/*********************************************************************************************************************/

.controls { margin: 1.5rem 0 0; text-align: center; color: var(--darkink) ; font-size: 0.85rem; }

/*********************************************************************************************************************/
/*                                                                                                                   */
/*                                                       LINKS                                                       */
/*                                                                                                                   */
/*********************************************************************************************************************/

.link_buttons                 { display: flex; justify-content: center; flex-wrap: wrap             ;
                                gap: 0.8rem; margin-top: 2rem;                                      }
.link_buttons a               { display: inline-flex; align-items: center; justify-content: center  ;
                                padding: 0.4rem 0.8rem; font-size: 0.8rem; color: var(--ink)        ;
                                text-decoration: none; border: 1px solid var(--grid)                ;
                                border-radius: 5px 2px 6px 3px;                                     }
.link_buttons a:first-child   { transform: rotate(-2deg);                                           }
.link_buttons a:last-child    { transform: rotate(2deg);                                            }
.link_buttons a:hover         { color: var(--yellow); border-color: var(--yellow);                  }
.link_buttons a:focus-visible { outline: 2px dashed var(--yellow); outline-offset: 5px;             }