/* =========================================
BASIC RESET
========================================= */

{
box-sizing: border-box;
}

html,
body {
margin: 0;
padding: 0;

width: 200%;
height: 200%;

overflow: hidden;

background: black;

}

/* =========================================
GAME
========================================= */

#game {
position: fixed;

width: 100vw;
height: 100vh;

overflow: hidden;

background: black;

}

/* =========================================
BACKGROUND
========================================= */

#scene-background {
position: absolute;

inset: 0;

width: 100%;
height: 100%;

background-image: url("images/henryroom.png");

background-size: cover;
background-position: center;
background-repeat: no-repeat;

transition:
    opacity 0.35s ease,
    filter 0.35s ease;

}

#scene-background.transitioning {
opacity: 0;
filter: brightness(0);
}

/* =========================================
OBJECT CONTAINER
========================================= */

#objects {
position: absolute;

inset: 0;

width: 100%;
height: 100%;

z-index: 10;

}

/* =========================================
CLICKABLE OBJECTS
========================================= */

.interactable {
position: absolute;

display: block;

cursor: pointer;

user-select: none;

-webkit-user-drag: none;

transition:
    filter 0.15s ease,
    transform 0.15s ease;

}

.interactable:hover {
filter:
drop-shadow(0 0 2px white)
drop-shadow(0 0 5px white);

transform: scale(1.02);

}

/* =========================================
COMPUTER CURSOR
========================================= */

body.computer-mode {
cursor: url("computer-cursor.png"), auto;
}

body.computer-mode .interactable {
cursor: url("computer-cursor.png"), pointer;
}

/* =========================================
UI
========================================= */

#ui {
position: fixed;

inset: 0;

pointer-events: none;

z-index: 100;

}

.ui-button {
position: absolute;

padding: 8px 14px;

border: 1px solid white;

background: rgba(0, 0, 0, 0.75);

color: white;

font-family: monospace;

font-size: 13px;

cursor: pointer;

pointer-events: auto;

transition:
    background 0.15s ease,
    color 0.15s ease;

}

.ui-button:hover {
background: white;
color: black;
}

#notepad-button {
right: 20px;
bottom: 20px;
}

#back-button {
left: 20px;
bottom: 20px;
}

/* =========================================
HIDDEN
========================================= */

.hidden {
display: none !important;
}

/* =========================================
OVERLAYS
========================================= */

.overlay {
position: fixed;

inset: 0;

display: flex;

justify-content: center;

align-items: center;

background: rgba(0, 0, 0, 0.65);

z-index: 200;

animation: fadeIn 0.2s ease;

}

@keyframes fadeIn {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

/* =========================================
OBJECT WINDOW
========================================= */

#object-content {
position: relative;

max-width: 90vw;
max-height: 90vh;

display: flex;

justify-content: center;
align-items: center;

}

#object-image-container img {
display: block;

max-width: 85vw;
max-height: 80vh;

object-fit: contain;

}

/* =========================================
CLOSE BUTTON
========================================= */

.close-button {
position: absolute;

top: 10px;
right: 10px;

z-index: 20;

width: 30px;
height: 30px;

border: 1px solid white;

background: black;

color: white;

font-size: 20px;

cursor: pointer;

}

.close-button:hover {
background: white;
color: black;
}

/* =========================================
TRANSCRIPT BUTTON
========================================= */

.transcript-button {
position: absolute;

right: 15px;
bottom: 15px;

padding: 8px 12px;

border: 1px solid white;

background: rgba(0, 0, 0, 0.85);

color: white;

font-family: monospace;

cursor: pointer;

}

.transcript-button:hover {
background: white;
color: black;
}

/* =========================================
NOTEPAD
========================================= */

.notepad-window {
position: relative;

width: min(500px, 85vw);

max-height: 80vh;

overflow-y: auto;

padding: 35px;

border: 2px solid #ddd;

background:
    repeating-linear-gradient(
        to bottom,
        #eee 0px,
        #eee 24px,
        #aab9cc 25px
    );

color: #111;

font-family: monospace;

box-shadow:
    0 0 30px rgba(0, 0, 0, 0.8);

}

.notepad-window h2 {
margin-top: 0;

text-align: center;

letter-spacing: 5px;

}

.notepad-category {
margin-top: 25px;

font-weight: bold;

text-decoration: underline;

}

.notepad-item {
margin: 8px 0 8px 20px;
}

/* =========================================
TRANSCRIPT
========================================= */

.transcript-window {
position: relative;

width: min(650px, 85vw);

max-height: 80vh;

overflow-y: auto;

padding: 40px;

border: 1px solid white;

background: rgba(0, 0, 0, 0.95);

color: white;

font-family: monospace;

line-height: 1.7;

box-shadow:
    0 0 30px rgba(255,255,255,0.1);

}

.transcript-window h2 {
margin-top: 0;

letter-spacing: 4px;

}

/* =========================================
POLAROID 3D VIEWER
========================================= */

#polaroid-3d-view {
z-index: 300;
}

#polaroid-3d-view.hidden {
display: none !important;
pointer-events: none !important;
}

#polaroid-3d-view:not(.hidden) {
pointer-events: auto;
}

#polaroid-3d-content {
position: relative;

width: min(900px, 90vw);

height: min(750px, 85vh);

background: rgba(0, 0, 0, 0.95);

border: 1px solid white;

overflow: hidden;

}

#polaroid-model {
display: block;

width: 100%;
height: 100%;

min-width: 1px;
min-height: 1px;

background: transparent;

pointer-events: auto;

}

#polaroid-3d-description {
position: absolute;

left: 20px;
right: 20px;
bottom: 20px;

padding: 10px 14px;

background: rgba(0, 0, 0, 0.75);

border: 1px solid rgba(255, 255, 255, 0.35);

color: white;

font-family: monospace;

font-size: 13px;

line-height: 1.5;

pointer-events: none;

}

/* =========================================
SECOND 3D MODEL VIEWER
========================================= */

#second-3d-view {
z-index: 310;
}

#second-3d-view.hidden {
display: none !important;
pointer-events: none !important;
}

#second-3d-view:not(.hidden) {
pointer-events: auto;
}

#second-3d-content {
position: relative;

width: min(900px, 90vw);

height: min(750px, 85vh);

background: rgba(0, 0, 0, 0.95);

border: 1px solid white;

overflow: hidden;

}

#second-model {
display: block;

width: 100%;
height: 100%;

min-width: 1px;
min-height: 1px;

background: transparent;

pointer-events: auto;

}

#second-3d-description {
position: absolute;

left: 20px;
right: 20px;
bottom: 20px;

padding: 10px 14px;

background: rgba(0, 0, 0, 0.75);

border: 1px solid rgba(255, 255, 255, 0.35);

color: white;

font-family: monospace;

font-size: 13px;

line-height: 1.5;

pointer-events: none;

}

/* =========================================
POLAROID HOTSPOT
========================================= */

#polaroid-hotspot {
position: absolute;

left: 28.67%;
top: 48.09%;
width: 8.08%;

height: auto;

z-index: 400;

display: block;

border: none;
padding: 0;
margin: 0;

background: transparent;

cursor: pointer;

pointer-events: auto;

transform: none;

}

#polaroid-hotspot img {
display: block;

width: 100%;
height: auto;

pointer-events: none;

user-select: none;

-webkit-user-drag: none;

}

#polaroid-3d-content .close-button,
#second-3d-content .close-button {
z-index: 10;
}

/* =========================================
EDITOR PANEL
========================================= */

#editor-panel {
position: fixed;

top: 20px;
right: 20px;

width: 240px;

padding: 18px;

z-index: 500;

border: 1px solid #00ffcc;

background: rgba(0, 0, 0, 0.92);

color: #00ffcc;

font-family: monospace;

font-size: 13px;

box-shadow:
    0 0 15px rgba(0, 255, 204, 0.25);

}

#editor-panel.hidden {
display: none !important;
}

.editor-title {
margin-bottom: 15px;

color: white;

font-size: 16px;

font-weight: bold;

letter-spacing: 3px;

}

.editor-scene,
.editor-selected {
margin-bottom: 10px;
}

.editor-values {
margin: 15px 0;

padding: 10px;

border: 1px solid rgba(0, 255, 204, 0.4);

}

.editor-values div {
margin: 6px 0;
}

.editor-button {
display: block;

width: 100%;

margin-top: 8px;

padding: 8px;

border: 1px solid #00ffcc;

background: black;

color: #00ffcc;

font-family: monospace;

cursor: pointer;

}

.editor-button:hover {
background: #00ffcc;
color: black;
}

#editor-message {
min-height: 20px;

margin-top: 10px;

color: white;

}

.editor-help {
margin-top: 15px;

color: #aaa;

line-height: 1.6;

}

.editor-help hr {
border: 0;

border-top: 1px solid #333;

margin: 12px 0;

}

/* =========================================================
MESSENGER
========================================================= */

#messenger-overlay {
position: fixed;
inset: 0;

z-index: 600;

display: flex;

justify-content: center;
align-items: center;

background: rgba(0, 0, 0, 0.70);

}

#messenger {
width: 750px;
height: 560px;

max-width: 90vw;
max-height: 85vh;

background: white;

border: 2px solid #555;

box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.8);

display: flex;

flex-direction: column;

font-family:
    Tahoma,
    Arial,
    sans-serif;

}

#messenger-titlebar {
height: 32px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: space-between;

padding-left: 10px;

background:
    linear-gradient(
        #4d9be8,
        #176bc1
    );

color: white;

font-size: 14px;

font-weight: bold;

}

#messenger-close {
width: 35px;
height: 100%;

border: none;

background: transparent;

color: white;

font-size: 20px;

cursor: pointer;

}

#messenger-close:hover {
background: rgba(255, 255, 255, 0.2);
}

#messenger-main {
flex: 1;

min-height: 0;

display: flex;

}

#messenger-contacts {
width: 180px;

flex-shrink: 0;

display: flex;

flex-direction: column;

background: #f1f5fa;

border-right: 1px solid #bbb;

}

.messenger-section-title {
padding: 12px;

background: #dbeafa;

border-bottom: 1px solid #bbb;

color: #245b91;

font-weight: bold;

}

#contact-list {
flex: 1;

min-height: 0;

overflow-y: auto;

}

.messenger-contact {
height: 55px;

padding: 8px;

display: flex;

align-items: center;

gap: 8px;

cursor: pointer;

border-bottom: 1px solid #ddd;

}

.messenger-contact:hover {
background: #dcecff;
}

.messenger-contact.active {
background: #c4e0ff;
}

.messenger-contact img {
width: 32px;
height: 32px;

flex-shrink: 0;

object-fit: cover;

border: 1px solid #999;

}

.messenger-contact-info {
min-width: 0;
}

.messenger-contact-name {
font-weight: bold;
color: #333;
}

.messenger-contact-status {
margin-top: 3px;

font-size: 10px;

color: #777;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

#messenger-chat {
flex: 1;

min-width: 0;
min-height: 0;

display: flex;

flex-direction: column;

}

#messenger-profile {
height: 75px;

flex-shrink: 0;

padding: 10px;

display: flex;

align-items: center;

gap: 10px;

background:
    linear-gradient(
        135deg,
        #eef7ff,
        #d4ebff
    );

border-bottom: 1px solid #aaa;

}

#messenger-profile-picture {
width: 50px;
height: 50px;

object-fit: cover;

border: 2px solid white;

box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.4);

background: #ddd;

}

#messenger-contact-name {
font-size: 18px;

font-weight: bold;

color: #333;

}

#messenger-contact-status {
margin-top: 3px;

color: #777;

font-size: 12px;

}

#messenger-messages {
flex: 1;

min-height: 0;

padding: 15px;

overflow-y: auto;

background: white;

}

.messenger-welcome {
margin-top: 100px;

color: #888;

text-align: center;

font-size: 14px;

}

.messenger-message {
display: flex;

width: 100%;

margin-bottom: 12px;

}

.messenger-message.character {
justify-content: flex-start;
}

.messenger-message.player {
justify-content: flex-end;
}

.messenger-message-bubble {
max-width: 75%;

padding: 9px 12px;

border-radius: 12px;

font-size: 14px;

line-height: 1.35;

text-align: left;

overflow-wrap: anywhere;

}

.messenger-message.character
.messenger-message-bubble {
background: #f0d6e8;

border: 1px solid #d0aec3;

}

.messenger-message.player
.messenger-message-bubble {
background: #d5e8fa;

border: 1px solid #aac9e6;

}

#messenger-input-area {
height: 48px;

flex-shrink: 0;

padding: 7px;

display: flex;

gap: 6px;

background: #eee;

border-top: 1px solid #bbb;

}

#messenger-message-input {
flex: 1;

min-width: 0;

border: 1px solid #aaa;

padding: 7px;

font-family: inherit;

}

#messenger-message-input:focus {
outline: 2px solid #7db5e8;
}

#messenger-send {
width: 65px;

border: 1px solid #888;

background: #fafafa;

cursor: pointer;

}

#messenger-send:hover {
background: #ddd;
}

#messenger-messages::-webkit-scrollbar,
#contact-list::-webkit-scrollbar {
width: 10px;
}

#messenger-messages::-webkit-scrollbar-track,
#contact-list::-webkit-scrollbar-track {
background: #eee;
}

#messenger-messages::-webkit-scrollbar-thumb,
#contact-list::-webkit-scrollbar-thumb {
background: #aaa;

border: 2px solid #eee;

}

#messenger-messages::-webkit-scrollbar-thumb:hover,
#contact-list::-webkit-scrollbar-thumb:hover {
background: #888;
}

@media (max-width: 700px) {

#messenger {
    width: 95vw;
    height: 85vh;
}

#messenger-contacts {
    width: 150px;
}

}

/* =========================================================
MESSENGER DATE / NOTIFICATION
========================================================= */

.messenger-notification {
margin: 5px 0 15px;

color: #777;

font-family:
    Tahoma,
    Arial,
    sans-serif;

font-size: 14px;

text-align: center;

}

/* =========================================================
COMPUTER APPS
========================================================= */

.computer-app {
position: fixed;

left: 5%;
top: 5%;

width: 90%;
height: 90%;

z-index: 1000;

background: #c0c0c0;

font-family:
    Arial,
    Helvetica,
    sans-serif;

color: #111;

box-sizing: border-box;

}

.computer-app.hidden {
display: none !important;
}

/* =========================================================
TITLE BAR
========================================================= */

.app-titlebar {
height: 32px;

background:
    linear-gradient(
        to right,
        #000080,
        #1084d0
    );

color: white;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 6px;

box-sizing: border-box;

font-weight: bold;

font-size: 14px;

}

.app-titlebar button {
width: 24px;
height: 22px;

padding: 0;

background: #c0c0c0;

color: black;

border: 2px solid;

border-color:
    white
    #404040
    #404040
    white;

font-weight: bold;

cursor: pointer;

}

/* =========================================================
EMAIL
========================================================= */

.email-window {
width: 100%;
height: 100%;

display: flex;

flex-direction: column;

box-sizing: border-box;

border:
    2px solid #404040;

}

.email-layout {
flex: 1;

display: flex;

min-height: 0;

background: #ffffff;

}

.email-list {
width: 30%;

min-width: 180px;

overflow-y: auto;

background: #eeeeee;

border-right:
    1px solid #888;

}

.email-list-item {
padding: 10px;

border-bottom:
    1px solid #cccccc;

cursor: pointer;

background: #eeeeee;

}

.email-list-item:hover {
background: #dddddd;
}

.email-list-item.active {
background: #c8dff5;
}

.email-sender {
font-weight: bold;
font-size: 14px;
}

.email-subject {
margin-top: 4px;
font-size: 13px;
}

.email-date {
margin-top: 5px;

font-size: 11px;

color: #666;

}

.email-content {
flex: 1;

overflow-y: auto;

padding: 25px;

background: white;

}

.email-message-header {
padding-bottom: 15px;

border-bottom:
    1px solid #cccccc;

}

.email-message-header h2 {
margin-top: 0;
margin-bottom: 15px;
}

.email-message-header div {
margin: 5px 0;
font-size: 13px;
}

.email-message-body {
padding-top: 20px;

font-size: 14px;

line-height: 1.5;

}/* =========================================================
   INTERNET / FULL SCREEN BROWSER
========================================================= */

#internet-overlay {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 999999;

    background: #ffffff;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    overflow: hidden;
}

#internet-overlay.hidden {
    display: none !important;
}


/* =========================================================
   BROWSER WINDOW
========================================================= */

.internet-window {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   TAB BAR
   TABS ARE ABOVE THE URL BAR
========================================================= */

.browser-tabbar {
    width: 100%;

    height: 42px;
    min-height: 42px;

    display: flex;
    align-items: flex-end;

    background: #202124;

    padding: 0 8px;

    box-sizing: border-box;

    overflow: hidden;
}


/* Container generated by JS */

.browser-tabs {
    height: 100%;

    display: flex;
    align-items: flex-end;

    gap: 3px;

    flex: 1;

    overflow-x: auto;
    overflow-y: hidden;
}


/* Hide scrollbar */

.browser-tabs::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   INDIVIDUAL TAB
========================================================= */

.browser-tab {
    position: relative;

    height: 36px;

    min-width: 170px;
    max-width: 240px;

    flex-shrink: 0;

    display: flex;
    align-items: center;

    padding: 0 10px;

    border: none;

    border-radius: 8px 8px 0 0;

    background: #3c4043;

    color: #d8d8d8;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    transition:
        background 0.12s ease;
}

.browser-tab:hover {
    background: #4b4f52;
}

.browser-tab.active {
    background: #ffffff;

    color: #202124;
}


/* =========================================================
   TAB CONTENT
========================================================= */

.browser-tab-favicon {
    width: 22px;

    flex-shrink: 0;

    margin-right: 7px;

    font-size: 14px;

    text-align: center;
}

.browser-tab-title {
    flex: 1;

    min-width: 0;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   TAB CLOSE BUTTON
========================================================= */

.browser-tab-close {
    width: 23px;
    height: 23px;

    flex-shrink: 0;

    margin-left: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 4px;

    background: transparent;

    color: inherit;

    cursor: pointer;

    font-size: 15px;

    line-height: 1;
}

.browser-tab-close:hover {
    background: rgba(0, 0, 0, 0.12);
}


/* =========================================================
   NEW TAB BUTTON
========================================================= */

.browser-new-tab {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    margin-left: 4px;
    margin-bottom: 0;

    border: none;

    border-radius: 6px 6px 0 0;

    background: transparent;

    color: #ffffff;

    font-size: 23px;

    cursor: pointer;
}

.browser-new-tab:hover {
    background: #3c4043;
}


/* =========================================================
   ADDRESS BAR
========================================================= */

.internet-topbar {
    width: 100%;

    height: 52px;
    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 12px;

    box-sizing: border-box;

    background: #ffffff;

    border-bottom: 1px solid #dadce0;
}


/* =========================================================
   NAVIGATION CONTROLS
========================================================= */

.browser-controls {
    display: flex;
    align-items: center;

    gap: 2px;

    flex-shrink: 0;
}

.browser-control {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: #5f6368;

    font-size: 19px;

    cursor: pointer;
}

.browser-control:hover {
    background: #f1f3f4;
}


/* =========================================================
   URL / ADDRESS BAR
========================================================= */

.browser-address {
    height: 38px;

    flex: 1;

    min-width: 0;

    display: flex;
    align-items: center;

    padding: 0 15px;

    box-sizing: border-box;

    background: #f1f3f4;

    border: 1px solid transparent;

    border-radius: 20px;

    color: #3c4043;

    font-size: 14px;
}

.browser-address:hover {
    background: #e8eaed;
}

.browser-address-icon {
    margin-right: 9px;

    font-size: 13px;
}

.browser-address-text {
    min-width: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.internet-close {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: #5f6368;

    font-size: 25px;

    cursor: pointer;
}

.internet-close:hover {
    background: #f1f3f4;

    color: #202124;
}


/* =========================================================
   BROWSER CONTENT
========================================================= */

#browser-content {
    flex: 1;

    min-height: 0;

    width: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;
}


/* =========================================================
   GENERIC PAGE
========================================================= */

.browser-page {
    min-height: 100%;

    background: #ffffff;

    box-sizing: border-box;
}


/* =========================================================
   GOOGLE HOME PAGE
========================================================= */

.browser-home {
    min-height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 145px;

    box-sizing: border-box;

    background: #ffffff;
}


/* =========================================================
   GOOGLE LOGO
========================================================= */

.home-logo {
    margin-bottom: 30px;

    font-family: Arial, sans-serif;

    font-size: 64px;

    font-weight: 500;

    letter-spacing: -5px;

    user-select: none;
}

.home-logo .blue {
    color: #4285f4;
}

.home-logo .red {
    color: #ea4335;
}

.home-logo .yellow {
    color: #fbbc05;
}

.home-logo .green {
    color: #34a853;
}


/* =========================================================
   HOME SEARCH WRAPPER
========================================================= */

.home-search-wrapper {
    position: relative;

    width: min(620px, calc(100% - 50px));
}


/* =========================================================
   HOME SEARCH BAR
========================================================= */

.edge-home-search-container {
    width: 100%;
    height: 52px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dfe1e5;

    border-radius: 26px;

    box-shadow:
        0 1px 6px rgba(32, 33, 36, 0.12);

    transition:
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.edge-home-search-container:hover,
.edge-home-search-container:focus-within {
    border-color: transparent;

    box-shadow:
        0 1px 6px rgba(32, 33, 36, 0.22);
}


/* =========================================================
   HOME SEARCH INPUT
========================================================= */

.edge-home-search {
    flex: 1;

    width: 100%;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #202124;

    font-family: Arial, sans-serif;

    font-size: 16px;
}


/* =========================================================
   HOME SEARCH ICON
========================================================= */

.edge-search-button {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    background: transparent;

    color: #4285f4;

    cursor: pointer;

    font-size: 18px;
}


/* =========================================================
   SEARCH HISTORY DROPDOWN
========================================================= */

.search-dropdown {
    position: absolute;

    top: 59px;

    left: 0;
    right: 0;

    z-index: 1000;

    display: none;

    background: #ffffff;

    border: 1px solid #dadce0;

    border-radius: 0 0 12px 12px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15);

    overflow: hidden;
}

.search-dropdown.visible {
    display: block;
}


/* =========================================================
   PREVIOUS SEARCH
========================================================= */

.search-dropdown-item {
    min-height: 48px;

    display: flex;
    align-items: center;

    padding: 0 17px;

    box-sizing: border-box;

    color: #202124;

    font-size: 14px;

    cursor: pointer;
}

.search-dropdown-item:hover {
    background: #f1f3f4;
}

.search-dropdown-icon {
    width: 30px;

    flex-shrink: 0;

    color: #70757a;

    font-size: 15px;
}

.search-dropdown-text {
    flex: 1;

    min-width: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   GOOGLE RESULTS PAGE
========================================================= */

.google-page {
    min-height: 100%;

    background: #ffffff;
}


/* =========================================================
   GOOGLE RESULTS HEADER
========================================================= */

.google-header {
    height: 72px;

    display: flex;
    align-items: center;

    gap: 30px;

    padding: 0 35px;

    box-sizing: border-box;

    border-bottom: 1px solid #eeeeee;

    background: #ffffff;
}


/* =========================================================
   RESULTS LOGO
========================================================= */

.google-logo {
    flex-shrink: 0;

    font-family: Arial, sans-serif;

    font-size: 25px;

    font-weight: 500;

    letter-spacing: -2px;
}

.google-logo .blue {
    color: #4285f4;
}

.google-logo .red {
    color: #ea4335;
}

.google-logo .yellow {
    color: #fbbc05;
}

.google-logo .green {
    color: #34a853;
}


/* =========================================================
   RESULTS SEARCH BAR
========================================================= */

.google-search {
    position: relative;

    width: min(650px, 70vw);

    height: 42px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    box-sizing: border-box;

    border: 1px solid #dfe1e5;

    border-radius: 22px;

    box-shadow:
        0 1px 4px rgba(32, 33, 36, 0.12);
}

.google-search:focus-within {
    box-shadow:
        0 1px 6px rgba(32, 33, 36, 0.18);
}

.google-search input {
    flex: 1;

    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #202124;

    font-size: 15px;
}

.google-search-button {
    width: 32px;
    height: 32px;

    border: none;

    background: transparent;

    color: #4285f4;

    cursor: pointer;

    font-size: 16px;
}


/* =========================================================
   RESULTS AREA
========================================================= */

.google-results {
    width: min(720px, calc(100% - 100px));

    margin-left: 110px;

    padding: 25px 0 70px;

    box-sizing: border-box;
}


/* =========================================================
   RESULT COUNT
========================================================= */

.google-result-count {
    margin-bottom: 25px;

    color: #70757a;

    font-size: 13px;
}


/* =========================================================
   INDIVIDUAL RESULT
========================================================= */

.google-result {
    margin-bottom: 31px;
}


/* URL */

.google-result-url {
    margin-bottom: 4px;

    color: #202124;

    font-size: 13px;

    line-height: 1.4;
}


/* TITLE */

.google-result-title {
    margin-bottom: 5px;

    color: #1a0dab;

    font-size: 20px;

    line-height: 1.3;

    cursor: default;
}


/* DESCRIPTION */

.google-result-description {
    color: #4d5156;

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   RELATED SEARCHES
========================================================= */

.google-related {
    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid #dadce0;
}

.google-related-title {
    margin-bottom: 14px;

    color: #202124;

    font-size: 18px;

    font-weight: 400;
}

.google-related-item {
    padding: 9px 0;

    color: #1a0dab;

    font-size: 14px;

    cursor: default;
}


/* =========================================================
   SEARCH HISTORY PAGE
========================================================= */

.history-page {
    max-width: 900px;

    padding: 45px 60px;

    box-sizing: border-box;
}

.history-page h1 {
    margin: 0 0 8px;

    color: #202124;

    font-size: 28px;

    font-weight: 400;
}

.history-subtitle {
    margin-bottom: 30px;

    color: #70757a;

    font-size: 14px;
}

.history-entry {
    min-height: 58px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #eeeeee;

    cursor: default;
}

.history-entry:hover {
    background: #f8f9fa;
}

.history-entry-icon {
    width: 42px;

    flex-shrink: 0;

    color: #70757a;
}

.history-entry-text {
    flex: 1;

    color: #202124;

    font-size: 15px;
}

.history-entry-time {
    margin-left: 15px;

    color: #70757a;

    font-size: 12px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .browser-tab {
        min-width: 140px;
    }

    .browser-new-tab {
        display: none;
    }

    .browser-home {
        padding-top: 100px;
    }

    .home-logo {
        font-size: 50px;
    }

    .google-header {
        padding: 0 18px;

        gap: 15px;
    }

    .google-logo {
        display: none;
    }

    .google-search {
        width: 100%;
    }

    .google-results {
        width: calc(100% - 40px);

        margin-left: 20px;
    }

    .history-page {
        padding: 30px 25px;
    }

}/* =========================================================
   CNN-STYLE NEWS ARTICLE
========================================================= */

.news-page {
    min-height: 100%;

    background: #ffffff;

    color: #111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   TOP RED CNN-STYLE HEADER
========================================================= */

.news-header {
    width: 100%;

    background: #cc0000;

    color: white;

    box-sizing: border-box;
}


/* MAIN LOGO */

.news-logo {
    height: 72px;

    display: flex;
    align-items: center;

    padding-left: 42px;

    box-sizing: border-box;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 38px;

    font-weight: 900;

    letter-spacing: -2px;

    color: white;
}


/* =========================================================
   BLACK NAVIGATION BAR
========================================================= */

.news-nav {
    height: 42px;

    display: flex;
    align-items: center;

    gap: 28px;

    padding: 0 42px;

    box-sizing: border-box;

    background: #111111;

    color: white;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 0.3px;
}


.news-nav span {
    cursor: default;

    white-space: nowrap;
}


.news-nav span:hover {
    color: #cccccc;
}


/* =========================================================
   ARTICLE
========================================================= */

.news-article {
    width: min(1000px, calc(100% - 70px));

    margin: 0 auto;

    padding: 42px 0 100px;

    box-sizing: border-box;
}


/* =========================================================
   CATEGORY
========================================================= */

.news-category {
    display: inline-block;

    margin-bottom: 13px;

    padding-bottom: 6px;

    border-bottom: 4px solid #cc0000;

    color: #cc0000;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.5px;
}


/* =========================================================
   HEADLINE
========================================================= */

.news-headline {
    max-width: 950px;

    margin: 0;

    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(38px, 5vw, 64px);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -1.8px;
}


/* =========================================================
   SUBHEADLINE
========================================================= */

.news-subheadline {
    max-width: 820px;

    margin-top: 20px;

    color: #555555;

    font-size: 21px;

    font-weight: 400;

    line-height: 1.45;
}


/* =========================================================
   BYLINE / DATE
========================================================= */

.news-meta {
    margin-top: 25px;

    padding: 15px 0;

    border-top: 1px solid #dddddd;

    border-bottom: 1px solid #dddddd;

    color: #555555;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.news-hero-image {
    display: block;

    width: 100%;

    max-height: 560px;

    margin-top: 28px;

    object-fit: cover;

    background: #eeeeee;
}


/* =========================================================
   ARTICLE BODY
========================================================= */

.news-body {
    width: min(700px, 100%);

    margin: 35px auto 0;
}


.news-body p {
    margin: 0 0 25px;

    color: #222222;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;

    line-height: 1.75;
}


/* FIRST PARAGRAPH */

.news-body p:first-child {
    font-size: 20px;

    font-weight: 500;
}


/* =========================================================
   BREAKING NEWS ACCENT
========================================================= */

.news-page::before {
    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 5px;
    height: 100vh;

    background: #cc0000;

    pointer-events: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .news-logo {
        height: 58px;

        padding-left: 20px;

        font-size: 30px;
    }


    .news-nav {
        height: 38px;

        padding: 0 20px;

        gap: 18px;

        overflow-x: auto;

        font-size: 10px;
    }


    .news-article {
        width: calc(100% - 35px);

        padding-top: 30px;
    }


    .news-headline {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .news-subheadline {
        font-size: 17px;
    }


    .news-body {
        width: 100%;
    }


    .news-body p {
        font-size: 17px;

        line-height: 1.65;
    }


    .news-body p:first-child {
        font-size: 18px;
    }

}
/* =========================================================
   ITEM DESCRIPTION
========================================================= */

.description-box {
    position: fixed;

    width: min(650px, 80vw);

    padding: 15px 20px;

    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.92);

    border: 1px solid white;

    color: white;

    font-family: monospace;

    font-size: 20px;

    line-height: 1.5;

    text-align: center;

    z-index: 150;

    pointer-events: none;

    box-shadow:
        0 0 20px rgba(0, 0, 0, 0.8);
}

.description-box.hidden {
    display: none !important;
}

#description-text {
    margin: 0;
}/* =========================================================
   ITEM DESCRIPTION / VISUAL NOVEL DIALOGUE BOX
========================================================= */

.description-box {
    position: fixed;

    top: auto;
    left: 2vw;
    right: 2vw;
    bottom: 2vh;

    width: auto;
    height: 25vh;

    margin: 0;

    box-sizing: border-box;

    padding: 35px 45px;

    background: rgba(0, 0, 0, 0.92);

    border: 2px solid white;

    color: white;

    font-family: monospace;

    font-size: 30px;

    line-height: 1.6;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    z-index: 10000;

    pointer-events: none;

    box-shadow:
        0 0 25px rgba(0, 0, 0, 0.8);

    overflow-y: auto;
}


/* =========================================================
   DESCRIPTION TEXT
========================================================= */

#description-text {
    width: 100%;

    margin: 0;

    text-align: center;
}


/* =========================================================
   HIDDEN
========================================================= */

.description-box.hidden {
    display: none !important;
}


/* =========================================================
   JOURNAL / TRANSCRIPT LAYERING
========================================================= */

#journal-view {
    z-index: 200;
}

#transcript {
    z-index: 10000;
}

#transcript .transcript-window {
    position: relative;
    z-index: 10001;
}
/* =========================================================
   LETTER IMAGE
========================================================= */

#object-image-container img.letter-image {
    display: block;

    width: 90vw;
    max-width: 90vw;

    max-height: 90vh;

    object-fit: contain;
}