/* Fonts */

@font-face{
  src: url('fonts/Roboto/Roboto-Regular.ttf');
  font-family: roboto;
}

/* All */

*{
  font-family: roboto, arial;
}

/* p */

p{
  line-height: 125%;
}

/* <hr> */

hr{
  height: 0;
  border: 1px solid lightgray;
  border-radius: 1px;
}

/* <button> & <input type="submit"> */

button, input[type=submit]{
  background-color: #ededed;
  border: 1px solid #e0e0e0;
  padding: 7.5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}

button:hover, input[type=submit]:hover{
  background-color: #e3e3e3;
  border-color: #c9c9c9;
}

button:focus, input[type=submit]:focus{
  outline: none;
  border-color: #96b8ef;
}

button:active, input[type=submit]:active{
  background-color: #f8f8f8;
}

/* <a> */

a:link{
  color: #1a73e8;
}

a:visited{
  color: #6e34eb;
}

a:link, a:visited{
  text-decoration: none;
  transition: color 0.2s;
}

a:link:hover, a:visited:hover{
  text-decoration: underline;
}

a:link:active, a:visited:active{
  color: #eb6834;
}

/* <input> */

input{
  border: 1px solid #e0e0e0;
  padding: 7.5px;
  border-radius: 5px;
  transition: border-color 0.5s, background-color 0.5s;
}

input:focus{
  outline: none;
  border-color: #96b8ef;
}

/* <table> <tr> <th> <td> */

table, tr, th, td{
  border: 1px solid #ccc;
  border-collapse: collapse;
  padding: 10px;
}

th{
  background-color: #eee;
}

/* <code> */

code{
  font-family: monospace;
  padding: 5px;
  border-radius: 5px;
  background-color: #E8E8E8;
  display: inline-block;
}

/* <textarea> */

textarea{
  border: 1px solid #e0e0e0;
  padding: 7.5px;
  border-radius: 5px;
  transition: border-color 0.5s, background-color 0.5s;
}

textarea:focus{
  outline: none;
  border-color: #96b8ef;
}

/* <iframe> */

iframe{
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}