/* S E T T I N G S */
/*----------------------*/

:root {
    /*ch1 character colors*/
    --helen-color: #aa0505;
    --bosslady-color: #d1be51;
    /*--bosslady-color: #dfab42;*/
    --kit-color: #c5b974;
    --yourmom-color: #dfa9d8;
    --coworker-color: #ababd8;
    --waitress-color: #7f8db3;
    --kevinetc-color: #df7c42;

    /*other-font-colors*/
    --notesapp-color: #b5bb23;
}

/* TEXT SETTINGS */
/*----------------------*/
p {
    /*clock font*/
    color: #dadada;
    padding: 0 10px 0 0;
    font-size: small;
    font-family: 'Courier New', Courier, monospace;
}

h2 {
    font-family: 'Courier New', Courier, monospace;
    color: #dadada;
    font-weight: 500;
    background-color: #060607;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40vh;
}

/*TEXT WITHIN MAIN TEXTBOX*/
/*narration txt font*/
.txt-nar {
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    /*font-size indicates font size at its largest 
    (when screen is > 1800px)*/
    font-size: 2rem;
    color: #dadada;
    text-align: left;
    text-decoration: none;
    background-color: #060607;
    padding: 6px 2px 3px 5px;
    border-color: #dadada;
    border-width: 2px;
    border-style: solid;
    z-index: 2;
    /*trying to layer this under the notif icon hover, ugh*/
  }

.narration-box {
    margin-left: 20%;
    margin-bottom: 45vh;
    max-width: 50vw;
    opacity: .9;
}

#all-dialogue {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    overflow: hidden;
}

.active {
    display: inherit;
    visibility: visible;
}

.inactive {
    display: none;
    visibility: collapse;
}

.tooltip-box {
    display: none;
}

/*voicemail text align*/
.message-box {
    display: grid;
    grid-template-rows: auto fit-content;
    grid-template-columns: auto auto;
    align-content: center;
    text-align: right;
}

.container:hover .message-box {
    display: grid;
}


.dialog-box {
    display: grid;
    grid-template-rows: auto fit-content;
    grid-template-columns: auto auto;
    align-content: center;
}

.dialog-box > img {
    max-width: 4rem;
    padding: 2px 1rem 0 0;
    align-self: end;
}

/*ACTION SELECT OPTIONS*/
/*action select*/
.action-select:hover {
    /*color: #8d0908;*/
    color: #aa0505;
    cursor: pointer;
}

  /*prevent default link display settings for action-selection*/
  .txt-nar a:link {
    text-decoration: none;
    color: inherit;
  }

  .txt-nar a:visited {
    color: inherit;
  }

/*music notes*/
.music-note {
    position: absolute;
    font-size: 3rem;
    background-color: #060607;
    color: #dadada;
    border: none;
    font-family: 'Courier New', Courier, monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    background-color: #060607;
}

/*just dropping this here cus im lazy*/
/*iguana thought bubble settings*/
/* convert iguana(Romeo) color to white */
.color-invert {
    filter: invert(1);
    width: 10vw;
    height: auto;
    padding: .5rem .5rem 0 .5rem;
}

/* apply to iguana thought box. affects background transparency*/
.mask {
    mix-blend-mode: multiply;
}

#romeo-img {
    position: absolute;
    top: 40vh;
    right: 30vw;
    font-size: 3rem;
}

#romeo-img img {
    /*keep romeo from getting too smalllll*/
    min-height: 4rem;
    min-width:6rem;
}

.game-text {
    color: #dadada;
    background-color: #060607;
    font-family: 'Courier New', Courier, monospace;
    font-size: medium;
}

/*music notes montage graphic*/
#note1 {
    top: 20vh;
    left: 65vw;
}

#note2 {
    top: 29vh;
    left: 72vw;
}

@media (max-width: 1800px) {
    .dialog-box > img {
    max-width: 3rem;
    margin-right: 1rem;
    padding: .3rem 0 0 0;
    }
}


.container:hover > .tooltip-box {
    display: block;
    margin: auto;
}

/* add this class to items 
that should be automatically visible on page-load*/
.set-visible {
    display: block;
}

.visible {
    display: block;
    margin: auto;
}

/* add this class to items that should be pushed
to the left of the page*/
.set-left {
    margin-left: 0;
}

.text-left {
    text-align: left;
}

/* IMAGE SETTINGS */
/*----------------------*/
.gadget-img {
    width: 12rem;
    /*width at smallest*/
    max-width: 20rem;
    max-height: auto;
    padding: 1rem;
    transition: .2s;
    margin-left: 0;
}

@media (min-width: 500px) {
    .gadget-img {
        width: 17rem;
    }
}

@media (min-width: 768px) {
    .gadget-img {
        width: 20rem;
    }
}

/*currently only affects person icon in dialogue boxes*/
.icon {
    position: relative;
    /*sizing*/
    bottom: 3px;
    max-width: 4rem;
    padding: 2px 1rem 0 0;
    align-self: end;
}

.notif-alert {
    /*wip, we're gonna use this to indicate a task has been added to
    our character's tasklist*/
    position: relative;
    max-width: 2rem;
    align-self: flex-end;
    right: -1rem;
    bottom: -.7rem;
    /*
    background-color: #dadada7c;
    padding: .2px;
    border-radius: 1rem;
    */
}

#notifIcon-grid {
    display: grid;
    grid-template-rows: 1;
    grid-template-columns: 1;
    position: relative;
    right: 0;
    align-self: flex-end;
    z-index: 3;
}

#notifIcon-grid:hover {
    cursor: default;
}

.information {
    position: absolute;
    bottom: 1rem;
    left: -2rem;
    background-color: #060607;
    padding: 2px;
    cursor: default;
    display: none;
    opacity: 0;
    transition: .3s;
}

@media (min-width: 530px) {
    .information {
        left: 0;
        /*allow for cute little awkward 
        margin space once we have room to do so*/
    }
}

#notifIcon-grid:hover .information{
    display: block;
    opacity: 1;
}

#runner-flex {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
}

/*tasklist icon*/
#tasklist-flex {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-right: 3rem;
    bottom: 5px;
}

#tasklist-flex:hover {
    cursor: pointer;
}

#tasklist-flex:active{
    transform: scale(.97);
}

#hOff-notif {
   opacity: 1;
   z-index: 1;
   transition: .1s;
   grid-row: 1/1;
   grid-column: 1/1;
}

#hOff-notif:hover {
    opacity: 0;
}

.notif-alert-alt {
    max-width: 2rem;
    position: relative;
    right: -1rem;
    bottom: 0;
    align-self: flex-end;
    bottom: -.7rem;
    grid-row: 1/1;
    grid-column: 1/1;
}

#tasklist-flex:hover #hOff-notif {
    opacity: 0;
}

.tasklist {
    position: absolute;
    max-width: 2rem;
}

.tasklist-notif-alert {
    max-width: 1.6rem;
    position: absolute;
    right: -1rem;
    top: -.4rem;
}

/*TASKLIST THE BAND THE ALBUM*/
#tasklist-container {
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3rem);
    position: absolute;
    min-width: 10rem;
    min-height: 3rem;
    border-style: solid;
    border-width: 2px;
    border-color: #dadada;
    right: calc(2.5vw + 3.5rem);
    bottom: calc(5vh + 1rem);
    background-color: #060607;
    border-radius: .8rem;
}

#tasklist-container p {
    margin: .5rem 0 1rem 1rem;
}

#tasklist-container p:hover {
    font-weight: 600;
    cursor: pointer;
}

#tasklist-container p:nth-child(n+1) {
    border-width: 0 0 1px 0;
    border-style: solid;
    color: #dadada;
    display: inline-block;
}

.note {
    padding: 0 10px 0 0;
    font-size: small;
    font-family: 'Courier New', Courier, monospace;
    /*color: #05aa20;*/
    color: var(--notesapp-color);
}

.new-note {
    width: 12px;
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-left: 0;
}

/* CHARACTER COLORS CLASSING*/
/*characters listed in order of appearance*/
.lines-helen {
    border-color: var(--helen-color);
}

.lines-coworker {
    border-color: var(--coworker-color);
}

.lines-your-boss {
    border-color: var(--bosslady-color);
}

.lines-kit {
    border-color: var(--kit-color);
}

.lines-your-mom {
    border-color: var(--yourmom-color);
}

.lines-waitress {
    border-color: var(--waitress-color);
}
/*ch2*/
.lines-kevinetc {
    border-color: var(--kevinetc-color);
}

/* LINK SETTINGS */
/*----------------------*/
a:link {
    text-decoration: none;
}

@media (max-width: 1800px) {
    .txt-nar {
        /*smallest font size.*/
        font-size: 1.5rem;
    }
}

/* GOOGLE MATERIAL SYMBOLS */
/*-------------------------*/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}