html{
    overflow-x:hidden;
    overflow-y:hidden;
  }

  body{
    width:100%;
    height:100%;
    background: rgb(128,128,128);
    background: -moz-linear-gradient(315deg, rgba(128,128,128,1) 0%, rgba(24,28,27,1) 74%);
    background: -webkit-linear-gradient(315deg, rgba(128,128,128,1) 0%, rgba(24,28,27,1) 74%);
    background: linear-gradient(315deg, rgba(128,128,128,1) 0%, rgba(24,28,27,1) 74%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#808080",endColorstr="#181c1b",GradientType=1);

  }
  
  #canvas{
    position:absolute;
    z-index:99;
  }
  
  .name{
  /*   position:relative; */
    width:100%;
    height:100%;
  }
  .MyName{
    width: fit-content;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Syncopate', sans-serif;
    color:white;
    font-size:70px;
    z-index:99;
    letter-spacing:15px;
  }

  .sub{
    width: fit-content;
    position: absolute;
    top: 84%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Oswald', sans-serif;
    color:white;
    font-size:20px;
    z-index:99;
    letter-spacing:1px;
  }

  .sub2{
    width: fit-content;
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Oswald', sans-serif;
    color:white;
    font-size:20px;
    z-index:99;
    letter-spacing:1px;  
  }

  .sub2 a {
      text-decoration: none;
      color: white;
  }

  .logo{
    width: 13%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Syncopate', sans-serif;
    color:white;
    font-size:15px;
    z-index:99;
    letter-spacing:1px; 
  }

  .logo img{
      width: 100%;
  }
  

  @media only screen and (max-width: 600px) {
    body {
        width: 100%;
        height: 100%;
        background: rgb(128,128,128);
        background: -moz-linear-gradient(315deg, rgba(128,128,128,1) 0%, rgba(24,28,27,1) 74%);
        background: -webkit-linear-gradient(315deg, rgba(128,128,128,1) 0%, rgba(24,28,27,1) 74%);
        background: linear-gradient(315deg, rgba(128,128,128,1) 0%, rgba(24,28,27,1) 74%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#808080",endColorstr="#181c1b",GradientType=1);
    }

    .logo{
        width: 50%;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Syncopate', sans-serif;
        color:white;
        font-size:15px;
        z-index:99;
        letter-spacing:1px; 
      }

      .MyName{
        width: fit-content;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Syncopate', sans-serif;
        color:white;
        font-size:40px;
        z-index:99;
        letter-spacing:10px;
        text-align: center;
        
      }

      .sub{
          top:70%;
        width:85%;
          text-align: center;
          font-size:18px;
      }

      .sub2{
          top: 80%;
          text-align: center;
          font-size:18px;
      }

  }