body {
    display: flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:10px;
}
@font-face {
  font-family: Notepen; 
  src: url(assets/Notepen.otf);  /* https://bestfont.gumroad.com/l/Notepen */
}
* {
    font-family: Notepen;
}
.container {
    display:flex;
    flex-wrap:wrap;
    border: 1px solid black;
    width: 600px;
    height: 600px;
}
.animation {
    position:relative;
    width:800px;
}
.content {
    display:flex;
    gap : 10px;
    position:relative;
    width:800px;
    position:absolute;
    left:0;
}
.buttons {
    display:flex;
    flex-flow: column wrap;
    gap: 10px;
}
button {
    border-radius: 25px;
    height: 50px;
    width: 100px;
    font-size: 25px;
}
.black {
    background-color:rgba(0, 0, 0);
}
#blackBtn {
    background-color:black;
    color:white;
}
#redBtn {
    background-color:red;
    color:white;
}
#greenBtn {
    background-color:green;
    color:white;
}
#blueBtn {
    background-color:blue;
    color:white;
}
#yellowBtn {
    background-color:yellow;
}
#purpleBtn {
    background-color:purple;
    color:white;
}
#randomBtn {
    background: linear-gradient(-45deg, #ff0000, #f7f200, #00fa60, #0400ff );
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

h1 {
    font-size: 70px;
    font-weight:bold;
    margin:0;
}
div > p {
    font-size: 20px;
    text-align:center;
}
.opaque {
    opacity: 1 !important;
}