input[type=text]{
    text-align: center;
    position: absolute;
    width:200px;
    border:2px solid #aaa;
    border-radius:4px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;

    top: 50%;
    margin-left: -100px;

  }

  input[type=text]:focus{
    position: absolute;
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
  }

  button {
    position: absolute;
    width:200px;
    border:2px solid #aaa;
    border-radius:4px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;

    top: 55%;
    margin-left: -100px;
  }
 
  @media (max-width: 575px) {
    input[type=text] {
      top: 30%;
    }

    button {
      top: 37%;
    }
}

  button:focus{
    position: absolute;
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
  }

  #Logo {
    background-color: transparent;
    position: absolute;
    display: block;
    left: 50%;
    margin-left: -500px;
      width: 1000px;
  }

  .obj {
    width: 15%;
    background-color: transparent;
    position: absolute;
    display: none;
    top: 55%;
    opacity: 0%;
  }

  #R {
    left: 28%;
    transition: opacity 2s, top .5s, width .5s, left .5s;
  }
  #P {
    left: 43%;
    transition: opacity 2s, top .5s, width .5s, left .5s;
  }
  #S {
    left: 58%;
    transition: opacity 2s, top .5s, width .5s, left .5s;
  }

  #oppo {
    position: absolute;
    width: 15%;
    left: 58%;
    top: 30%;
    opacity: 0%;
    width: 150px;

    transition: opacity 2s, filter 1s;
  }

  .win {

    transition: filter 8s;


    -webkit-filter: drop-shadow(2px 1px 0 rgb(28, 209, 125))
        drop-shadow(-1px -1px 0 rgb(28, 209, 125));
    filter: drop-shadow(2px 1px 0 rgb(28, 209, 125))
    drop-shadow(-1px -1px 0 rgb(28, 209, 125));

  }

  .lose {

    transition: filter 8s;


    -webkit-filter: drop-shadow(2px 1px 0 rgb(235, 80, 80))
        drop-shadow(-1px -1px 0 rgb(235, 80, 80));
    filter: drop-shadow(2px 1px 0 rgb(235, 80, 80))
    drop-shadow(-1px -1px 0 rgb(235, 80, 80));

  }

  #yeet {
        -webkit-filter: drop-shadow(2px 1px 0 rgb(28, 209, 125))
        drop-shadow(-1px -1px 0 rgb(28, 209, 125));
    filter: drop-shadow(2px 1px 0 rgb(28, 209, 125))
    drop-shadow(-1px -1px 0 rgb(28, 209, 125));

        -webkit-filter: drop-shadow(2px 1px 0 rgb(235, 80, 80))
        drop-shadow(-1px -1px 0 rgb(235, 80, 80));
    filter: drop-shadow(2px 1px 0 rgb(235, 80, 80))
    drop-shadow(-1px -1px 0 rgb(235, 80, 80));
  }


  #R:hover {
    -webkit-filter: drop-shadow(2px 1px 0 dodgerBlue)
                 drop-shadow(-1px -1px 0 dodgerBlue);
  filter: drop-shadow(2px 1px 0 dodgerBlue)
         drop-shadow(-1px -1px 0 dodgerBlue);
  }

  #P:hover {
    -webkit-filter: drop-shadow(2px 1px 0 dodgerBlue)
                 drop-shadow(-1px -1px 0 dodgerBlue);
  filter: drop-shadow(2px 1px 0 dodgerBlue)
         drop-shadow(-1px -1px 0 dodgerBlue);
  }

  #S:hover {
    -webkit-filter: drop-shadow(2px 1px 0 dodgerBlue)
                 drop-shadow(-1px -1px 0 dodgerBlue);
  filter: drop-shadow(2px 1px 0 dodgerBlue)
         drop-shadow(-1px -1px 0 dodgerBlue);
  }

  @media (max-width: 880px) {
    #Logo {
        top: 15%;
        width: 600px;
        margin-left: -300px;
    }
}

@media (max-width: 575px) {
  #Logo {
      width: 350px;
      margin-left: -175px;
      top: 10%;
  }
}

@media (max-width: 400px) {
  #Logo {
      width: 200px;
      margin-left: -100px;
      top: 10%;
  }

  .obj {
    width: 20%;
    top: 55%;
  }

  #R {
    left: 22%;
  }
  #P {
    left: 43%;
  }
  #S {
    left: 64%;
  }
}

html {
  text-align: center;
}

#PIN_Text {
  display: none;
  position: absolute;
  top: 90%;
  left: 47%;
}