@font-face {
    font-family: Superior;
    src: url(Roboto.ttf);
}

* {padding:0;margin:0;} 
body {
    background: #555;color: #fff;
    font-family: 'Superior';
    
}
label,input,td {padding: 4px;}
a{color:#0cc;}
a:hover{color:#f70;}

#div1 {
  background: linear-gradient(90deg,#80d0c7,#16577c);
  width:100%;max-width:900px;   
  padding:0;margin:0 auto;
  border-left: 1px solid #fa0;
  border-right: 1px solid #fa0;
  min-height:100vh;;
}

#menu1 { font-size: 25px;margin:0 30px }
#menu1 span,.juump{ cursor:pointer;
    -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: underline;
 }
#menu1 span:hover{ color: #046}
.tupik1 {
  border-radius: 6px;
  background:#fff;
  color:#444;
  padding:10px;
  margin:10px 30px;
  display:none;

}
.tupikT,.tupikZ,.tupikV{
  border-radius: 6px;
  color:#444;
  padding:4px 7px;
  margin:4px
}
.tupikT{background:#cec;}
.tupikZ{background:#edd;}
.tupikV{background:#cce;}
.tupikT span,.tupikZ span,.tupikV span{ color:#044;font-weight: 600; }

#btns {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1001;
  width: 40px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn {
  font-size: 2rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 2px 4px #000;
  opacity:0.6;
  color:#549ea8;
}

@media (max-width: 768px){
  #div1 {width:100%; border:none;}
}