* {
  font-family: "Darumadrop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
::selection {
    background-color:#cf0000;
    color:white;
}
::root {
    --barGrad: linear-gradient(90deg, rgba(240, 248, 255, 0.56) 0%, rgba(181, 219, 255, 1) 100%);
    --barBg: #F0F8FF;
}
#welcome {
    border:1px solid black;
    border-radius: 5px;
    width:fit-content;
    /* padding:6px; */
    padding-top:0px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color: aliceblue;
    margin:0px;
}

body {
    /* background-image: url('./images/wallpaper.jpg'); */
    background-color: #E5E5F7;
/* opacity: 0.8; */
background-image: linear-gradient(45deg, #f74444 25%, transparent 25%, transparent 75%, #f74444 50%), linear-gradient(-45deg, #f74444 25%, transparent 25%, transparent 75%, #f74444 75%);
background-size: 50px 50px;
    /* background-size: cover; (/
    overflow-x:hidden;
    /* height:100vh; */
}
#topBar {
    display:flex;
    justify-content: space-between;
    
/* background: #F0F8FF;
background: linear-gradient(90deg, rgba(240, 248, 255, 1) 0%, rgba(181, 219, 255, 1) 100%); */
    background: #F0F8FF;
    background: linear-gradient(90deg, rgba(240, 248, 255, .7) 0%, rgba(181, 219, 255, .7) 100%);
    padding: 0px 15px;
    border-radius:5px;

}
#welcomeclose  {
    background-color: #ac0000;
    width:13px;
    height:13px;
    margin-right:5px;
    border-radius:3px;
    margin:6px;
}
#welcomeclose, #welcomeheader, #welcomeminimize {
    display:inline-block;
    vertical-align: middle;
}
#welcomehead {
    margin:0px;
}
#winTop {
    background-color:#f74444;
}
#winCont {
    padding:6px;
}
#appIcon, #notesIcon, #galleryIcon {
    width: 50px;
    height:50px;
    background-color: blue; 
    background-size: cover;
    margin:auto;
}
#notesIcon {
    background-image: url("./images/notesIcon.png");
    background-color:transparent;
}
#galleryIcon {
    background-image: url("./images/galleryIcon.png");
    background-color:transparent;
}
#appIcon {
    background-image: url("./images/updatesIcon.png");
    background-color: transparent;
}
.app {
    width:75px;
    text-align:center;
    margin-top:10px;
}
.app p {
    padding:0px;
    margin:0px;
}
.app:focus {
    background-color:rgba(233, 226, 255, 0.27);
}
#appclose, #notesclose,#galleryclose  {
    cursor:pointer;
    background-color: rgb(172, 0, 0);
     width:13px;
    height:13px; 
    /* width:20px;
    height:20px; */
    margin-right:5px;
    border-radius:3px;
    margin:6px;
    text-align:center;
    vertical-align: text-top;
    
    display:flex;
    /* height:10px; */
}

#appclose, #appheader, #notesclose, #notesheader, #galleryclose, #galleryheader {
    display:inline-block;
    vertical-align: middle;
}
#apphead, #noteshead, #galleryhead {
    margin:0px;
}
#appheader, #notesheader, #galleryheader {
    cursor:grab;
}
#appTop, #notesTop, #galleryTop {
    background-color:#f74444;
}
#appCont, #notesCont,#galleryCont {
    padding:6px;
}
#app, #notes,#gallery {
    display:none;
    border:1px solid black;
    border-radius: 5px;
    width:fit-content;
    /* padding:6px; */
    padding-top:0px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color: aliceblue;
    margin:0px;
}
#desktopApps button {
    background-color:transparent;
    border:none;
    width:fit-content;
    border:1px dotted transparent;
}
#desktopApps button:hover {
    cursor:pointer;
    transition: 0.2s ease-in;
    background-color: rgba(227, 227, 227, 0.44);
}
#welcomeopen {
    margin:0px;
    vertical-align: middle;
    padding:16px 0px;
    width:80px;
    text-align:center;
    border-radius: 15px;
}
#welcomeopen:hover {
    
    cursor:pointer;
    transition: 0.2s ease-in;
    background-color: rgba(227, 227, 227, 1);
    
}
#desktopApps button:focus {
    border:1px dotted black;
}
.notesInput {
    width:75px;
    margin:0px 0px;
    display:flex;
}
#notesCont p {
    text-align:center;
}
.notesInput, #notesCont p {
    display:inline-block;
}
#notesCont, #countdownP {
    text-align: center;
    margin:auto;
}
#notes {
    width:355px;
}
#countdownP {
    font-size:25px;
}
.windowApp {
    resize:both;
}
#bottomBar {
    background-color: blue;
    background: #F0F8FF;
    /* padding:5px; */
background: linear-gradient(90deg, rgba(240, 248, 255, .70) 0%, rgba(181, 219, 255, .70) 100%);
    width:100%;
    height:50px;
    bottom:5px;
    left:0px;
    right:0px;
    position:absolute;
}
#bottomBar img {
    border:transparent transparent transparent transparent;
}
#welcomeminimize {
    width:13px;
    height:13px;
    border-radius: 3px;
    background-color:yellow;
    margin-right:5px;
}
span #appminimize {
    width:13px;
    height:13px;
    border-radius: 3px;
    background-color:yellow;
    margin-right:5px;   
}
#notesminimize {
    width:13px;
    height:13px;
    border-radius: 3px;
    background-color:yellow;
    margin-right:5px;   
}
#resetnotes {
    background-color:rgb(250, 63, 63);
    border:1px solid rgb(221, 8, 8);
    border-radius:2px;
    padding:1px 6px;
    height:21px;
}
#startnotes {
    background-color:rgb(63, 250, 88);
    border:1px solid rgb(63, 221, 8);
    border-radius:2px;
    padding:1px 6px;
    height:21px;
}
#notesTake {
    width: 333px;
    height:300px;
    border:none;
    resize:none;
    overflow-y:auto;
}
#notesTake:focus {
    outline:none;
}

#galleryImgEl {
    width:100px;
}
.bottomActive {
    /* border: blue 2px solid;
    border-color: transparent transparent blue transparent; */
    background-color: rgba(0, 146, 255, 0.44);
    background: #005291;
background: linear-gradient(0deg, rgba(0, 82, 145, 1) 0%, rgba(0, 82, 145, 1) 15%, rgba(0, 146, 255, 0.44) 15%, rgba(34, 152, 227, 0.44) 100%);
}
#galleryImagePath {
    margin:0px;
    margin-bottom:5px;
    text-align:center;
}
#appCont {
    max-width:247px;
    max-height:212px;
    overflow-y: scroll;
    overflow-wrap:break-word;
}