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

@font-face {
  font-family: "LeagueMono";
  src:
    url("/media/LeagueMono/LeagueMono.ttf"),
}

body {
    margin: 0;
    font-family: "LeagueMono", monospace;
    font-size: 26px;
    background-image: url("/media/inchworm-offset-large.gif");
    background-color: bisque;
    background-repeat: repeat;
}

h1 {
    width: 100%;
    text-align: center;
    background-color: beige;
    font-size: 42px;
    margin: 0px;
    padding: 20px;
    font-stretch: expanded;
    font-weight: 500;
    opacity: 95%;
}

h2 {
    margin: 0px;
    font-size: 30px;
    text-align: center;
}

.main-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-around;
}

.music-link > .panel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.music-link > .panel > img {
    width: 80%;
    margin: 20px;
}

a {
    text-decoration-line: none;
    color: coral;
    font-weight: bold;
}

input {
    color: black;
    font-size: inherit;
    font-family: inherit;
    border-color: coral;
    background-color: cornsilk;
    padding: 8px;
}

input[type="email"] {
    width: 100%;
    max-width: 500px;
}

input[type="submit"] {
    cursor: pointer;
    color: black;
}

@media (hover: hover) {
    a:hover {
        color: orangered;
    }
    
    input[type="submit"]:hover {
        background-color: orangered;
    }
}

.panel {
    background-color: beige;
    padding: 20px;
    margin: 40px;
    opacity: 95%;
    border: ridge;
    border-color: coral;
}

.music-link, .email-list {
    width: 50%;
    text-align: center;
}

.about {
    width: 100%;
}

.about > .panel > p {
    margin: 15px 40px;
}

@media (max-width: 960px) {
    .music-link, .email-list, .about {
        width: 100%
    }

    body {
        font-size: 18px;
    }
}

@media (max-width: 470px) {
    h1 {
        font-size: 30px;
    }
    .about > .panel > p {
        font-size: 12px;
        margin: 15px;
    }
    
}

/* CHECKBOX STUFF */
@font-face {
    font-family: "icons-27";
    font-weight: normal;
    font-style: normal;
    src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAAR4AAoAAAAABDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAPgAAAD4fZUAVE9TLzIAAAHsAAAAYAAAAGAIIvy3Y21hcAAAAkwAAABMAAAATBpVzFhnYXNwAAACmAAAAAgAAAAIAAAAEGhlYWQAAAKgAAAANgAAADYAeswzaGhlYQAAAtgAAAAkAAAAJAPiAedobXR4AAAC/AAAABgAAAAYBQAAAG1heHAAAAMUAAAABgAAAAYABlAAbmFtZQAAAxwAAAE5AAABOUQYtNZwb3N0AAAEWAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB8Dx0AAACBER0AAAAJHQAAAO8SAAcBAQgPERMWGyBpY29tb29uaWNvbW9vbnUwdTF1MjB1RTYwMHVFNjAxAAACAYkABAAGAQEEBwoNL2X8lA78lA78lA77lA6L+HQVi/yU+JSLi/iU/JSLBd83Fffsi4v77Pvsi4v37AUOi/h0FYv8lPiUi4v33zc3i/s3++yLi/fs9zeL398F9wCFFftN+05JzUdI9xr7GveR95FHzwUO+JQU+JQViwwKAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gEB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAf/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAACkYCfgXw889QALAgAAAAAAz65FuwAAAADPrkW7AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAYAAAAAAAAAAAAAAAABAAAAAgAAAAIAAAAAAFAAAAYAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("woff");
}

.checkbox-wrapper .checkbox {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.checkbox-wrapper .checkbox > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.checkbox-wrapper .checkbox-icon {
    display: inline-block;
    color: coral;
    vertical-align: middle;
    margin-right: 5px;
}
.checkbox-wrapper input[type="checkbox"]:checked ~ .checkbox-icon {
    color: orangered;
}

.checkbox-wrapper .checkbox-icon:before {
    font-family: "icons-27";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.checkbox-wrapper .icon--check:before,
.checkbox-wrapper input[type="checkbox"]:checked ~ .checkbox-icon:before {
    content: "\e601";
}

.checkbox-wrapper .icon--check-empty:before,
.checkbox-wrapper .checkbox-icon:before {
    content: "\e600";
}