.background {

    background-image: url(./images/Mart\ Wallpaper.png);

    background-size: cover;

    background-color: #77e6fc;

    font-family: Helvetica, Noto Sans, sans-serif;

    overflow: hidden;
}

.change-background {

    position: fixed;  
    top: 10px;           
    right: 10px;          
    z-index: 10;          

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

    min-width: 90px;
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;

    border: solid 1px rgba(0, 255, 255, 0.2);
    border-radius: 20px;

    background-color: rgba(0, 225, 255, 0.25);
    backdrop-filter: blur(5px);

    color: white;
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

    user-select: none;

    cursor: pointer;
}

.top-right-box p {
    margin: 0;
}

/*  |||||||
      Time
    |||||||  */

.time-container {

    position: fixed;         
    right: 25px;
    bottom: 25px;
    z-index: 10;

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

    min-width: 90px;          
    height: 100px;
    padding: 0 10px;
    box-sizing: border-box;

    border: solid 1px rgba(0, 255, 255, 0.2);
    border-radius: 20px;

    background-color: rgba(0, 225, 255, 0.25);   
    backdrop-filter: blur(5px);
}

.time-element {

    margin: 0;

    display: flex;
    flex-direction: column;   /* time on top, date underneath */

    text-align: center;

    color: white;
    font-size: 12px;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);   /* FIXED: white text is readable on the light wallpaper */

    user-select: none;
}

.app-container {

    position: fixed;
    bottom: 0;


    display: flex;
    justify-self: center;
    align-items: center;
    
    width: 1000px;
    height: 75px;


    margin-bottom: 10px;


    border: solid;
    border-radius: 25px;
    border-color: rgba(0, 255, 255, 0.2);


    background-color: rgba(0, 255, 255, 0.25);
    
    backdrop-filter: blur(5px);
}

/*  |||||||
    Welcome
    |||||||  */  

.welcome-open {

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

    height: 67px;
    width: 51px;

    margin-left: 10px;

    background-color: rgba(255, 0, 0, 0);
    color: #fff;

    cursor: pointer;
}

.welcome-app {

    display: block;

    border-style: solid;
    border-radius: 15px;
    border-color: black;
    border-width: 1px;

    height: 50px;
    width: 50px;

    object-fit: cover;

    user-select: none;
}

.welcome-app-name {

    margin-top: 2px;
    margin-bottom: 0px;

    font-size: 12px;
}

.welcome-window {

    position: absolute;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    display: flex;
    flex-direction: column;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border: solid;
    border-radius: 25px;
    border-color: rgba(0, 225, 255, 0.20);

    height: 535px;
    width: 750px;

    padding: 5px;

    background-color: rgba(0, 225, 255, 0.25);
    backdrop-filter: blur(5px);
    box-sizing: border-box;
}

.welcome-close {

    display: flex;

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

    border: solid;
    border-radius: 25px;
    border-width: 2px;
    border-color: black;

    height: 20px;
    width: 20px;

    margin: 5px;

    background-color: red;

    cursor: pointer;

    user-select: none;
}

.welcome-hide {

    display: flex;

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

    border: solid;
    border-radius: 25px;
    border-width: 2px;
    border-color: black;

    height: 20px;
    width: 20px;

    margin: 5px;
    margin-left: 0px;

    background-color: rgb(255, 255, 155);

    cursor: pointer;

    user-select: none;
}

.welcome-header {

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

    border-radius: 15px;

    height: 30px;
    width: 725px;

    padding: 1px;
    margin: 5px;

    background-color: #fff;
}

.welcome-content {

    border-radius: 20px;

    height: 470px;
    width: 725px;

    margin: 5px;

    background-color: #fff;

    z-index: 1;
}

.welcome-title {

    border-radius: 20px;

    padding: 10px;
    margin: 12px;

    color: #fff;

    background-color: #1682ca;
}

.welcome-subtitle {

    margin: 25px;
    margin-bottom: 15px;

    color: #000;
}

.welcome-text {

    margin: 40px;
    margin-top: 0px;
    margin-bottom: 15px;

    color: #000;

    line-height: 150%;
}

.welcome-image {

    display: block;

    border-radius: 25px;

    height: 258px;
    width: 344px;

    margin-left: auto;
    margin-right: auto;

    object-fit: cover;
}

/*  |||||||
     Notes
    |||||||  */

.notes-open {

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

    height: 67px;
    width: 50px;

    margin-left: 10px;

    background-color: rgba(255, 0, 0, 0);
    color: #fff;

    cursor: pointer;
}

.notes-app {

    display: block;

    border-style: solid;
    border-radius: 15px;
    border-color: black;
    border-width: 1px;

    height: 50px;
    width: 50px;

    object-fit: cover;

    user-select: none;
}

.notes-app-name {

    margin-top: 2px;
    margin-bottom: 0px;

    font-size: 12px;
}

.notes-window {

    position: absolute;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    display: flex;
    flex-direction: column;

    display: none;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border: solid;
    border-radius: 25px;
    border-color: rgba(0, 225, 255, 0.20);

    height: 500px;
    width: 538px;

    padding: 5px;

    background-color: rgba(0, 225, 255, 0.25);
    backdrop-filter: blur(5px);
    box-sizing: border-box;
}

.notes-header {

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

    border-radius: 15px;

    height: 30px;
    width: 510px;

    padding: 1px;
    margin: 5px;

    background-color: #fff;
}

.notes-close {

    display: flex;

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

    border: solid;
    border-radius: 25px;
    border-width: 2px;
    border-color: black;

    height: 20px;
    width: 20px;

    margin: 5px;

    background-color: red;

    cursor: pointer;

    user-select: none;
}

.notes-hide {

    display: flex;

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

    border: solid;
    border-radius: 25px;
    border-width: 2px;
    border-color: black;

    height: 20px;
    width: 20px;

    margin: 5px;
    margin-left: 0px;

    background-color: rgb(255, 255, 155);

    cursor: pointer;

    user-select: none;
}

.notes-container {

    display: flex;
    flex-direction: row;
}

.notes-content {

    position: relative;

    border-radius: 20px;

    height: 430px;
    width: 375px;

    margin: 5px;

    background-color: #fff;

    z-index: 1;

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

.note-tab {

    display: flex;
    flex-direction: column;
}

.side-bar {

    margin-top: 5px;
    margin-left: 6px;

    height: 430px;
    width: 125px;
    
    border-radius: 20px;

    background-color: rgb(255, 255, 255);
    
    backdrop-filter: blur(5px);

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

.add-note {

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

    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;

    height: 40px;
    width: 90px;

    border: solid;
    border-color: rgba(0, 240, 80, 0.2);
    border-radius: 20px;

    background-color: rgba(0, 255, 70, 0.7);
    
    cursor: pointer;
}