body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #ffffff;
}

#container {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    border: 2px solid #ddd;
    margin: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* dropdown */

option {
    background-color: #3498db;
    color: #fff;
}

#options {
    width: 300px;
    padding: 20px;
    background-color: #3498db;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    overflow-y: auto;
    border-left: 7px solid white;
    border-top: 7px solid white;
    border-bottom: 7px solid white;
    border-radius: 20px 0 0 20px;
}

.option {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 20px;
    align-items: center;
    outline: none;
}

/* addbutton */
.addbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 10px;
}

.inpAdd {
    padding: 10px;
    cursor: pointer;
    background-color: #2ecc71;
    color: #fff;
    border: 3px transparent solid;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

.inpAdd:hover {
    background-color: #2ecc71;
    border: 3px white solid;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.inpAdd:active {
    box-shadow: none;
}

/* the div or the text box in the container */
.text-box {
    position: absolute;
    cursor: grab;
    background-color: none;
}

.option input {
    width: 94%;
    height: 30px;
    padding: 5px;
    padding-left: 15px;
    margin-top: 2%;
    font-size: 16px;
    font-weight: 500;
    color: #006eff;
    background: rgba(255, 255, 255, 0.363);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.219);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 3px solid rgba(255, 255, 255, 0.589);
}

/* the selectors */


#fontColorSelector {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 55px;
    height: 50px;
    position: absolute;
    margin-top: -1%;
    box-shadow: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease-in-out;
    outline: none;
}

#fontColorSelector::-webkit-color-swatch {
    border-radius: 50%;
    border: 2px solid #ffffff;
}

#fontColorSelector::-moz-color-swatch {
    border-radius: 50%;
    border: 2px solid #ffffff;
}

#fontSizeSelector {
    width: 20%;
    height: 30px;
    padding: 0px 10px;
    margin-top: 2%;
    align-items: center;
    color: #006eff;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.363);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.158);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.589);
}

/*undo and redo buttons*/
.unre {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.undo,
.redo {
    padding: 10px;
    cursor: pointer;
    background-color: #2ecc71;
    color: #fff;
    border: 3px transparent solid;
    border-radius: 5px;
    transition: all 0.1s ease;
    outline: none;
    cursor: pointer;
}

.undo:hover,
.redo:hover {
    border: 3px white solid;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.undo:active,
.redo:active {
    box-shadow: none;
}

/*font selector*/
#fontSelector {
    width: 80%;
    height: 30px;
    padding: 0px 10px;
    margin-top: 2%;
    color: #ffffff;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.363);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.158);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.589);
}