@keyframes appear {
    0% {
        height: 0;
        opacity: 0;
    }
    100% {
        height: 350px;
        opacity: 100%;
    }
}

body {
    touch-action: manipulation;
    font-family: 'Roboto', sans-serif;
	background-color: #2c3e50;
	color: #ecf0f1;
    margin: 0;
    padding: 0;
    overflow: auto;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                      supported by Chrome and Opera */
}

#view {
    margin: 40px 10px 10px 10px;
}

p, span, label {
    font-weight: normal;
}   

h1 {
    font-size: 32px;
	font-weight: lighter;
	text-align: center;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 24px;
	font-weight: lighter;
	margin: 10px 0px;
    padding: 0;
}

textarea {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

button, input::-webkit-file-upload-button {
	font-family: 'Roboto', sans-serif;
    font-size: 14px;
    background-color: #5e5ccb;
    color: rgb(242, 242, 247);
    border-radius: 4px;
    padding: 8px 14px;
	border: none;
    box-shadow: 3px 2px 6px rgba(0, 0, 0, 0.6);
}

button:hover, input::-webkit-file-upload-button:hover {
    background: #5e5ccb40;
}

button:active, input::-webkit-file-upload-button:active {
    background: #5e5ccb80;
}

.menusec {
    margin: 9px;
	padding: 12px;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#fontsize {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #5e5ccb60;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#fontsize:hover {
    opacity: 1;
}

#fontsize::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 50%;
    appearance: none;
    width: 45px;
    height: 45px;
    background: #5e5ccb;
    cursor: pointer;
}

#fontsize::-moz-range-thumb {
    -webkit-appearance: none;
    border-radius: 50%;
    appearance: none;
    width: 45px;
    height: 45px;
    background: #5e5ccb;
    cursor: pointer;
}

#tabIndicator1:hover, #tabIndicator2:hover, #tabIndicator1:active, #tabIndicator2:active, #f1:hover, #f2:hover, #f3:hover, #f1:active, #f2:active, #f3:active {
    background-color: #f39c1260;
}

textarea {
    resize: none;
    white-space: pre-wrap;
}

header {
	background-color: #5e5ccb;
	color: white;
	padding: 40px 20px 0px 20px;
	position: sticky;
	top: 0;
	z-index: 1989;
}