#main{
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width:40%;
    margin-top:-50px; 
}

#titleFront{
    margin-left: 20px;
    margin-bottom: -10px;
}

#mainBox{
    padding:1em 2em;
    border-width:7px;
    border-style:solid;
    border-image: url("border.png") 7 fill round;
    font-size:20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
    text-align: left;
    position: relative;

}

#mainBox p{
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
}

button a{
    color:black;
    font-size: 15px;
    text-decoration: none;

}

button a:hover{
    letter-spacing: 0;
    text-decoration: none;
    
}
#woof{
    position:absolute; 
    right:-4em;
    bottom:-3em;
    width:30%;
    height: auto;
    z-index: 3;
}

#welcome{
    position: relative;
    margin-bottom: 7px;
    font-size:25px;
    text-align: center;
    z-index: 3;
    font-family: basiic;

}

#wobble{
	font-weight: bold;
}

.scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
  }
  
  .scroll-container .scrolling-text {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 20s linear infinite;
  }
  
  @keyframes scroll-left {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  .disabled{
    background: #f4f4f4;
    border-color: #aeb2b5;
    color:  #838383;
  }

  button{
    font-size: 17px;
    padding:3px 17px;
  }
.buttons{
    display: flex;
    justify-content: center;
    gap: 10px;
}

  @media (max-width: 800px) {
	#main{
		width: 80vw;
	}

  body{
    overflow-x: hidden;
  }
	
  .buttons{
  flex-direction: column!important;
}

button{
  padding: 8px;
}

	#woof{
		right:-4em;
		bottom:-3em;
		width:55vw;
	}

    #titleFront{
        font-size: 3rem;
        margin-bottom: 0px;
    }
	
}