body{
    background-color:whitesmoke; 
    display: inl;
}

header{
display: flex;
justify-content: center;
text-align: center;
justify-self: center;
}
h1, h2{
    background-color: lightgray;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 10px; 
    padding-bottom: 10px;
    border: 6px outset gray;
}
main{
    display:flex;
    height: 100%;
    align-self: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 10px;
  flex-direction: row;
    touch-action: none;
}
    .item {

      touch-action: none;
      user-select: none;
      position: relative;
    }

    .one, .two, .three, .four{
     background-color: lightgray;
    border: 6px outset gray;
    padding : 10px;
    margin: 10px;
    display: inline-flex;
    flex-direction: column;
    align-self: center;
    z-index: 1;
  
    }

    .item:active {
      opacity: .75;
    }

    .item:hover {
      cursor: pointer;
    }

    div{
      position: relative;
      touch-action: none;
    }

    #lobotomy{
      display: absolute;
      position: absolute;
      top: 300px;
      left: 50%;
      z-index: 0;
    }

    a{
      color: black;
    }

    .hide:hover{
opacity: 0%;
transition-duration: 100ms;
    }

    a:hover{
      color:white;
      transition-duration: 100ms;
    }