@charset "utf-8";

/*$$$$$$$$           /$$       /$$ /$$       /$$   /$$    
| $$_____/          | $$      |__/| $$      |__/  | $$    
| $$       /$$   /$$| $$$$$$$  /$$| $$$$$$$  /$$ /$$$$$$  
| $$$$$   |  $$ /$$/| $$__  $$| $$| $$__  $$| $$|_  $$_/  
| $$__/    \  $$$$/ | $$  \ $$| $$| $$  \ $$| $$  | $$    
| $$        >$$  $$ | $$  | $$| $$| $$  | $$| $$  | $$ /$$
| $$$$$$$$ /$$/\  $$| $$  | $$| $$| $$$$$$$/| $$  |  $$$$/
|________/|__/  \__/|__/  |__/|__/|_______/ |__/   \__*/

html, body{
    overflow-y: hidden;
}

.hidden{
    display: none;
}

.exhibit_link{
    padding: 10px;
    max-height: 40px;
}

.exhibit_link:hover{
    background-color: var(--green);
    color: var(--black);
}

.terminal{
    position: relative;
    border: 1px solid var(--green);
    padding: 25px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: black;
}

#terminal_bg_video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

#terminal_bg_video.portrait_fade-in {
    opacity: 0.1;
}

#terminal_bg_video.portrait_fade-out {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

#terminal_bg_video.portrait_cut-in {
    opacity: 0.1;
    transition: none;
}

.active::after{
    content: "";
    width: 0.60em;
    height: 1em;
    background: var(--green);
    display: inline-block;
    animation: cursor-blink 1.5s steps(2) infinite;
    padding: 0;
    margin: -0.5em 0;
}

.active{
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 0.70em;
}

.line{
    margin: 0;
    padding: 0;
}

.clipped{
    white-space: nowrap !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
}

.underline{
    border-bottom: 1px solid var(--green);
}

.underline_green{
    border-bottom: 1px solid var(--green);
}

.text_wrap{
    overflow-wrap: anywhere;
}

.prompt_line{
    display: flex;
    word-wrap: break-word;
    flex-wrap: wrap;
}

.prompt{
    margin-right: 10px;
}

.input{
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.gnu_header{
    padding: 10px;
    background-color: var(--green);
    color: var(--black);
}

.gnu_footer{
    display: flex;
	justify-content: space-between;
}

.gnu_footer_column{
    text-align: left;
    margin-right: 10px;
}

.highlight{
    background: var(--green);
    color: var(--black);
}

.indent,
.indented{
    padding-left: 50px !important;
}

.double_indent,
.double_indented{
    padding-left: 100px !important;
}

.tripple_indent,
.tripple_indented{
    padding-left: 150px !important;
}

.quadruple_indent,
.quadruple_indented{
    padding-left: 200px !important;
}

.super_indent,
.super_indented{
    padding-left: 50% !important;
}

.fade_in{
    animation: fadeIn 10s;
}

.fade_out_10{
    animation: fadeOut 10s;
	animation-fill-mode: forwards;
}

.fade_out_5{
    animation: fadeOut 5s;
	animation-fill-mode: forwards;
}

.fade_out_2{
    animation: fadeOut 2s;
	animation-fill-mode: forwards;
}

.fade_out_1{
    animation: fadeOut 1s;
	animation-fill-mode: forwards;
}

/*
 _______              .__              __  .__               
 \      \ _____ ___  _|__| _________ _/  |_|__| ____   ____  
 /   |   \\__  \\  \/ /  |/ ___\__  \\   __\  |/  _ \ /    \ 
/    |    \/ __ \\   /|  / /_/  > __ \|  | |  (  <_> )   |  \
\____|__  (____  /\_/ |__\___  (____  /__| |__|\____/|___|  /
        \/     \/       /_____/     \/                    \/ 
*/

#nav_buttons{
    z-index: 999999;
}

.nav_button{
    cursor: pointer;
}

.nav_menu{
    border: 1px solid var(--green);
    padding: 25px;
    overflow-y: scroll;
}

.nav_menu_items{
    display: flex;
    flex-wrap: wrap;
}

.exhibit_link{
    margin-bottom: 25px;
    margin-right: 10px;
}

.zoom_in{
    animation: zoom-in 0.5s ease;
}

@keyframes zoom-in {
    0% {
        transform: scale(0, 0);
    }
    50% {
        transform: scale(1, 0.01);
    }
    100% {
        transform: scale(1, 1);
    }
}

.zoom_out{
    animation: zoom-out 0.5s ease;
}

@keyframes zoom-out {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 0.01);
    }
    100% {
        transform: scale(0, 0);
    }
}

/*
.____    .__                     
|    |   |__| ____  __ _____  ___
|    |   |  |/    \|  |  \  \/  /
|    |___|  |   |  \  |  />    < 
|_______ \__|___|  /____//__/\_ \
        \/       \/            \/
*/

.file_structure{
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
    margin-bottom: 1em;
}

.file_column {
    max-width: 200px;
    word-spacing: 200px;
}

/*
  _________                      __         .__                          
 /   _____/ _____ _____ ________/  |_______ |  |__   ____   ____   ____  
 \_____  \ /     \\__  \\_  __ \   __\____ \|  |  \ /  _ \ /    \_/ __ \ 
 /        \  Y Y  \/ __ \|  | \/|  | |  |_> >   Y  (  <_> )   |  \  ___/ 
/_______  /__|_|  (____  /__|   |__| |   __/|___|  /\____/|___|  /\___  >
        \/      \/     \/            |__|        \/            \/     \/ 
*/

/* ALL USERS */

.smartphone{
    width: 350px;
    border-radius: 25px;
    border: 3px solid gray;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px;
    scroll-behavior: smooth;
}

.portrait_smartphone{
    width: 350px !important;
    border-radius: 25px;
    display: block;       /* Important! Inline elements ignore margin auto */
    margin: 0 auto;       /* This centers it horizontally */
    max-width: 100%;      /* Optional: makes it responsive */
}

.smartphone p{
    color: var(--black);
}

.smartphone p .active{
    display: none;
}

.smartphone .underline{
    border-bottom: 1px solid var(--black);
}

.smartphone .underline_green{
    border-bottom: 1px solid var(--green);
}

.user_icon{
    width: 15%;
    text-align: center;
    vertical-align: middle;
    padding-top: 50px;
    font-size: 18pt;
}

.sms_notification_content{
    width: 80%;
    padding: 10px;
}

.sms_notification_content h3{
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.sms_header_icons{
    font-size: 9pt;
    display: flex;
    justify-content: space-between;
    padding: 0px 5px;
}

.sms_header_right_icons{
    display: flex;
}

.sms_header_right_icons span{
    padding-left: 6px;
}

.email_header{
    display: flex;
    justify-content: space-between;
    background-color: rgba(255,75,75,0.75);
    color: var(--black);
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border: 3px solid gray;
    width: 350px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px;
    height: 75px;
    animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center
}

@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}

.menu_icons{
    display: flex;
}

.menu_icons h2{
    margin-left: 20px;
}

.sms_message{
    border-radius: 15px;
    background-color: rgba(255,255,255,0.75);
    max-width: 200px;
    padding: 10px;
}

.pop{
    animation-duration: 0.5s;
    animation-name: animate-pop;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
}

@keyframes animate-pop {
    0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* MICHELE */

.michele_smartphone{
    background: url("images/knight.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}

.lockscreen_clock_michele{
    font-size: 25pt;
    font-weight: bold;
    text-shadow: 4px 4px 4px rgba(50,150,255,0.75);
}

.lockscreen_clock_michele h2{
    color: var(--white) !important;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.lockscreen_date_michele{
    color: var(--white) !important;
    font-size: 14pt;
    font-weight: bold;
    text-shadow: 4px 4px 4px rgba(50,150,255,0.75);
}

.sms_notification_michele{
    display: flex;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.75);
    padding-bottom: 10px;
    box-shadow: 4px 4px 4px rgba(50,150,255,0.75);
}

.michele_sms{
    background: url("images/knight_clear.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
}

.sms_header_michele{
    justify-content: space-between;
    background-color: rgba(10,10,10,0.75);
    color: rgba(50,150,255,1);
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border: 3px solid gray;
    width: 350px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px;
    height: 80px;
}

.michele_sms_message{
    background-color: rgba(50,150,255,.75);
    margin-left: auto;
}

.sms_typing_michele{
    display: flex;
    font-size: 10pt;
    height: 20px;
    padding: 5px;
    color: rgba(50,150,255,0.75);
}

.sms_footer_michele{
    display: flex;
    justify-content: space-between;
    background-color: rgba(10,10,10,0.75);
    color: rgba(50,150,255,1);
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border: 3px solid gray;
    width: 350px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px 25px;
    height: 75px;
}

.keyboard_footer_michele{
    background-color: rgba(10,10,10,0.75);
    color: rgba(50,150,255,1);
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border: 3px solid gray;
    width: 350px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    height: 270px;
}

.smartphone_keyboard_michele{
    padding-top: 5px;
}

.smartphone_keyboard_row{
    text-align: center;
    margin: 10px 0px;
}

.keyboard_key{
    background-color: var(--darkerGray);
    color: var(--white);
    font-size: 18pt;
    padding: 3px;
    margin: 3px 5px;
    border-radius: 5px;
    text-align: center;
}

.keypress{
    animation: keypress_animation 0.25s;
}

@keyframes keypress_animation
{
    0% {
        background:var(--darkerGray);
        color: var(--white);
    }
    25% {
        background:var(--blue);
        color: var(--white);
    }
    75% {
        background:var(--blue);
        color: var(--white);
    }
    100% {
        background:var(--darkerGray);
        color: var(--white);
    }
}

.sms_notes_app{
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-weight: normal;
    font-size: 16pt;
    background-color: palegoldenrod;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
}

.smartphone_notes_text{
    max-width: 300px;
    word-wrap: break-word;
}

.smartphone_footer_michele{
    display: flex;
    justify-content: space-between;
    width: 350px;
    padding: 10px 25px;
}

.sms_header_michele h2,
.sms_header_michele h3,
.sms_footer_michele h2,
.sms_footer_michele h3,
.keyboard_footer_michele h2,
.keyboard_footer_michele h3
{
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/* JACOB */

.jacob_smartphone{
    background: url("images/hacker.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}

.lockscreen_clock_jacob{
    font-size: 25pt;
    font-weight: bold;
    text-shadow: 4px 4px 4px rgba(150,255,150,0.75);
}

.lockscreen_clock_jacob h2{
    color: var(--white) !important;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.lockscreen_date_jacob{
    color: var(--white) !important;
    font-size: 14pt;
    font-weight: bold;
    text-shadow: 4px 4px 4px rgba(150,255,150,0.75);
}

.sms_notification_jacob{
    display: flex;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.75);
    padding-bottom: 10px;
    box-shadow: 4px 4px 4px rgba(150,255,150,0.85);
}

.jacob_sms{
    background: url("images/hacker.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
}

.sms_header_jacob{
    justify-content: space-between;
    background-color: rgba(10,10,10,0.75);
    color: var(--green);
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border: 3px solid gray;
    width: 350px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px;
    height: 80px;
}

.jacob_sms_message{
    background-color: rgba(150,255,150,0.75);
    margin-left: auto;
}

.sms_typing_jacob{
    display: flex;
    font-size: 10pt;
    height: 20px;
    padding: 5px;
    color: rgba(150,255,150,0.85) !important;
}

.sms_footer_jacob{
    display: flex;
    justify-content: space-between;
    background-color: rgba(10,10,10,0.75);
    color: var(--green);
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border: 3px solid gray;
    width: 350px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px 25px;
    height: 75px;
}

.sms_header_jacob h2,
.sms_header_jacob h3,
.sms_footer_jacob h2,
.sms_footer_jacob h3{
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/* PICKLES */

.pickles_smartphone{
    background: url("images/pickles_wallpaper.png");
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}

.lockscreen_clock_pickles{
    font-size: 25pt;
    font-weight: bold;
    text-shadow: 4px 4px 4px rgba(255,255,150,0.75);
}

.lockscreen_clock_pickles h2{
    color: var(--white) !important;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.lockscreen_date_pickles{
    color: var(--white) !important;
    font-size: 14pt;
    font-weight: bold;
    text-shadow: 4px 4px 4px rgba(255,255,150,0.75);
}

.sms_notification_pickles{
    display: flex;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.75);
    padding-bottom: 10px;
    box-shadow: 4px 4px 4px rgba(255,255,150,0.85);
}

.pickles_sms{
    background: url("images/pickles_wallpaper.png");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
}

.sms_header_pickles{
    justify-content: space-between;
    background-color: rgba(10,10,10,0.75);
    color: var(--yellow);
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border: 3px solid gray;
    width: 350px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px;
    height: 80px;
}

.pickles_sms_message{
    background-color: rgba(255,255,150,0.75);
    margin-left: auto;
}

.sms_typing_pickles{
    display: flex;
    font-size: 10pt;
    height: 20px;
    padding: 5px;
    color: rgba(255,255,150,0.85) !important;
}

.sms_footer_pickles{
    display: flex;
    justify-content: space-between;
    background-color: rgba(10,10,10,0.75);
    color: var(--yellow);
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border: 3px solid gray;
    width: 350px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px 25px;
    height: 75px;
}

.sms_header_pickles h2,
.sms_header_pickles h3,
.sms_footer_pickles h2,
.sms_footer_pickles h3{
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/*
___________           
\__    ___/__________ 
  |    | /  _ \_  __ \
  |    |(  <_> )  | \/
  |____| \____/|__|   
                      
*/

.tor_browser{
    border: 1px solid var(--tor);
    scroll-behavior: smooth;
}

/* TABS */

.tor_header_tabs{
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: var(--tor_dark);
    color: var(--white);
    margin-bottom: 2px;
    font-family: Arial, Helvetica, sans-serif;
}

.tor_header_tabs_left,
.tor_header_tabs_right{
    display: flex;
    margin-right: 5px;
}

.tor_header_tab{
    border-radius: 5px;
    display: flex;
    padding: 10px;
}

.tor_header_active_tab{
    background-color: var(--tor_light);
}

.tor_favicon{
    margin-right: 3px;
}

.tor_tab_text{
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 8pt;
    border-width: 0;
    border-right: 10px solid;
    border-image: linear-gradient(var(--tor_light),var(--tor_light)) 0 100%;
}

.tor_add_tab{
    margin-right: 8px;
    cursor: pointer;
    padding: 10px;
}

.tor_add_tab:hover{
    background-color: var(--tor);
}

.window_icon{
    font-size: 14pt;
    cursor: pointer;
    margin-top: 8px;
    margin-left: 8px;
}

/* NAV */

.tor_header_nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: var(--tor);
    color: var(--white);
    padding: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
}

.tor_nav_button:hover{
    background-color: var(--tor_light);
}

.tor_nav_url_bar{
    background-color: var(--tor_dark);
    color: var(--white);
    border-radius: 2px;
    text-overflow: ellipsis;
    width: 80%;
    display: flex;
    justify-content: space-between;
    padding: 4px;
    font-size: 11pt;
}

/* BOOKMARKS */

.tor_header_bookmarks_bar{
    display: flex;
    background-color: var(--tor);
    color: var(--white);
    padding: 5 10;
    border-bottom: 1px solid var(--tor_dark);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
}

.tor_bookmark{
    padding: 2px; 
    margin-right: 15px;
    cursor: pointer;
}

.tor_bookmark:hover{
    background-color: var(--tor_light);
}

/* TERMINAL */

.tor_browser{
    padding: 0 0.5% 0.5% 5%;
    margin: auto;
    background-color: var(--tor);
}

/*
________                                                                          
\______ \_______   ____ _____    _____   ______ ____ _____  ______   ____   ______
 |    |  \_  __ \_/ __ \\__  \  /     \ /  ___// ___\\__  \ \____ \_/ __ \ /  ___/
 |    `   \  | \/\  ___/ / __ \|  Y Y  \\___ \\  \___ / __ \|  |_> >  ___/ \___ \ 
/_______  /__|    \___  >____  /__|_|  /____  >\___  >____  /   __/ \___  >____  >
        \/            \/     \/      \/     \/     \/     \/|__|        \/     \/ 
*/

#dreamscape_in,
#dreamscape_out{
    width: 100%;
}

.dreamscape p .active::after{
    background: var(--white);
}

.dreamscape_text{
    animation: fadeIn 2s;
    color: var(--dreamscape) !important;
    font-family: 'Press Start 2P', cursive;
    line-height: 1.75em;
    margin: 0px;
    padding: 0px;
}

.objective{
    color: #4a86e8 !important;
}

.vcr{
    animation: fadeIn 1s;
    color: var(--white) !important;
    font-family: 'VT323', monospace;
    font-size: 24pt;
    font-stretch: extra-expanded;
    transform: scaleY(0.75);
}

.stretch{
    text-align:justify;
}

/*
  ________.__  .__  __         .__     
 /  _____/|  | |__|/  |_  ____ |  |__  
/   \  ___|  | |  \   __\/ ___\|  |  \ 
\    \_\  \  |_|  ||  | \  \___|   Y  \
 \______  /____/__||__|  \___  >___|  /
        \/                   \/     \/ 
*/

.mcp{
    font-family: 'Rubik Distressed', cursive;
    font-size: 16pt;
	color: var(--white);
}

.glitch{
    font-family: 'Rubik Glitch', cursive;
}

@keyframes cursor-blink {
  0% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}