stylepid.css

body {
background-image: linear-gradient(to bottom right, #0090FF, #00eeff);
repeat: none;
background-repeat: no-repeat;  
background-size: cover;  
font-family: 'Open Sans', sans-serif;
}

#textarea {
width: 60%;
height: 900px;
padding: 10px;
border-radius: 10px;
font-family: Arial;
resize: none;
background-color: #F7F7F7;
border: 0px solid;
shadow: 1px 1px 0px 0px;
transition: 0.6s ease;
font-size: 20px;
margin-top: 10px;
overflow: auto;
}


.divtop {
width: 70%;
height: 60px;
border: 1px solid #49A3FF;
border-radius: 30px;
margin-bottom: 30px;
margin-top: 20px;
background-color: #49A3FF;
overflow: auto;
}

.size {
width: 20px;
height: 20px;
font-size: 15px;
margin-left: -50px; 
margin-right: 5px;
border: 0px solid #CECECE;
border-radius: 5px;
transition: 0.3s ease;
}

.size:hover {
width: 30px;
}
.size:focus {
width: 30px;
outline: none;
}

.font {
width: 40px;
height: 20px;
margin-right: 10px;
border: 0px solid #CECECE;
border-radius: 5px;
transition: 0.3s ease;
}

.font:hover {
width: 100px;
}
.font:focus {
width: 100px;
outline: none;
}

.color {
width: 40px;
height: 20px;
margin-right: 10px;
border: 0px solid #CECECE;
border-radius: 5px;
transition: 0.3s ease; 
}

.color:hover {
width: 100px;

}
.color:focus {
width: 100px;
outline: none;
}
.output {
font-family: "Open Sans",Sans-serif;
font-size: 25px;
}

button {
transition: transform 0.3s ease;
border: 0px solid;
background-color: white;
border-radius: 4px;
margin-left: 5px;
transition: ease 0.3s;
height: 50px;
margin-top: -20px;
font-weight: bold;
font-family: "Open Sans", Sans-Serif;
background-color: #3190FA;
color: white;
user-select: none;
}

button:hover {
background-color: #3279EE;
}

.input {
width: 110px;
height: 30px;
font-size: 20px;
border-radius: 7px;
border: none;
transition: 0.3s ease;
padding: 3px;
background-color: #f7f7f7;
font-family: open sans;
}

.input:hover {
width: 300px;
}
.input:focus {
width: 300px;
outline: none;
}


.demo {
font-size: 35px;
font-family: Arial;
}

.demo2 {
font-size: 25px;
font-family: Arial;
}

.page {
font-family: Sans-Serif;
font-size: 17px;
}
.pagediv {
position: fixed;
top: 2%;
font-family: "Open Sans", Sans-Serif;
right: 2%;
width: 100px;
height: 50px;
background-color: #F7F7F7;
opacity: 0.3;
border-radius: 20px;
transition: ease 0.2s;
}
.pagediv:hover {
opacity: 1;
background-color: white;
width: 150px;
height: 50px;
}

#menuside {
position: fixed;
right: 1%;
top: 15%;
border-radius: 20px;
width: 40%;
height: 80%; 
display: none;
background-color: #49A3FF;
border: none;
box-shadow: 2px 2px 2px grey;
overflow: auto;
font-family: "Open Sans", Sans-Serif;
}

.menu {

}

.menu:hover {
}


.undercon {
font-family: "Google Sans", Sans-Serif;
font-size: 25px;
user-select: none;
color: white;
padding: 20px;
margin-top: -50px;

}

#addpage {

margin-top: 20px;
}

#optin {
margin-top: 20px;

transition: ease 0.3s;
}


.vividcontainer {
position: fixed;
left: 25%;
top: 15%;
background-color: grey;
width: 60%;
height: 80%;
border: none;
border-radius: 20px;
font-family: "Open Sans", Sans-Serif;
font-size: 30px;
display: none;
transition: ease 0.3s;
overflow: auto;
}

.green {
background-color: #00D036;
width: 80px;
height: 80px;
margin-top: 30px;
}

.green:hover {
background-color: #00D036;
}

#peach {
width: 80px;
height: 80px;
background-color: #FFB1BF;
transition: ease 0.3s;
margin-top: 30px;
}
#peach:hover {

}
.blue {
width: 80px;
height: 80px;
background-color: #0088ff;
transition: ease 0.3s;
margin-top: 30px;
}
.blue:hover {

}

.close {
color: white;
font-family: Sans-Serif;
font-weight: 700;
font-size: 20px;
margin-bottom: 5px;
user-select: none;
}

#red {
width: 80px;
height: 80px;
background-color: #FF5555;
transition: ease 0.3s;
margin-top: 30px;
}
#red:hover {

}

.vivp {
font-weight: 700;
background-color: #f7f7f7;
height: 40px;
width: 140px;
color: black;
transition: 0.3s ease;
margin-top: -60px;
margin-left: 30px;

}
.vivp2 {
font-weight: 700;
background-color: #f7f7f7;
height: 40px;
width: 140px;
color: black;
transition: 0.3s ease;
margin-right: 590px;
margin-bottom: 20px;
}
.vivp3 {
font-weight: 700;
background-color: #f7f7f7;
height: 40px;
width: 140px;
color: black;
transition: 0.3s ease;
margin-right: 590px;
}
.vivp:hover {
background-color: #c3c3c3;
}

.vivp2:hover {
background-color: #c3c3c3;
}
.vivp3:hover {
background-color: #c3c3c3;
}
vivp, vivp2, vivp3 {
float: left;
}

.close2 {
color: white;
font-family: Sans-Serif;
font-weight: 700;
font-size: 20px;
user-select: none;
margin-top: 5px;
}

#yellow {
width: 80px;
height: 80px;
background-color: #FFF600;
transition: 0.3s ease;
margin-top: 30px;
}
#yellow:hover {

}
#magenta {
width: 80px;
height: 80px;
background-color: #FF00F6;
transition: ease 0.3s;
margin-top: 30px;
}
#magenta:hover {

}
#magenta, #yellow, .green, .blue, #red, #peach {
border-radius: 1000px;
float: left;
margin: 20px;
}
.importtxt {

margin-top: 20px;
}

#lock {
transition: 0.3s ease;

margin-top: 20px;
}

#tts {
transition: 0.3s ease;

}

.buttoncontainer {
background-color: white;
padding: 3px;
box-shadow: 2px 2px 2px grey;
position: fixed;
width: 250px;
height: 30px;
top: 1%;
left: 26%;
border-radius: 5px;
display: none;
overflow: auto;
}

.numberchooser {
width: 30px;
height: 25px;
color: white;
margin-top: 2px;
}

#open {
height: 20px;
background-color: #c3c3c3;
padding: 3px;
margin-left: 5px;
transition: 0.3s ease;
}

#open:hover {
background-color: grey;
}
.downloadbutton {
margin-left: 10px;
}

.tools {
position: fixed;
top: 1%;
left: 45%;
opacity: 0.2;
width: 200px;
height: 40px;
transition: 0.3s ease;
background-color: white;
border-radius: 10px;
padding: 3px;
}

.tools:hover {
opacity: 1;
}

.fontcontainer {
background-color: white;
padding: 3px;
box-shadow: 2px 2px 2px grey;
position: fixed;
width: 250px;
height: 30px;
top: 1%;
left: 58%;
border-radius: 5px;
display: none;
overflow: auto;
}

#openfont {
height: 20px;
background-color: #c3c3c3;
padding: 3px;
margin-left: 5px;
transition: 0.3s ease;
}
#openfont:hover {
background-color: grey;
}

.fontchooser {
color: white;
margin-top: 2px;
height: 20px;
}

.closecon {
background-color: red;
width: 30px;
height: 30px;
border-radius: 5px;
margin-left: 400px;
color: white;
margin-top: -40px;
}
.closecon2 {
background-color: red;
width: 30px;
height: 30px;
border-radius: 5px;
margin-left: 50px;
color: white;
margin-top: 20px;
}
.closecon2, .vivp {
float: left;
}

.def {
width: 50%;
height: 40%;
background-color: #c7c7c7;
overflow: auto;
border-radius: 20px;
margin-top: 20px;

}

#input2 {
width: 240px;
height: 30px;
border: none;
border-radius: 10px;
background-color: #E1E1E1;
}

.confirm {
width: 80px;
height: 30px;
margin-top: 20px;

}
#containstandby {
width: 100%;
height: 100%;
display: none;
background-color: #212121;
position: fixed;
top: 0;
left: 0;
}

#sleepbutton {
margin-top: 20px;
transition: 0.3s ease;
width: 420px;
height: 60px;
}


#sleep {
font-size: 400px;
margin-top: 200px;
color: white;
font-weight: 700;
display: none;
user-select: none;

}
#sleep:hover {
 background-image: linear-gradient(to bottom right, #0090FF, #00eeff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: oh 2s linear infinite;
}

@keyframes oh {
  0% {
    background-image: linear-gradient(to bottom right, #0090FF, #00eeff);
  }

  100% {
    background-image: linear-gradient(to bottom right, #00eeff, #0090FF);
  }
}


.string {
position: fixed;
bottom: 2%;
left: 2%;
font-size: 13px;
font-family: Open Sans;
opacity: 0.2;
transition: 0.3s ease;
}

.string:hover {
opacity: 1;
}

.about {
height: 20px;
margin-right: 460px;
margin-top: 10px;
}
#versionopen {
width: 700px;
height: 300px;
background-color: white;
border-radius: 10px;
display: none;
position: fixed;
top: 30%;
left: 30%;
}
.firstpart {
font-size: 40px;
font-family: open sans;
font-weight: 700;
margin-left: 170px;
}

.secondpart {
font-size: 40px;
font-family: open sans;
font-weight: 700;
color: #A678F1;
}

.firstpart, .secondpart {
float: left;
}

.verstring {
margin-top: 70px;
margin-right: 90px;
}
.okbutton {
height: 25px;
}

.autocreate {
border: none;
padding: 5px;
width: 40%;
height: 30%;
background-color: #c7c7c7;
border-radius: 20px;
margin-top: 10px;
overflow: auto;
margin-right: 30px;
}

.colordemo {
width: 90px;
height: 40px;
border-radius: 10px;
background-color: #0090FF;
margin-top: 20px;
}

.colordemop {
font-size: 15px;
margin-top: 10px;
}

.settingscontainer {
width: 350px;
height: 150px;
background-color: #f7f7f7;
border-radius: 10px;
border: none;
position: fixed;
top: 30%;
left: 50%;
display: none;
}
.settingsoption1 {
width: 100px;
height: 100px;
background-color: #c7c7c7;
transition: 0.3 ease;
margin-top: 25px;
}

.settingsoption1:hover {
background-color: grey;
}

#general {
display: none;
}

.highlighted {
background-color: yellow;
}

.underlined {
text-decoration: underline;
}

#outerlayer {
width: 60%;
height: 40%;
border: none;
background-color: grey;
overflow: auto;
display: none;
}

#actualsettings {
margin-top: 20px;
transition: 0.3s ease;
width: 420px;
height: 60px;
}

#addpage, #optin, #lock, .importtxt, #tts {
width: 40%;
height: 17%;
}

#actualsettings, #sleepbutton {
width: 80%;
height: 8%;
}

.italic {
font-style: italic;
}

.boldstyle {
font-weight: 700;
}
.hyperlink {
color: blue;
}