@font-face {
    font-family: PixelOperator;
    src: url('./PixelOperator.ttf');
}


* {
    box-sizing: border-box;
}

body {
    background-image: url('./img/bg/dots.gif');
    background-color: cyan;
    color:rgb(15, 15, 15);
    margin:0;
    font-family: sans-serif;
    max-width:100%;
}

header img {
    width:50%;
}

#container {
    background-image:url('./img/bg/blobs.gif');
    max-width:880px;
    display:flex;
    flex-direction: column;
    margin: 1em auto;
    gap: 1em;
}


main, section {
    display: flex;
    justify-content: center;
    width:100%;
}


main, section, header, footer {
    padding:8px;
}

header {
    margin-top: 1em;
    padding: 1em;
    display: flex;
    flex-direction: column;
    background-image:url('./img/bg/colorstar.gif');
    color:yellow;
}

nav {
    background-color:rgb(131, 236, 255);
    width: fit-content;
}

nav, nav ul {
    list-style-type: none;
    display: flex; 
    justify-content: space-around;
    gap:1em;
    padding:.25em ;
    cursor:pointer;
    margin:0;
}

#links {
    background-color: #333333;
}

#emowigs-left {
        margin-left:1em;    font-family: sans-serif;
}


#mrbeast {
    max-width:90%;
    background-color: rgb(85, 0, 255);
    margin-top: 1em;
    padding:0.5em;
    color: rgb(255, 255, 255) !important;
    display: flex;
    flex-direction: column;
    gap:0.5em;
}

#mrbeast img {
    width:100%;
    height:100%;
}

#mrbeast a {
    color: cyan;
}

#links h2 {
    background-color:rgb(166, 255, 0);
    color: #333333;
    padding:1em;
}

#links li {
    list-style-type: none;
}

nav li:hover {
    color: black;
    background-color:rgb(252, 0, 160);
}

#links ul {
    max-width: fit-content;
    margin:0;
    padding:1em;
    display: flex;
    flex-direction: column;
    gap:1em;
    flex-wrap: wrap;
}

#links li:hover, #links a:hover{
    color: black !important;
    background-color:rgb(166, 255, 0);
}

#links a {
    color:rgb(166, 255, 0);
}




main, #contact-section {
    padding:0;
}


#about-section > div{
    width:50%;
}
#about-right {
    color: rgb(0, 0, 0);
    background-color:rgb(0, 255, 55);
    display: flex;
    align-items: center;
    justify-content: center;
}

#about-right img {
max-width: 95%;
}

footer {
    background-color: rgb(0, 0, 0);
    color:rgb(0, 255, 55);
}

footer {
     margin-bottom: 1em;
}

#main-section {
    color:white;
    gap:1em;
    padding:1em;
    flex-wrap: wrap;
    align-items: center;
}

#about-section {
    background-color: rgb(0, 0, 0);
    color:rgb(0, 255, 55);
}

#emowigs-tracklist {
    display: flex;
    flex-direction: row;
    background-color: rgba(239, 255, 246, 0.904);
    color:black;
}

#emowigs-tracklist ul {
    width:50%;
}

#emowigs-tracklist li {
    display: flex;
    align-items: center;
    gap:12px;
    font-family: sans-serif;
}

#emowigs-section {
    color: rgb(0, 0, 0);
    background-image:url("./img/bg/confetti.jpg");
    padding:0;
    font-family: 'Times New Roman', Times, serif;
    flex-direction: column;
    flex-wrap: wrap;
}

#emowigs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap:1em;
    color:rgb(252, 0, 160);
}

.tracklist {
    list-style-type: none;
    padding:8px;
    margin:0;
}



#welcome {
background: #004059;
background: radial-gradient( rgb(0, 0, 255) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
    color:rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1em;
    height:fit-content;
    padding: 0.5em;
}

#welcome a {color:white;}

#contact-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('./img/bg/smiley.gif');
}

#contact-box {
    background-color: rgb(0, 10, 49);
    color:rgb(255, 255, 255);
    max-width: 70%;
    margin: 1em;
    padding: 1em;
}

#music-section {
    background-image: url('./img/bg/checker.jpg');
    color:black;
    flex-direction: column;
}

h2, h3 {
    margin:0;
}

#music-section h2 {
    background-color: aqua;
    color:rgb(12, 12, 12);
    max-width: fit-content;
}

#music-videos {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.track_gif {
    width:40px;
    height:40px;
}

.tracklist li {
    display: flex;
}

.banner {
    padding:0.5em;
    background-color:rgba(252, 0, 101);
    color:black;
    font-size: 30pt;
    text-align: center;
    max-width: 100%;
    margin-bottom:1em;
}

.banner:hover {
    background-color: yellow;
}


nav a {
    font-weight: bold;
    color:black;
    text-decoration: none;
}

nav a:hover {
    color: black;
    background-color:rgb(252, 0, 160);
}

#contact-box a, #contact-box a:visited {
    color: rgb(0, 204, 255);
}

#tour {
    font-family: sans-serif;
    background-color: blue;
    padding: 0em;
    margin-right:1em;
}

#tour h2 {
    padding:1em;
    color:blue;
    background-color:rgb(252, 0, 160);
}

.seated-event-venue-cell {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap:0.25em;
}

.seated-event-date-cell {
    margin-bottom:0.25em;
}

.seated-event-row {
    flex-direction: column;
}

.seated-event-description-cells {
    width:100% !important;
    margin-bottom: 0.5em;
}

.seated-event-link {
    background-color: yellow !important;
}

.seated-event-link:hover {
    color:black !important;
}
.wigbar {
    display: flex;
    align-items: center;
    justify-content: center;
}