:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

body {
    background: lightblue;
}

hr {
    border: none;
    color: black;
    background-color: white;
    height: 2px;
}
.main_page, .cbox, .buts, .notice {
    display: flex;
}

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center ;
}

.slide {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes up-slide {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes up-slide {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slide-up-slide {
  -webkit-animation-name: up-slide;
  animation-name: up-slide;
}

.notice {
    width: 150%;
    justify-content: center;
    font-size: 2em;
}

.cbox {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.buts {
    gap: 20px;
}
{
  box-sizing: border-box;
}
body {
  font-family: "Open Sans";
  line-height: 1.618em;
}

button {
  font-size: 1em;
  background: #3498db;
  color: #fff;
  border: 1px solid #3498db;
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 3vh;
}
button:hover {
  color: #3498db;
}
button::after {
  content: "";
  background: #ecf0f1;
  position: absolute;
  z-index: -1;
  display: block;
}
button[class^="slide"]::after {
  transition: all 0.35s;
}
button[class^="slide"]:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 0.35s;
}
button.slide_from_left::after {
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
}