*{
    box-sizing: border-box;
    /* overflow-y:hidden; */
}


.combined-menu{
    position: relative;
    /* border: 1px solid black; */
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:20vh;
    width:60%;
    margin-left:15%;
    z-index:3;
    
}

.toggler{
    position: relative;
    width:7%;
    padding-right:0vw;
    margin-left: 3vw;
    /* border: 1px solid red; */
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right:5%;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.24);
    border-radius: 10px;
}


.toolbar{
    width:88%;
    height:80%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    /* border: 1px solid red; */
    /* z-index: 1; */
    /* overflow: hidden; */
    margin-right: 3vw;
    padding-right: 3vw;
    margin-left: 3vw;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.24);
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}

.curr-selection{
    /* margin-left: 1vw; */
    height: auto;
    width: 5%;
    font-family: "Century Gothic", sans-serif;
    /* box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.24); */
    /* border-radius: 10px; */
}


/* .pencil-container{ */
    /* margin-top: 10vh; */
    /* padding-left: 2vh; */
    /* width:5%; */
    
/* } */

.fa-pencil-alt{
    padding-left: 3vh;
}
.pencil-options{
    /* background-color: lightgrey; */
    
    position:fixed;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.479);
    margin-top: -1%;
    margin-left: 26%;
    border-radius: 10px;
    opacity: 0;
    z-index:3;  
    
}
.pencil-size{
    border-bottom:1px solid black;
}
.pencil-colour-container{
    border-top:1px solid black;
    display:flex;
    justify-content: center;
    align-items: center;
}
input[type="color"]{
    margin: 4px;
    width: 10vh;
    border:none;
}
/* .pencil-size{
    
    height:50%;
    width: 90%;
    background-color:lightgrey;
} */

input#pen-size{
    margin: 4px;
    background: #4db6ac;
    width: 10vh;
}


.eraser-size{
    position:fixed;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.479);
    margin-top: 0%;
    margin-left: 28%;
    border-radius: 10px;
    opacity: 0;
    z-index:-1;  
}


input[type="file"] {
    display: none;
}

.custom-file-upload {
    /* border: 1px solid #ccc; */
    display: inline-block;
    /* padding: 6px 12px; */
    cursor: pointer;
}

.img-note{
    width: 20vw;
    height: 30vh;
    z-index:1;
    position:absolute;
}
.image{
    height: 80%;
    width:100%;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* border: 1px solid black; */
}
.sticky-note{
    width: 20vw;
    height: 30vh;
    z-index:0;
}

.nav{
    height: 20%;
    width:100%;
    /* border: 1px solid black; */
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-start-start-radius: 100%;
    border-start-end-radius: 100%;
    /* border-radius:40%; */
    display:flex;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.24);
    margin-bottom: 1vh;
    border: 1px solid black;
}
.writing-pad{
    height: 80%;
    width:100%;
    /* border: 1px solid red; */
    font-family: "Raleway", sans-serif;
    font-size: 25px;
    padding:0.5em;
    overflow-y: auto;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.24);
    border-bottom-right-radius:30%;
    border-bottom-left-radius:30%;
    border: 1px solid black;
    /* border:none; */
}
.writing-pad:focus{
    outline-width: 0px;
}
.minimize{
    /* border: 1px solid red; */
    height:20px; 
    width: 20px;
    border-radius: 50%;
    background-color: rgb(214, 214, 41);
    margin-right: 0.5vw;
}
.close{
    /* border: 1px solid red; */
    height:20px; 
    width: 20px;
    border-radius: 50%;
    background-color: rgb(196, 33, 33);
    margin-right: 2vw;
}

.image{
    border: 1px solid black;
}
#board{
    /* overflow:hidden; */
    /* height:600px;
    width:2000px; */
    /* position:absolute;
    margin-top: 0vh; */
    /* scroll-behavior: ; */
    /* margin-top: 25vh; */
    
}