* {
  box-sizing:border-box;
  cursor:default;
  font-family:'Roboto';
  padding:0;
  margin:0;
}

*:focus {
  outline:none !important;
}


:root {
 /* --c1:deepskyblue;*/
  --c1:#2497bd;
  --c2:deeppink;
  --c3:red;
  --c4:#0099cc;
  --c5:rgba(0,0,0,0.2);
  --c6:seagreen;
  
  --g1:linear-gradient(to right, gold, lightyellow);
  --g2:linear-gradient(to right, coral, pink);
  --g3:linear-gradient(to right, steelblue, lightblue);
  --g4:linear-gradient(to bottom, grey, silver);
  --g5:linear-gradient(to right, lightcoral, lightpink);
  
  --h1:60px;
  --h2:60px;
}


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
     url('../fonts/roboto-v20-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/roboto-v20-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
     url('../fonts/roboto-v20-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
     url('../fonts/roboto-v20-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
     url('../fonts/roboto-v20-latin-ext_latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
     url('../fonts/roboto-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
     url('../fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
     url('../fonts/roboto-v20-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('../fonts/roboto-v20-latin-ext_latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v20-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
     url('../fonts/roboto-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
     url('../fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
     url('../fonts/roboto-v20-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
     url('../fonts/roboto-v20-latin-ext_latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}


body {
 height:100%;
 overflow:hidden;
 position:relative;
 width:100%;
}
button {
  cursor:pointer;
}
html {
  background:var(--g4);
  height:100%;
  width:100%;
}
li {
  width:100%;
}
ul {
  list-style:none;
  width:100%;
}