@font-face {
    font-family: Dico;
    src: url(fonts/VCR_OSD_MONO_1.001.ttf); 
}

@font-face {
    font-family: Daydream;
    src: url(fonts/SuperPixel.ttf);
}

:root {

    --text-color: #eeff0a;
    --button-bg: #61dafb;
    --button-text: #1a1a1a;
    --border-color: #f9cd1b;
    --bg-container-with-float1: #383eec;
    --bg-container-with-float2: #383eec;
    --bg-party: url(assets/club.jpg);
    --bg-mainheader: #000000;
    --bg-header: #040404;
    --bg-navigation: white;
    --bg-sidenote: #000000;
    --bg-mainabout: transparent;
    --bg-media-listing: #911bbd;
    --bg-media: #f22d58;
    --bg-artdisplay: #ff00b7;
    --bg-gallery: #000000;
    --bg-gallery-item: #000000;
    --bg-section: url(art/envelope.jpg);
    --bg-entry: url(art/paper.jpg);
    --bg-links: #9b9a9a;
    --bg-lower: #000000;
    --bg-bash: url(assets/webwave.gif);
    --bg-sites: url(assets/brain.gif);
}

body {
    text-align: center;
    background-image: url(art/bluesparkle.gif) repeat;
    font-family: Dico;
}

li {
    display: inline-block;
    transition: all .2s ease-in-out;
}

li:hover {
    transform: scale(1.3);
}

p {
    font-family: Dico; 
    color: var(--text-color);
}

h1 {
    font-family: Daydream;
    color: var(--text-color);
}

.parentcontainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.container-with-float2 {
    justify-content: center;
    padding: 10px;
    text-align: center;  
    width: 200px; 
    background-color: var(--bg-container-with-float2); 
    border: 5px solid var(--border-color);
    border-radius: 10px; 
}
.container-with-float2 img {
    max-height: 100%;
}

.party {
    text-align: center;
    background-image: var(--bg-party);
    border-radius:15px;
    width: 240px;
    justify-content: center;
    max-height:100%; max-width:100%;
}

.mainheader {
    text-align: center; 
    background-color: var(--bg-mainheader);
    border-color: var(--border-color);
    border-radius: 20px; 
    border-style: solid;
    border-width: 3px;
    justify-content: center;
    margin: auto;
    width: 950px;
    padding: 30px;
}

.header {
    text-align: center; 
    background-color: var(--bg-header);
    border-color: var(--border-color);
    border-radius: 20px; 
    border-style: solid;
    border-width: 3px;
    justify-content: center;
    margin: auto;
    width: 500px;
}

.navigation {
    text-align: center; 
    background-color: var(--bg-navigation);
    border-radius: 20px; 
    justify-content: center;
    margin: auto;
    width: 800px;
    font-family: Dico;
}

.sidenote {
    text-align: center; 
    background-color: var(--bg-sidenote);
    border-radius: 20px; 
    justify-content: center;
    margin: auto;
    width: 500px;
}

.mainabout{
    border: 3px solid var(--border-color);
    border-radius: 20px; 
    height:270px;
    padding:15px;
} 
.mainabout img {
    float: left
}
.mainabout a {
    text-align: center;
}
    
.media-listing{
    text-align: left;
    background-color: var(--bg-media-listing);
    border: 3px solid var(--border-color);
    border-radius: 20px; 
    padding:15px;
}
    
.media {
    text-align: left;
    background-color: var(--bg-media);
    border: 3px solid var(--border-color);
    border-radius: 20px;
    padding: 15px;
    overflow-x: scroll;
}
.media img {
    height: 200px;
    width: 147px;
    padding: 5px;
    background-color:var(--bg-media);
    border: 3px solid var(--border-color);
    border-radius: 20px;
}
.media tr {
    padding: 10px;
}

.artdisplay {
    text-align: center; 
    background-color: var(--bg-artdisplay);
    border-color: var(--border-color);
    border-radius: 10px; 
    border-style: solid;
    border-width: 3px;
    justify-content: center;
    margin: auto;
    width: 1000px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--bg-gallery);
    border: 3px solid var(--border-color);
    border-radius: 10px; 
    margin: auto;
}
.gallery-item {
    margin: 5px;
    border: 1px solid var(--bg-gallery-item);
    width: 180px;
}
.gallery-item:hover {
    border: 1px solid #777;
}
.gallery-item img {
    width: 100%;
    height: auto;
}
    .gallery .desc{
      padding: 15px;
      text-align: center;
      font-family: Dico;
    }

.Section {
    text-align: center; 
    border-style: double; 
    background-image: var(--bg-section); 
    background-size: 100%;
    border-radius: 20px; 
    justify-content: center;
    background-position: left top;
    background-repeat: repeat;
    margin: auto;
    width: 700px;
}
        
.Entry {
    text-align: center; 
    border-style: double; 
    background-color:#aaf0c9; 
    border-radius: 20px; 
    justify-content: center;
    background-image: var(--bg-entry);
    background-position: left top;
    background-repeat: repeat;
    margin: auto;
    width: 900px;
    height: 700px;
    overflow: scroll;
    padding: 35px;
}

.links {
    text-align: center;
    border-style: double;
    background-color: var(--bg-links);
    border-radius: 20px;
    justify-content: center;
    margin: auto;
    width: 1000px;
}

.lower {
    text-align: center; 
    background-color: var(--bg-lower);
    border-color: var(--border-color);
    border-radius: 10px;
    border-style: solid;
    border-width: 3px; 
    justify-content: center;
    margin: auto;
    width: 950px;
}

.container-with-float1 {
    justify-content: center;
    padding: 10px;
    text-align: center;
    width: 200px; 
    background-color: var(--bg-container-with-float1);
    border-color: var(--border-color);
    border-radius: 10px; 
    border-style: solid;
    border-width: 5px; 
}

.container-with-float1 img {
   max-height: 100%;
}

.bash {
    background-image: url(--bg-bash) no-repeat;
    background-size: 100%;
    border-color: var(--border-color);
    border-radius: 15px; 
    border-style: dotted;
    border-width: 3px; 
    height: 150px;
}
  

.sites {
    background-image: url(--bg-sites) no-repeat;
    background-size: 100%;
    border-color: var(--border-color);
    border-radius: 15px; 
    border-style: dotted;
    border-width: 3px;
    color: #FFFFFF;
}