/* Main Heading Font */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(https://fonts.gstatic.com/s/ubuntu/v13/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /*  Body Font */
  @font-face {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 400;
    src: local('Hind Regular'), local('Hind-Regular'), url(https://fonts.gstatic.com/s/hind/v9/5aU69_a8oxmIdGl4BA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* Sub Heading Font */
  @font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
/* TAGS */  
html, body{
    margin: 0;
    padding: 0;
}

h3{
      font-family: 'Ubuntu', sans-serif;
      color: rgba(254, 254, 255, 0.63);
      text-align: center;
      font-size: 3vmax;
      margin-top: 1vh;
      margin-bottom: 1vh;
      font-weight: 1000;
}

p{
      font-family: 'Hind', sans-serif;
      color: rgb(53, 53, 53);
      font-size: 14px;
      text-align: justify;
}

a{
    font-family: 'Ubuntu', sans-serif;
    font-style: italic;
    color: darkgrey;
    text-decoration: none;
}

a:visited{
  color:darkgrey;
  text-decoration: none;
}

a:hover{
  font-family: 'Ubuntu', sans-serif;
  font-style: normal;
  color: white;
  text-decoration:underline overline;
  text-decoration-color: #566963;

}

button {
	-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #566963;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:1em;
	text-decoration:none;
  text-shadow:0px -1px 0px #2b665e;
  margin: 1vh;
  width: 250px;

}

button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}

button:active {
	position:relative;
	top:1px;
}

textarea{
    height: auto;
}

/* CLASS */
    .main-header{
      background-color: black;
      color: white;
      padding: 20px 0px;
      margin: 0;
      text-align: center;
      height: 20vh auto;
      display:block;
      position: relative;
    }

    .content{
      display: block;
      background-color:#b2d8d8;
      padding: 20px 16px;
      overflow: hidden;
      text-size-adjust: 2vw auto;
      text-align: center;
      height: 60vh;
      max-height: 20000px;
      min-height: 20vh;
      position: relative;
      margin : auto;
    }
    
    .container {
        max-width: 95%;
        max-height: 100%;
        height : 15vh;
        padding-top: 2vmin;
        margin: auto;
    }
    
    .comment {
        float: top;
        width: 100%;
        max-height: 100%;
    }
 
    
    .textinput {
        float:left;
        width: 100%;
        min-height: 75px;
        outline: none;
        resize: none;
        border: 1px solid grey;
    }

    .footer{
        display: block;
        font-family: 'Hind', sans-serif;
        background-color: black;
        color: white;
        padding: 2vh 0px;
        height: 10vh;
        margin: 0;
        text-align: center;
        position: relative;
    }

/* ID */
#text{
    font-family: 'Hind', sans-serif;
    color: rgba(255, 255, 255, 0.705);
    text-align: center;
    font-size: 2.6vmin;
   }