@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
html {
  position: absolute;
  width: 100%;
  height: auto;
}
body {
  position: relative;
  width: 100%;
  height: auto;
  background: #221D1A;
  color: #9d8466;
  font-family: 'Roboto', sans-serif;
}

header {
  position: relative;
  display: block;
  z-index: 10;
  top: 0; left: 0; right: 0;
  background: #191513;
  height: 150px;
  text-align: center;
  cursor: default;
  user-select: none;
  overflow: hidden;
}
header > #logo {
  position: relative;
  display: block;
}
header > #logo > img, h1, h2 {  
  display: block;
  position: relative;
}
header > #logo > img {
  width: 116px;
  height: 38px;
  margin: 15px auto 0 auto;
  padding: 0;
}
header > #logo > h1 {
  margin: 10px 0 0 0;
  padding: 0;
  font-weight: bold;
  font-size: 125%;
  letter-spacing: .15em;
}
header > #logo > h2 {
  margin: 10px 0 0 0;
  padding: 0;
  font-weight: normal;
  font-size: 85%;
}

main, footer {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
  text-align: center;
  padding: 20px 0;
}
main > #webcast {
  position: relative;
  display: block;
  width: 50%;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #191513;
  border-radius: 10px;
}

main > #webcast > h1 {
  margin: 1em 0;
  padding: 0;
  font-weight: bold;
  font-size: 150%;
  letter-spacing: .15em;
}
main > #webcast > h2 {
  margin: 20px 0 0 0;
  padding: 0;
  font-weight: normal;
  font-size: 100%;
}
main > #webcast ol {
  list-style: none;
  margin: 20px 0 20px 0;
  padding: 0;
}
main > #webcast li {
  margin: 0 0 20px 0;
  padding: 0;
}
main > #webcast input[type=text], input[type=password] {
  background: #221D1A;
  border: 1px solid #9d8466;
  border-radius: 5px;
  margin: 10px 0;
  text-align: center;
  color: #9d8466;
  font-family: 'Roboto', sans-serif;
  font-size: 120%;
}
main > #webcast input[type=submit] {
  background: #221D1A;
  border: 1px solid #9d8466;
  border-radius: 5px;
  margin: 10px 0;
  padding: 5px 20px;
  text-align: center;
  color: #9d8466;
  font-family: 'Roboto', sans-serif;
  font-size: 120%;
}
main > #webcast input:focus {
  border: 1px solid white;
  border-radius: 5px;
}
main > #webcast label {
  display: block;
  font-weight: normal;
  font-size: 80%;
}

main > #support {
  margin-top: 20px;
  position: relative;
  display: block;
  width: 50%;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #191513;
  border-radius: 10px;
}

footer > #gct {
  margin-top: 20px;
  position: relative;
  display: block;
  width: 50%;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #191513;
  border-radius: 10px;
  font-size: 80%;
}
footer > #gct > img {
  width: 170px;
  height: 52px;
}


#notification 	 {display: block; float: none; clear: both; margin: 0 0 1em 0; padding: .5em; text-align: center; border-radius: 5px;}
#notification h1 {margin: 0; padding: 0; font-size: 130%; font-weight: normal;}
#notification p  {margin: 0; padding: 1em 0 0 0; font-size: 80%; font-weight: normal;}
#notification.error {background: #A00707; color: #FFF;}
#notification.warning {background: #C60; color: #FFF;}
#notification.info {background: #333666; color: #FFF;}

a {text-decoration: underline;}
a:link {color: #9d8466;}
a:visited {color: #9d8466;}
a:hover {color: #fff;}
a:active {color: #fff;}
.pseudolink {
  cursor: pointer;
  text-decoration: underline;
}.pseudolink:hover{
  color: #fff;
}