@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/*variables*/
:root {

    --bg: #1F1F1F;
    --txtbox_bg: #777777;
    --txtbox_border: #4E4E4E;
    --main: #FF7F11;
    --main_two: #C76715;
    --main_three: #8F4F18;
    --accent: #A362DC;
    --accent_two: #8252AD;
    --accent_three: #61417E;
    --workspace_bg: #2c2c2c;
    --text_colour: #000000;
    --text_placeholder_colour: rgba(0, 0, 0, 0.5);
    --scrollbar_track: #393939;
    --scrollbar_thumb: #525252;
    --scrollbar_thumb_active: #696969;
    --theme_dropdown_bg: #000000;
    --msc: #8a8a8a;


}
/*scrollbar*/
::-webkit-scrollbar {

    width: 0.75vw;

}

::-webkit-scrollbar-track {

    background-color: transparent;
    border-radius: 0.75vw;

}

::-webkit-scrollbar-thumb {

    background-color: var(--scrollbar_thumb);
    border-radius: 0.75vw;

}

::-webkit-scrollbar-thumb:active {

    background-color: var(--scrollbar_thumb_active);

}
/*default styles*/
*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    transition: all 250ms ease-in-out;

}

a{

    text-decoration: none;

}
/*fixes the icons having a delayed transition*/
i {

    transition: none;

}
/*background colour*/
body {

    background-color: var(--bg);

}
/*container (everything) class styles*/
.container {

    background-color: var(--bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 10%;
    color: var(--main);

}
/*logo styles*/
.logo {

    height: 12.638vw;
    max-height: 136px;
    width: 40vw;
    max-width: 200px;

    background-image: url(../images/prjctNotes.png);
    background-repeat: no-repeat;
    background-size: contain;

}
/*nav bar and its list tags' styles*/
nav {

    width: 100%;

}

nav ul {

    text-align: right;

}

nav li{

    display: inline-block;

}
/*themes and log in button styles*/
.themes_img, .log_in_img {

    width: min(11.5vw, 125px);
    height: min(3.84vw, 41.5px);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;

}

.themes_img {

    background-image: url(../images/ThemesOrange.png);
    margin-right: 5vw;

}

.log_in_img {

    margin-right: 1vw;
    background-image: url(../images/LogInOrange.png);

}

.logged_in_as {

    background-color: var(--msc);
    color: var(--text_colour);
    width: max-content;
    position: absolute;
    top: 1vh;
    right: calc(10% + 1vw + min(11.5vw, 125px)/2);
    transform: translateX(50%);
    white-space: nowrap;
    height: min(2vw, 22px);
    border-radius: 1vw;
    padding-inline: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: min(1vw, 16px);
    opacity: 0;
    pointer-events: none;
    transition: all 250ms ease-in-out;

}

.logged-in-as-transition {

    opacity: 1;
    pointer-events: auto;

}
/*textbox styles
.textbox {

    background-color: var(--txtbox_bg);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 20px;
    resize: none;
    padding: 2% 2%;
    margin: 0px 17.5%;
    width: calc(100% - 35%);
    height: calc(75vh);
    border-width: 8px;
    border-radius: 4px;
    border-color: var(--txtbox_border);
    outline: none;

}*/

.workspace {

    width: calc(100% - 20%);
    height: max(75vh, 340px);
    border-radius: 0.75vw;
    margin: 0% 10%;
    margin-bottom: calc(8vh);
    background-color: var(--workspace_bg);
    padding: 0.75vw;
    display: flex;

}

.sidebar {

    position: relative;
    background-color: var(--scrollbar_track);
    width: min(5%, 36px);
    height: calc(100%);
    border-radius: min(0.75vw, 8px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.sidebar_buttons_top > div:first-child {

    font-size: min(2.2vw, 20px);

}

.sidebar_buttons_top > div, .github_icon {

    display: flex;
    justify-content: center;
    font-size: min(2.2vw, 24px);
    color: var(--main);

    transition: all 0ms;

}

.sidebar_buttons_top > div:not(:first-child) {

    margin-top: min(0.75vw, 8px);

}

.sidebar_buttons_top > div:nth-child(2) {

    border-top: 1px solid var(--main_three);

}

.sidebar_buttons_top > div > i {

    margin-top: min(0.75vw, 8px);
    cursor: pointer;
    display: flex;

}

.sidebar_buttons_bottom {

    margin-bottom: min(0.75vw, 8px);

}

.sidebar_buttons_bottom > div > a > i{

    display: flex;
    justify-content: center;
    font-size: min(2.2vw, 22px);

}

.github_icon > a > i {

    margin-top: min(0.75vw, 8px);
    display: flex;
    color: var(--main);

}

.sidebar_buttons_top > div::before, .github_icon::before {

    content: attr(data-tooltip);

    font-size: min(1vw, 16px);
    position: absolute;
    font-weight: bolder;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    padding: 10% 30%;
    margin-bottom: 0px;
    height: fit-content;
    width: max-content;
    border-radius: calc(5vw + 10px);
    transform: translateY(-100%);
    color: var(--text_colour);
    background-color: var(--msc);
    pointer-events: none;
    opacity: 0;
    transition: all 250ms ease-in-out;
    transition-delay: 0.5s;


}

.sidebar_buttons_top > div:hover::before, .github_icon:hover::before {

    opacity: 1;

}

.sidebar_buttons_top > div:not(:hover):before, .github_icon:not(:hover)::before {

    transition-delay: 0s;
    opacity: 0;

}

/*.add_note_btn {

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

}

.add_note_btn i {

    font-size: 2vw;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--main);

}

.github_icon {

    position: absolute;
    bottom: 0.75vw;
    display: flex;
    justify-content: center;
    align-items: center;

}

.github_icon a i {

    font-size: 2vw;

}

.github_icon a, a:visited {

    color: var(--main);
    transition: all 250ms ease-in-out;

}

.github_icon::before, .add_note_btn::before {

    --scale: 0;

    content: attr(data-tooltip);
    font-size: 1vw;
    font-weight: bolder;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    padding: 10% 30%;
    height: fit-content;
    width: max-content;
    border-radius: calc(5vw + 10px);
    transform: translateY(-100%);
    color: var(--text_colour);
    background-color: var(--msc);

    transform: scale(var(--scale));
    transition: all 250ms ease-in-out;
    transform-origin: bottom center;

}

.add_note_btn::before {

    bottom: 100%;

}

.github_icon::before {

    bottom: 115%;

}

.github_icon:hover::before, .add_note_btn:hover::before{

    --scale: 1;

}*/

.content {

    overflow-y: scroll;
    height: 100%;
    width: 100%;
    padding: 0.65vw 2vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min(15vw, 200px);
    grid-gap: 2vw;
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    grid-auto-rows: 200px;*/

}

@media only screen and (min-width: 1500px) {

    .content {

        grid-template-columns: repeat(4, 1fr);

    }

}

.content::-webkit-scrollbar-track {

    background-color: var(--scrollbar_track);

}

.note {

    background-color: var(--main);
    color: var(--text_colour);
    padding: 5%;
    border-radius: min(0.75vw, 8px);
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-auto-rows: 20%;
    align-items: center;
    /*width: 200px;
    height: 200px;
    margin: auto;*/

}

.note_title {

    height: 100%;
    width: 100%;
    font-size: min(2vw, 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    outline: none;
    border-bottom: 0.125vw solid var(--bg);

    grid-column-start: 1;
    grid-column-end: 5;

}

.note_close{
    
    padding-left: 82.5%;
    height: 100%;
    width: calc(100% + 5%);
    /*font-size: 3vw;
    line-height: 20px;
    padding-bottom: 0.75vw;
    text-align: end;
    margin-left: 2.54vw;
    cursor: pointer;*/

}

.note_close > i {

    color: var(--bg);
    font-size: min(1.5vw, 18px);
    line-height: 80%;
    cursor: pointer;

}

.note_content {

    height: 100%;
    width: 100%;
    margin-top: 5%;
    font-size: min(1.25vw, 16px);
    overflow-y: scroll;
    outline: none;

    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 6;

}

.note_content::-webkit-scrollbar {

    width: 0.5vw;

}

.note_content::-webkit-scrollbar-track {

    background-color: var(--main_two);

}

.note_content::-webkit-scrollbar-thumb {

    background-color: var(--bg);

}

.note_title[placeholder]:empty:before {

    content: attr(placeholder);
    color: var(--text_placeholder_colour); 

}

.note_content[placeholder]:empty:before {
    content: attr(placeholder);
    color: var(--text_placeholder_colour); 
}

.note_title[placeholder]:empty:focus::before, .note_content[placeholder]:empty:focus::before {
    content: "";
}

/*dropdown that is on 'themes' buttons's styles*/
.dropdown {

    position: relative;

}

.dropdown_block {

    position: absolute;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    width: calc(11.5vw);
    max-width: 125px;
    height: 175px;
    background-color: var(--theme_dropdown_bg);
    margin-top: 10px;
    /*border-radius: 10px;*/
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    overflow:hidden;
    clip-path: polygon(0 0, 85% 0, 100% 20px, 100% 100%, 100% 100%, 15% 100%, 0 155px, 0 0);
    transition: all 250ms ease-in-out;

}

.open-dropdown-block {

    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;

}
/*for what is inside the dropdown*/
.theme_container {

    width: calc(100% - 20px);
    margin-left: 10px;
    height: calc(100% - 40px);
    margin-top: 5px;
    background-color: var(--theme_dropdown_bg);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0px;

}

.close_btn_theme_dropdown {

    position: absolute;
    top: 0;
    width: 100%;
    background-color: var(--accent);
    color: white;
    text-align: center;
    vertical-align: center;
    /*border-radius: 10px;*/
    height: 20px;
    cursor: pointer;
    transition: all 250ms ease-in-out;

}

.x {

    width: 20px;
    line-height: 20px;
    font-size: 25px;
    transform: rotate(90deg);

}

.close_btn_theme_dropdown:hover {

    background-color: var(--accent_two);

}

.close_btn_theme_dropdown:active {

    background-color: var(--accent_three);

}
/*for the buttons in the dropdown*/
.theme_container div{

    width: 100%;
    border-radius: 12.5px;
    height: 25px;
    cursor: pointer;
    border:3px solid var(--msc);
    transition: border 250ms ease-in-out;

}

.theme_1:hover, .theme_3:hover, .theme_2:hover {

    border-color: #4cc75e;

}

.theme_1 {

    background: linear-gradient(

    -45deg,
    #A362DC 33%,
    #FF7F11 33% 66%,
    #1F1F1F 66%
    
    );

}

.theme_2 {

    background: linear-gradient(

    -45deg,
    #80DCC3 33%,
    #FF7878 33% 66%,
    #FAFAFA 66%
    
    );

}

.theme_3 {

    background: linear-gradient(

    -45deg,
    #45818E 33%,
    #7AF2F9 33% 66%,
    #101834 66%
    
    );

}
/*darken effect added to the background when the 'log in' block is active*/
.bg_darken {

    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 250ms ease-in-out;

}
/*the block that opens when you click 'log in'*/

.log_in_block a {

    color: var(--main);

}

.log_in_block {

    position: fixed;
    z-index: 2;
    opacity: 0;
    top: calc(50vh - 165px);
    left: calc(50vw - 210px);
    width: 420px;
    height: 330px;
    border-radius: 10px;
    background-color: var(--bg);
    pointer-events: none;
    transition: all 250ms ease-in-out;
    text-align: left;

}
/*close button in the 'log in' block*/
.close_btn {

    position: absolute;
    z-index: 1;
    padding: 0;
    margin: 0;
    top: 25px;
    right: 35px;
    cursor: pointer;
    font-size: 24px;
    color: var(--main);
    transition: all 250ms ease-in-out;

}

.close_btn:hover {

    color: var(--main_two);

}

.close_btn:active {

    color: var(--main_three);

}
/*the forms in the 'log in' block*/
.log_in_block {

    overflow: hidden;

}

.form1, .form2, .form3 {

    position: absolute;
    width: 370px;
    transition: all 250ms ease-in-out;
    
}

.form1 {

    height: 280px;
    top: 25px;
    left: 25px;

}

.form2 {

    height: 250px;
    top: 25px;
    left: -395px;

}

.form3 {

    height: 220px;
    top: 25px;
    left: 445px;

}
/*animations to the forms*/
.slide-right {

    transform: translateX(420px);

}

.slide-left {

    transform: translateX(-420px);

}

.s-u-resize {

    height: 300px;

}

.f-p-resize {

    height: 270px;

}

.form1 h2 , .form2 h2, .form3 h2  {

    text-align: center;
    font-size: 30px;
    font-weight: 300;

}

.form1 div:not(.button), .form2 div:not(.button), .form3 div:not(.button) {

    margin: 10px 10px;
    font-size: 15px;

}

.form1 input, .form2 input, .form3 input{

    margin-top: 10px;
    display: block;
    width: 100%;
    height:35px;
    border-radius: 5px;
    font-size: 17px;
    padding: 0px 10px;
    background-color: var(--txtbox_bg);
    outline: none;

}

.input {

    border: 2px solid var(--txtbox_border);

}

.input-border-red {

    border: 2px solid red;

}

.input-border-green {

    border: 2px solid #4cc75e;

}

/*forgot password form*/
.forg_pwd a {

    position: relative;
    font-size: 12px;
    float: right;
    margin-right: 0px;

}

.forg_pwd a:hover, .sign_up_a a:hover, .back_to_log_in:hover {

    color: var(--main_two);

}

.forg_pwd a:active, .sign_up_a a:active, .back_to_log_in:active {

    color: var(--main_three);

}

.button {

    text-align: center;
    margin: 10px 10px;
    width: 70px;
    height: 35px;
    line-height: 35px;
    background-color: var(--main);
    color: var(--bg);
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    border-width: 0px;
    border-radius: 5px;
    transition: all 250ms ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.button:hover {

    background-color: var(--main_two);

}

.button:active {

    background-color: var(--main_three);

}
/*sign up form*/
.sign_up_a {

    padding-top: 10px;

}

.sign_up_a h3, .sign_up_a a{

    font-size: 12px;

}

.form2 div a, .form3 div a {

    font-size: 24px;

}

.form2 div a {

    position: relative;
    margin-top: 14px;
    float: right;
    margin-right: 0px;

}

.form2 div:nth-child(3) > label > i {

    color: var(--txtbox_border);
    font-size: 14px;
    position: relative;
    bottom: 2px;
    margin-left: 10px;

}

.pass_req {

    background-color: var(--msc);
    padding: 10px;
    border-radius: 5px;
    width: 200px;
    position: absolute;
    bottom: 70px;
    left: 110px;
    opacity: 0;
    pointer-events: none;

}

.pass_req > p {

    font-size: 12px;
    color: var(--text_colour);

}

.pass-req-show {

    opacity: 1;

}
/*other form styles*/
.form3 div a {

    position: relative;
    top: 8px;

}

.sign_up_a h3 {

    color: var(--txtbox_border);

}

.form1 input, .form2 input, .form3 input {

    caret-color: var(--bg);

}
/*animation for background darken effect to be used in JavaScript*/
.open-bg-darken {

    opacity: 0.5;
    pointer-events: auto;

}
/*animation for opening the 'log in' to be used in JavaScript*/
.open-login-block {

    opacity: 1;
    pointer-events: auto;

}

.message {

    position: absolute;
    left: 50%;
    top: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: fit-content;
    white-space: nowrap;
    height: min(3vw, 38px);
    border-radius: 1vw;
    padding-inline: 1vw;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transform: translateX(-50%);
    transition: all 250ms ease-in-out;

}

.fail_msg {

    background-color: #ff4a4a;
    color: #ffa9a9;
    
}

.success_msg {

    background-color: #4cc75e;
    color: #2f473c;
    
}

.message > i {

    font-size: min(1.5vw, 22px);
    margin-right: 1vw;
    line-height: 0px;

}

.message > p {

    font-size: min(1vw, 16px);
    line-height: 0px;

}

.message-transition {

    opacity: 1;
    pointer-events: auto;

}