body{background-color:#F5A9F2 no-repeat; background-size:100%}
@font-face {
  src: url(Open_Sans/OpenSans-Light.ttf);
  font-family: 'Open Sans', sans-serif;

}
.bar {
  height: 20%;
  width: 530%;
  border-radius: 15px;
  background-color: #FFF;
  position: relative;
}
.over {
  height:900px;
  overflow: auto;
  position: relative;
}
.paragraph {
  font-size: 25px;
  line-height: 62px;
  font-family: 'Open Sans',sans-serif;
  color: #F5A9F2;
}
.write {
  font-size: 25px;
  line-height: 62px;
  font-family: 'Open Sans',sans-serif;
  border-radius: 15px;
  background-color: #FFF;
  width:100px;
}
.writing {
  font-size: 25px;
  line-height: 62px;
  font-family: 'Open Sans',sans-serif;
  border-radius: 15px;
  background-color: #FFF;
  width:100px;
}
.writes {
  font-size: 25px;
  line-height: 62px;
  font-family: 'Open Sans',sans-serif;
  border-radius: 15px;
  background-color: #FFF;
  width:100px;
}
.form {
  border: 1px dotted #999;
  border-radius: 0;
  -webkit-appearance: none;
  color: #F5A9F2;
}
.form-input--error {
  border-color: red;
  display: none;
}
.dot {
 height: 100px;
 width: 100px;
 background-color: white;
 border-radius: 50%;
 display: inline-block;
 position: relative;
}
.sdot {
 height: 80px;
 width: 80px;
 background-color: white;
 border-radius: 50%;
 display: inline-block;
 position: relative;
}
.audio {
 height: 60px;
 width: 60px;
 background-color: red;
 border-radius: 50%;
 display: inline-block;
 position: relative;
}
button, input, select, textarea {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  border-radius: 15px;
  border-color:#FFF;
  background-color: #FFF;
}
@media only screen and (min-width:300px){
  body {
    background-color:#F5A9F2;
  }
  .slide {
    height: 50%;
  }
}
A {
  text-decoration:none;
  color:#F5A9F2;
}
input {
  text-decoration:none;
  color:black;
  outline: none;
}
#error {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  border-radius: 15px;
  text-decoration:none;
  border-color: #FFF;
  color:red;
  display:none;
}