/* address book */
.address-list {
    height:310px;
    overflow-y:scroll;
    scrollbar-color:var(--maintxt) var(--accentbgpale);
    font-family: "pixelFJ8pt1", sans-serif;
}
.address-display {
    height:160px;
    background:var(--accentbgdull);
    padding:20px;
    border-bottom:2px solid var(--maintxt);
}

#address-display-picture {
    height:120px;
    width:120px;
    background:url("img/address/generic.png");
    background-size:100%;
    border:2px solid var(--maintxt);
    float:left;
    margin-right:20px;
}

#address-display-name{
    font-size:20px;
}

.address-display > div:not(:first-child) {
    color:#000;
}

.address-list-item {
    height:100px;
    background:var(--accentbgpale);
    border-bottom:2px solid var(--maintxt);
    border-right:2px solid var(--maintxt);
    display:flex;
}

div.address-list-item:nth-child(13) {
    height:100px;
    background:var(--accentbgpale);
    border:none;
    border-right:2px solid var(--maintxt);
    display:flex;
}

.address-list-item:hover {
    cursor: pointer;
}

.address-list-item-picture {
    margin:20px;
    height:60px;
    width:60px;
    background: url(img/address/generic.png);
    background-size:cover;
    background-repeat:no-repeat;
}

.address-list-item-name {
    border-left:2px solid var(--maintxt);
    width:350px;
    color:var(--maintxt);
    height:100px;
    padding:40px;
}

#address-display-number:hover {
    cursor: pointer;
}

#address-calling {
    position:absolute;
    width:200px;
    text-align:center;
    border:2px solid #000;
    background:var(--accentbgsuper);
    color:#000;
    padding:10px;
    font-size:20px;
    left:150px;
    top:200px;
}

/* calendar */
#calendar-title {
    width:350px;
    font-size:30px;
    margin:0 auto;
    padding:10px;
    text-align: center;
}

.calendar-days {
    width:350px;
    display:flex;
    margin:auto;
    background:var(--accentbg);
    border:2px solid #000;
    border-bottom:none;
    border-right:none;
}

.calendar-days > div {
    width:50px;
    text-align:center;
}

.calendar-month {
    width:350px;
    height:200px;
    position: absolute;
    left:80px;
    display:none;
}

.calendar-num-row {
    display:flex;
}

.calendar-num-row > div {
    width:50px;
    height:40px;
    border:var(--bordermain);
    border-right:none;
    border-bottom:none;
    background:#fff;
}

.calendar-num-row.row-override > div {
    border:var(--bordermain);
    border-right:none;
    border-bottom:none;
    background:#fff;
    height:25px;
}

.calendar-num-row.row-override > div.blank {
    background:none;
    border:none;
}

.calendar-num-row > div.event {
    background:var(--accentbg);
}

.calendar-num-row > div.event:hover {
    cursor:pointer;
}

.calendar-num-row > div.today {
    border:4px solid var(--accentbgdark);
}

.calendar-num-row > div.secret:hover {
    cursor:pointer;
}

.calendar-num-row > div.event:hover {
    cursor:pointer;
}

.calendar-num-row > div:nth-child(6) {
    color:var(--accentbg);
}

.calendar-num-row > div:nth-child(7) {
    color:var(--accentbgdark);
}

#calendar-back {
    position:absolute;
    bottom:60px;
    left:40px;
    height:50px;
    padding-top:8px;
    width:25px;
    border:var(--bordermain);
    background-color: var(--accentbgdull);
}

#calendar-next {
    position:absolute;
    bottom:60px;
    right:40px;
    height:50px;
    padding-top:8px;
    width:25px;
    text-align:right;
    border:var(--bordermain);
    background-color: var(--accentbgdull);
}

#calendar-back:hover, #calendar-next:hover {
    cursor: pointer;
}

#calendar-event-title {
    background:var(--accentbgdull);
}

#calendar-event-info {
    overflow-y:scroll;
    word-break:break-word;
    scrollbar-color: var(--maintxt) white;
    background:white;
}

.calendar-event-container {
    width:350px;
    position: absolute;
    left:80px;
    bottom:20px;
    color:#000;
}

#calendar-event-title {
    padding:5px;
    min-height:30px;
    border-left:var(--bordermain);
    border-right:var(--bordermain);
    border-top:var(--bordermain);
    border-bottom:var(--bordermain);
}

#calendar-event-info {
    border-left:var(--bordermain);
    border-right:var(--bordermain);
    border-bottom:var(--bordermain);
    padding:5px;
    height:60px;
}

/* clock */
.clock-face {
    width:300px;
    height:300px;
    margin:40px auto 20px;
    border-radius:100%;
    background:url('img/clock/clockwork.png');
    background-size:320px;
    background-position:center;
    border:var(--bordermain);
}

.clock-face > div:not(:last-child) {
    width:300px;
    height:12px;
    position:absolute;
    top:184px;
}

#clock-hand-hour > div {
    margin-left:150px;
    width:80px;
    height:12px;
    background:url('img/clock/hour.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
}

#clock-hand-minute > div {
    margin-left:150px;
    width:135px;
    height:12px;
    background:url('img/clock/min.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
}

#clock-hand-second {top:188px;height:4px;}
#clock-hand-second > div {
    margin-left:150px;
    width:140px;
    height:4px;
    background-color:var(--accentbgdark);
}

.clock-circle {
    width:20px;
    height:20px;
    position:absolute;
    background:#000;
    border-radius:100%;
    margin-top:140px;
    margin-left:140px;
}

#clock-numbers {
    display:flex;
    justify-content:center;
}

#clock-numbers-hours, #clock-numbers-minutes, #clock-numbers-seconds {
    font-size:30px;
    width:70px;
    height:60px;
    background:var(--accentbgdull);
    text-align:center;
    border:var(--bordermain);
    padding:5px;
}

#clock-set {
    position: absolute;
    font-size: 30px;
    right:50px;
    top:40px;
    background:var(--accentbg);
    width:55px;
    height:55px;
    text-align:center;
    border:var(--bordermain);
}

#clock-set:hover {
    cursor:pointer;
    background:var(--accentbgsuper);
}

.clock-numbers-set {
    width:20px;
    font-size:20px;
}

.clock-numbers-set > div {
    height:30px;
    background:#b5b8b6;
    color:rgba(0,0,0,0.5);
}

#clock-numbers.active > .clock-numbers-set > div {
    color:var(--maintxt);
    background:var(--accentbg);
}
#clock-numbers.active > .clock-numbers-set > div:hover {
    cursor:pointer;
}

/* email */
.email-list {
    height:170px;
    background:var(--accentbgpale);
}

.email-list {
    padding:5px;
    overflow-y:scroll;
    scrollbar-color: var(--maintxt) var(--accentbgpale);
    padding-right:5px;
    border-bottom:#000 2px solid;
}

.email-list > div:last-child{
    border-bottom:0px transparent solid;
}

.email-panel {
    height:300px;
    background:white;
}

#email-panel-info {
    padding:5px;
    height:100px;
    border-bottom:#000 2px solid;
    background:var(--accentbgdull);
    font-size:14px;
}

#email-panel-email {
    padding:5px;
    overflow-y:scroll;
    scrollbar-color: var(--maintxt) white;
    height:200px;
}

.email-list {
    margin:0;
}

.email-list-item {
    height:50px;
    border-bottom:var(--bordermain);
    display:flex;
    counter-increment: counterName;
}

.email-list-item::before {
    content:counter(counterName);
    padding-right:30px;
    width:10px;
}

.email-list-item-info {
    width:350px;
}

.email-list-item-info:hover {
    cursor: pointer;
}

.email-list-item-info > div {
    height:20px;
}

.email-list-item-flag-container {
    padding-top:10px;
}

.email-list-item-flag {
    display:flex;
    justify-content:center;
}

.email-list-item-flag > div {
    width:30px;
    height:30px;
    border:var(--bordermain);
    text-align:center;
    margin-right:5px;
}

.email-list-item-flag > div:hover {
    cursor: pointer;
    background:var(--accentbgdull)
}

.email-list-item-flag > div.on {
    background:var(--accentbg);
}

.email-list-item-flag > div:last-child {
    margin-right:0;
}

#email-panel-info-from::before {
    content:"from: ";
}

#email-panel-info-subject::before {
    content:"subject: ";
}

#email-panel-info-sent::before {
    content:"sent: ";
}

/* todo list */
#todo-list {
    overflow-y:scroll;
    height:470px;
    scrollbar-color:var(--maintxt) var(--accentbgpale);
}

:focus {
    outline:4px solid var(--accentbgsuper);
}

.todo-list-item {
    height: 80px;
    border-bottom:#000 2px solid;
    display:flex;
}

.todo-list-item > div:nth-child(1) {
    width:80px;
    height:80px;
    border-right:2px solid #000;
}

div.todo-list-item:nth-child(12) {
    border-bottom:none;
}

.todo-list-item-checkbox > div {
    width:40px;
    height:40px;
    margin:20px;
    background:white;
    border:var(--bordermain);
}

.todo-list-item-checkbox > div.done {
    background:url('img/todo/check.png') white;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.todo-list-item-checkbox > div:hover {
    cursor: pointer;
}

.todo-list-item-text {
    width:300px;
    border-right:2px solid #000;
    padding: 5px;
}

.todo-list-item-importance {
    width:80px;
    height:80px;
    border-right:2px solid #000;
}

.todo-list-item-importance > div {
    width:50px;
    height:50px;
    margin:15px;
    background-size:100%;
}

.todo-list-item-importance.none > div {background-image:url("img/todo/none.png");}
.todo-list-item-importance.low  > div{background-image:url("img/todo/low.png");}
.todo-list-item-importance.med  > div{background-image:url("img/todo/med.png");}
.todo-list-item-importance.high > div {background-image:url("img/todo/high.png");}
.todo-list-item-importance.veryhigh > div {background-image:url("img/todo/veryhigh.png");}

.todo-list-item-move {
    height:80px;
    width:40px;
}

.todo-list-item-move > div {
    height:40px;
    text-align:center;
}

.todo-list-item-move > div:hover {
    cursor: pointer;
}

/* web browser */
.webbrowser-searchbar-container {
    display:flex;
    height:40px;
    border-bottom:var(--bordermain);
}

#webbrowser-searchbar {
    font-family: "pixelFJ8pt1";
    font-size:10px;
    width:360px;
    border-right:var(--bordermain);
    border-left:var(--bordermain);
    border-bottom:0px transparent solid;
    border-top:0px transparent solid;
}

#webbrowser-searchbar-submit, #webbrowser-searchbar-home {
    width:75px;
    height:100%;
    background:var(--accentbgdull);
    text-align:center;
    padding-top:5px;
}

#webbrowser-searchbar-submit{
    border-right:var(--bordermain);
}

#webbrowser-searchbar-home{
    border-left:var(--bordermain);
}

#webbrowser-searchbar-submit:hover, #webbrowser-searchbar-home:hover {
    cursor: pointer;
}

.webbrowser-page {
    width:100%;
    height:430px;
    position:absolute;
}

#webbrowser-page-home {
    background:white;
    font-family:'Microsoft Sans Serif', sans-serif;
    overflow-y:scroll;
    scrollbar-color: black var(--accentbgdull);
}

#webbrowser-page-home-topbar{
    width:100%;
    height:100px;
    padding-left:10px;
    background:url(img/browser/tile.png);
}

.webbrowser-page-home-gradient{
    height:20px;
    width:100%;
   background: linear-gradient(90deg,rgba(24, 79, 168, 1) 0%, rgba(0, 223, 227, 1) 73%, rgba(255, 255, 255, 1) 100%);
}

#webbrowser-page-home-logo{
    width:200px;
    height:100px;
    background:url(img/browser/techstack.png);
    filter:grayscale(100%);
}

#webbrowser-page-home-text{
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:20px;
}

#webbrowser-page-404 {
    background:var(--accentbgdark);
    color:#fff;
    padding:40px;
    text-align:center;
}
#webbrowser-page-secret {
    background:#000;
    color:#fff;
    padding:40px;
    text-align:center;
    font-size:24px;
}

/* gallery */

#gallery-frame{
    padding:15px;
    width:350px;
    height:350px;
    margin:auto;
    background:url('img/gallery/frame.png');
    background-size:contain;
    background-repeat:no-repeat;
}

#gallery-image {
    background-image:url("img/gallery/0.png");
    background-size:100% 100%;
    width:250px;
    height:280px;
    margin:auto;
    margin-top:20px;
    border:var(--bordermain);
}

.gallery-control-container {
    display:flex;
    justify-content: center;
    margin-top:20px;
}

.gallery-control-container > div {
    margin-right:20px;
}

#gallery-control-left{
    background:url('img/gallery/back.png') var(--accentbgdull);
    background-size:100%;
    background-position:center;
    background-repeat:no-repeat;
    width:40px;
    height:40px;
    border:var(--bordermain);
}

#gallery-control-right{
    background:url('img/gallery/next.png') var(--accentbgdull);
    background-size:100%;
    background-position:center;
    background-repeat:no-repeat;
    width:40px;
    height:40px;
    border:var(--bordermain);
}

#gallery-control-invert{
    background:url('img/gallery/invert.png') var(--accentbgdull);
    background-size:30px;
    background-position:center;
    background-repeat:no-repeat;
    width:40px;
    height:40px;
    border:var(--bordermain);
}


.gallery-control-container > div:hover {
    cursor:pointer;
}

.gallery-control-container > div:last-child {
    margin-right:0;
}

#gallery-title {
    text-align:center;
    margin-top:20px;
}

/* music player */
.music-container {
    margin-top:40px;
}

#music-graphic {
    width:100px;
    height:100px;
    margin:20px auto 20px;
    background-image:url(img/musicplayer/dance.png);
    background-size:100%;
    background-position:center center;
    background-repeat:no-repeat
}

#music-graphic.playing {
    background-image:url(img/musicplayer/dance.gif);
}

.music-player {
    display:flex;
    justify-content: center;
    gap:20px;
}

.music-player > div {
    font-size:30px;
    border:var(--bordermain);
    width:50px;
    height:50px;
    text-align:center;
    line-height:1.2;
    background:var(--accentbg);
}


.music-player > div:hover {
    cursor:pointer;
    background:var(--accentbgsuper);
}

.music-player > div:last-child {
    margin-right:0;
}

#music-list {
    margin:20px auto;
    border:var(--bordermain);
    height:240px;
    width:400px;
    overflow-y: scroll;
    scrollbar-color: var(--maintxt) var(--accentbgpale);
}


#music-list > div {
    margin-top:0;
    border-bottom:2px solid #000;
    counter-increment: musicCounter;
    height:50px;
    line-height: 3;
    background:#fff;
}

#music-list > div.playing {
    background:var(--accentbg);
}

#music-list > div:last-child {
    border-bottom:none;
}

#music-list > div:hover {
    cursor:pointer;
}

#music-list > div::before {
    content:counter(musicCounter);
    display:inline-block;
    width:50px;
    height:50px;
    margin-right:20px;
    border-right:2px solid #000;
    text-align:center;
    background:var(--accentbg);
}

#music-list > div.playing::before {
    background:var(--accentbgdark);
}


/* scribble pad */
#scribble-canvas {
    background:#fff;
    border:var(--bordermain);
    margin-right:20px;
}

#scribble-canvas:hover {
    cursor:crosshair;
}

.scribble-container {
    display:flex;
    justify-content: center;
    margin-top:40px;
}

#scribble-colour-container {
    display:flex;
    justify-content: center;
    margin:12px 0;
    border:var(--bordermain);
}

.scribble-colour {
    width:50px;
    height:50px;
}

.scribble-colour:hover {
    cursor: pointer;
}

.scribble-palette {
    border:var(--bordermain);
    background-color:var(--accentbgpale);
    padding:3px;
    margin-bottom:10px;
    text-align:center;
}

.scribble-palette:hover {
    background-color:var(--accentbg);
    cursor: pointer;
}

/* map */
#map-container {
    width:350px;
    height:300px;
    margin:40px auto 20px;
    overflow:hidden;
    border:var(--bordermain)
}

#map-background {
    width:2000px;
    height:1500px;
    background:url("img/map/map.png");
    overflow:hidden;
}

#map-secret {
    height: 54px;
    width: 51px;
    margin-top: 707px;
    margin-left: 395px;
}

#map-secret:hover {
    cursor: pointer;
}

.map-control-container {
    display:flex;
    justify-content:center;
}

.map-control-container > div {
    width:50px;
    height:50px;
    background:var(--accentbgdull);
    border:var(--bordermain);
    margin-right:10px;
    text-align:center;
    padding-top:8px;
}

.map-control-container > div:hover {
    cursor:pointer;
}

.map-control-container > div:last-child {
    margin-right:0;
}

/* security */
#security-main {
    margin:40px auto;
    width:200px;
    height:200px;
    background-size:100% 100%;
    background-image:url("img/secret/safe.png");
}

#security-main:hover {
    cursor: pointer;
}

#security-main-unlocked {
    width:225px;
    display:none;
    margin:40px auto;
}

#security-code {
    width:200px;
    text-align:center;
    border:2px solid #000;
    background:var(--accentbgsuper);
    color:#000;
    padding:10px;
    font-size:20px;
    margin:120px auto 106px;

    display:none;
}

.security-main-split {
    background-image:url("img/secret/safe.png");
    width:100px;
    height:200px;
    background-size:200% 100%;
}

.security-main-split:nth-child(1) {
    margin-right:25px;
}
.security-main-split:nth-child(2) {
    background-position:right;
}

.security-secrets-line1 > div, .security-secrets-line2 > div {
    width:50px;
    height:50px;
    padding:10px;
    background-size:50%;
    background-repeat:no-repeat;
    background-image:url("img/secret/lock.png");
    background-position:50%;
    margin-right:20px;
    background-color:#fff;
    border:var(--bordermain);
}

.security-secrets-line1 > div:last-child, .security-secrets-line2 > div:last-child {
    margin-right:0;
}

.security-secrets-line1, .security-secrets-line2 {
    display:flex;
    justify-content: center;
    margin-top:20px;
}

.security-secrets-line1 > div.unlocked, .security-secrets-line2 > div.unlocked {
    background-image:url("img/secret/unlock.png");
}

#security-code {

}