@import url(https://fonts.bunny.net/css?family=architects-daughter:400|beth-ellen:400|vt323:400|syne-mono:400);

* {
    box-sizing: border-box;
}

body {
    max-width:1000px;
    margin: auto;
    font-family: "VT323", mono;
    background-color: #0B0835;
    color: #060b11;
}

body::before {
    content: "";
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 80%;
    height:100%;
    background-color: #170055;
    z-index: -1;
}

body::after {
    content: "";
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 80%;
    height:100%;
    background-color: #F037A5;
    z-index: -2;
    border-left: 20px dashed #00f3fc;
    border-right: 20px dashed #00f3fc;
}

/* headers */

h1, h2, h3 {
    margin:auto;
    text-align: center;
}

h1, h2 {

    color: #040026;
    text-shadow:     1px  1px 1px #9336B4,
                     2px  2px 1px #F037A5,
                     2px  2px 2px #00f3fc,
                     3px  3px 2px #0097ec,
                     4px  4px 1px #F037A5,
                     5px  5px 2px #6c1fd3,
                     6px  6px 2px #040026;
}

h1 {
    background: #F037A5;
    border-bottom: 10px double #00f3fc;
    border-top: 10px double #00f3fc;
    font-size: 4rem;
    width: 80%;
    padding-bottom: 5px;
    margin-top: 10px;
}
  
h2 {
    background: #F037A5;
    border-bottom: 10px double #00f3fc;
    border-top: 10px double #00f3fc;
    font-size: 3rem;
    padding-top: 0px;
    padding-bottom: 5px;
    width: 80%;
}

h3 {
    color:#00f3fc;
    width: 65%;
    padding:10px;
    font-size: 2rem;
    margin: auto;
}

button {

    

    border-radius: 50%;
    

}

.k-buttons{

    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:5px;


}

.choice-buttons {
    width: 70%;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;

}

button.modifier {

    padding: 5px;
    margin: 6px;
    font-size: 2rem;
    font-family: "VT323", mono;
    background: #00f3fc;
    border: 6px outset #F037A5;

}

button.option {
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    width: 128px;
    height: 128px;
    padding-bottom: 2px;
    font-size: 1rem;
    font-family: 'Beth Ellen', handwriting;
    margin:12px;
    background: #00f3fc;
    border: 10px outset #FF3FA4;
    background-position: center;
    background-repeat: no-repeat;
}

button.apology {

    width:128px;
    height:128px;
    margin: 25px;
    font-size: 2rem;
    font-family: "VT323", mono;
    background: #00f3fc;
    border: 6px outset #F037A5;

}

footer {
  text-align: center;
  padding: 16px;
  background: #09183380;
  color: #bdbdbd;
}

.hidden {
    visibility: hidden;
}