*{
    margin: 0;
    padding: 0;
    cursor: url(./img/png/cs.png),auto;
}
@font-face{
  src: url(./Urbanist.ttf);
  font-family: Urbanist sans-serif;
  font-display: swap;
}
@font-face{
  src: url(./MonomaniacOne.ttf);
  font-family: 'Monomaniac One', sans-serif;
  font-display: swap;
}
.start{
  font-family: 'Monomaniac One', sans-serif;
  height: 150px;
  width: auto;
  padding: 50px;
  border: solid 3px orange;
  background-color: #ffa5009e;
}
.up{
  text-align: center;
  font-family: 'Monomaniac One', sans-serif;
}
.dn{
  text-align: center;
  margin-top: 20px;
  font-family: 'Monomaniac One', sans-serif;
}
.cse{
    background: orange;
    display: inline-block;
    padding: 3px;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 0 0 10px 0px;
    font-size: 20px;
}
.cke{
background: orange;
    width: 240px;
    display: inline-flex;
    text-align: center;
    height: 22.5px;
    flex-direction:column ;
    border-radius: 50px;
}
.header-h1{
    font-family: Urbanist sans-serif;
    font-weight: 500;
    font-size: 15px;
    text-align: end;
    padding: 5px;
    top: 0px;
    height: 25px;
    position: sticky;
    z-index: 22222;
     background: linear-gradient(135deg, #00e5ff 0%, #dd00ff 100%);
    background-size: 200% 200%;
    animation: gradationAnim 2s ease infinite;
}
.title-nav{
    width: auto;
    text-align: center;
    padding: 20px;
}

.s-botton{
    border: solid 3px orange;
    display: inline-block;
    list-style-type: none;
    margin: 5px;
    background-color: #ffa5009e;
}
.s-botton:hover {
    border: solid 3px red;
}
.s-botton:active{
    background-color: #ff00009e;
    transform: translate(0px,3px);
    border: solid 3px red;
}
.s-botton a{
    padding: 20px;
    text-decoration-line: none;
    color: black;
    display: block;
    height: 100%;
    font-family: Urbanist sans-serif;
}
.space{
    width: auto;
    height: 20px;
}
:root {
    --shadow-color: 0deg 0% 0%;
    --shadow-elevation-low:
      0px 0.5px 0.6px hsl(var(--shadow-color) / 0.06),
      -0.1px 1.6px 2px -1.6px hsl(var(--shadow-color) / 0.1);
    --shadow-elevation-medium:
      0px 0.5px 0.6px hsl(var(--shadow-color) / 0.06),
      -0.2px 2.3px 2.9px -0.8px hsl(var(--shadow-color) / 0.08),
      -0.6px 7.8px 9.9px -1.6px hsl(var(--shadow-color) / 0.1);
    --shadow-elevation-high:
      0px 0.5px 0.6px hsl(var(--shadow-color) / 0.08),
      -0.4px 4.9px 6.2px -0.5px hsl(var(--shadow-color) / 0.1),
      -1px 12.6px 15.9px -1.1px hsl(var(--shadow-color) / 0.12),
      -2.4px 30px 37.9px -1.6px hsl(var(--shadow-color) / 0.15);
  }
  .hnbn{
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    width: 70%;
    margin-top: 50px;
    margin-top: 50px;
    border: solid 3px orange;
  background-color: rgba(255, 166, 0, 0.5);
  }
  .hnbn p,b{
    font-family: Urbanist sans-serif;
  }
  .fotter{
   border: solid 3px orange;
  background-color: rgba(255, 166, 0, 0.5);
    height: 150px;
    margin: 0 auto;
    width: 90vw;
    margin-bottom: 20px;
  }
  .fot-img{
    border-radius: 100px;
    bottom: -61px;
    position: relative;
    left: 10px;
  }
  .fot-title{
    font-family: Urbanist sans-serif;
    text-align: right;
    padding: 20px;
  }
/*
 background: linear-gradient(135deg, #00e5ff 0%, #dd00ff 100%);
    background-size: 200% 200%;
    animation: gradationAnim 2s ease infinite;
*/
@keyframes gradationAnim {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}