*, *::before, *::after {
box-sizing: border-box;
}

body {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
background-color: #333;
background: #444;
background-image: url(forest.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

.supercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:2em;
}

.container {
width: 80%;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
font-family: hand;
font-size: 1.25em;
background-image: url(paper.jpg);
}

#text {
    padding:20px;
}

.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin-top: 20px;
}

.btn {
background-color: hsl(200, 100%, 50%);
border: 4px solid hsl(200, 100%, 30%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-size: 1em;
font-family: hand;
}

.btn:hover {
border-color: black;
box-shadow: 0px 0px 10px black;
}

.music {
    position:absolute;
    top:0;
    left:0;
    background-image: url("paper.jpg");
    font-size: 2em;
    padding:10px;
    border-radius: 0px 0px 20px 0px;
    box-shadow: 0px 0px 20px gold;
}

.music:hover {
    cursor: pointer;
}

.title {
    text-align: center;
    font-size: 3.25em;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: hpfont;
    color: gold;
    text-shadow: 0px 0px 20px rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.589);
}

body::-webkit-scrollbar {
    display: none;
}

@font-face {
    font-family: hpfont;
    src: url("hpfont.otf") format("opentype");
}

@font-face {
    font-family: hand;
    src: url("hand.ttf");
}

.center {
    display: relative;
    text-align: center;
    width: 300px;
}

img{
    max-width: 50%;
    margin: auto;
    display:block;
    border: solid black 5px ;
    border-radius: 30%;
    box-shadow: 0px 0px 10px black;
}