@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 {
    --bg-img: url(art/grass.jpg);
    --text-color: #000000;
    --button-bg: #f6f9fa;
    --button-text: #1a1a1a;
    --border-color: #f9cd1b;
    --bg-container-with-float1: #2A4D14;
    --bg-container-with-float2: #2A4D14;
    --bg-party: url(assets/club.jpg);
    --bg-mainheader: #379555;
    --bg-header: #379555;
    --bg-navigation: white;
    --bg-sidenote: #379555;
    --bg-mainabout: transparent;
    --bg-media-listing: #dcde5f;
    --bg-media: #c08403;
    --bg-artdisplay: #379555;
    --bg-gallery: #a7a7a7;
    --bg-gallery-item: #6f6f6f;
    --bg-section: url(art/envelope.jpg);
    --bg-entry: url(art/paper.jpg);
    --bg-links: #9b9a9a;
    --bg-lower: #379555;
    --bg-bash: url(assets/webwave.gif);
    --bg-sites: url(assets/brain.gif);
}

body {
    text-align: center;
    background-image: var(--bg-img);
    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: 3px solid var(--border-color);
    border-radius: 20px; 
    justify-content: center;
    margin: auto;
    width: 950px;
    padding: 30px;
}

.header {
        text-align: center; 
        background-color: var(--bg-header);
        border: 3px solid var(--border-color);
        border-radius: 20px; 
        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: 3px solid var(--border-color);
    border-radius: 20px; 
    justify-content: center;
    margin: auto;
    width: 500px;
}

.mainabout{
    border: 3px solid var(--border-color);
    border-radius: 20px; 
    height:270px;
    padding:15px;
    background-color: var(--bg-mainabout);
} 
.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: 3px solid var(--border-color);
        border-radius: 10px; 
    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 #ccc;
    width: 180px;
}
.gallery-item:hover {
    border: 1px solid #777;
}  
.gallery-item img {
    width: 100%;
    height: auto;
}
.gallery-item .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 {
    position: relative;
    text-align: center; 
    border-style: double; 
    border-radius: 20px; 
    justify-content: center;
    background-image: var(--bg-entry);
    background-position: left top;
    background-repeat: repeat;
    margin: auto;
    width: 800px;
    height: 400px;
    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: 900px;
}


.lower {
    text-align: center; 
    background-color: var(--bg-lower);
    border: 3px solid var(--border-color);
    border-radius: 10px;
    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: 5px solid var(--border-color);
    border-radius: 10px; 
}

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

.bash {
    background-image: url(assets/webwave.gif) no-repeat;
    background-size: 100%;
    border-color: 3px dotted var(--border-color);
    border-radius: 15px; 
    height: 150px;
}
  

.sites {
    background-image: url(assets/brain.gif) no-repeat;
    background-size: 100%;
    border-color: 3px dotted var(--border-color);
    border-radius: 15px; 
}