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

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

@font-face {
    font-family: Comic Sands MS;
    src: url("fonts/Comic Sans MS.ttf");
}

@font-face {
      font-family: typewriter; 
      src: url("fonts/Mom«t___.ttf"); 
    }

* {
    box-sizing: border-box;
}

body {
    text-align: center;
    background-image: url("assets/grass.jpg");
    font-family: MONO;
}

p {
    font-family: pixel; 
    color: #000000;
}

h1 {
    font-family: super-pixel;
    color: #000000;
}

h2, h3 {
    font-family: pixel;
}


a:link {
    text-decoration: none;
    font-family: pixel;
  }
  
.parent-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0px 30px 0px 30px;
}

.main-header {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: #379555;
    border: 3px solid #f9cd1b;
    border-radius: 20px; 
    width: 60%;
    padding: 30px;
    text-align: center; 
    z-index: 2;
}

.banner {
  width: 100%;
  max-height: 100%;
}

.header {
    text-align: center; 
    background-color: #379555;
    border-radius: 20px; 
    justify-content: center;
    margin: auto;
    width: 100%;
}

#top-nav {
    background-color: #ffffff;
    width: 80%;
}

#bottom-nav {
    background-color: #D6D6D6;
    width: 60%;
    
}

.navigation {
    justify-content: center;
    border: grey 2px solid;
    border-radius: 20px; 
    width: 100%;
    text-align: center; 
    margin: 0 auto;
}

#webpage-buttons {
    border: gold 3px dotted;
    border-radius: 15px;
    padding: 10px;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}

.web-btn {
      transition: .2s ease;
      font-family: pixel;
    }
    
    .web-btn:hover {
      transform: scale(1.2, 1.2);
    }

.dark-mode-btn {
    border: black;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.side-note {
    text-align: center; 
    background-color: #379555;
    border: 3px solid #f9cd1b;
    border-radius: 20px; 
    justify-content: center;
    margin: auto;
    width: 60%;
}
    



/*SIDEBARS*/
.container-with-float {
    position: fixed;
    justify-content: center;
    padding: 10px;
    text-align: center;  
    width: 15%; 
    height: 100%;
    background-color: #2A4D14; 
    border: 5px solid #f9cd1b;
    border-radius: 10px; 
    z-index: 1;
}

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

#left-sidebar {
   left: 0;
}

#right-sidebar {
   right: 0;
}

#left-sidebar,
#right-sidebar {
   display: block;
  z-index: 1;/* Hidden by default */
}

#left-sidebar.active,
#right-sidebar.active {
  display: none; /* Shows when active class is added */
}

.sidebar-img {
  border: 3px solid #f9cd1b;
  border-radius: 10px;
  height: 150px;
  width: 198px;
  margin-top: 10px;
  margin-bottom: 10px;
  
}

/*LEFT*/
#who {
    transition: animation;
  }
    
    #who:hover {
      animation: shake 0.5s;
      animation-iteration-count: infinite;
    }

#globe {
    width: 100%;
    max-width: 100%;
}

.party {
    text-align: center;
    background-image: url("assets/sidebar/club.jpg");
    border-radius: 15px;
    width: 240px;
    justify-content: center;
    max-height: 100%; max-width:100%;
}

/*RIGHT*/
.bash {
    background-image: url("assets/sidebar/webwave.gif");
    background-size: cover;
    border: 3px solid #f9cd1b;
    border-radius: 15px; 
    height: 150px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
  
.sites {
    background-image: url("https://i.pinimg.com/originals/92/3a/a6/923aa6382e8c1723a07cad53fcc79033.gif");
    background-size: 100%;
    border: 3px solid #f9cd1b;
    border-radius: 15px; 
    height: 150px;
    color: white;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.grass {
    background-image: url("https://i.pinimg.com/originals/0c/59/be/0c59beadee6dc82ac4c641dc17176860.gif");
    background-size: 100% cover;
    border: 3px solid #f9cd1b;
    border-radius: 15px; 
    height: 150px;
    width: 198px;
    color: white;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.blog-picture-1 {
    background-image: url("https://i.pinimg.com/originals/a8/2c/6e/a82c6eabd57ddec699dbbe6f21e57a04.gif");
    background-size: 100% ;
    border: 3px solid #f9cd1b;
    border-radius: 15px; 
    height: 150px;
    width: 198px;
    color: white;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
} 


.blog-picture-2 {
    background-image: url("https://i.pinimg.com/736x/f4/8e/71/f48e71fe85ac2d08e11efff1c6e0a62c.jpg");
    background-size: 100% ;
    border: 3px solid #f9cd1b;
    border-radius: 15px; 
    height: 150px;
    width: 198px;
    color: white;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.art-preview {
    max-height: 200px;
    border: 3px dotted #f9cd1b;
    max-width: 200px;
}

.art-preview img {
    height: 200px;
    width: 200px;
}

/* ABOUT.HTML */
.main-about {
    border: 3px solid #f9cd1b;
    border-radius: 20px; 
    width: 100%;
    padding: 15px;
}

  .main-about p {
    font-family: "Comic Sans MS", "Comic Sans";
  }
  
  .main-about img {
    float: left
  }
  
  .main-about a {
    text-align: center;
  }

#socials-buttons {
    display: inline-block;
    border: gold 3px solid;
    border-radius: 15px;
    padding: 5px;
    margin: 5px;
}

.corkboard {
  max-height: 100%;
  max-width: 100%;
}

#gamesList {
    display: none;
}

#moviesList {
    display: none; 
}

#animeList {
    display: none;
}

#bookList {
    display: none;
}

#tvList {
    display: none;
}

.media-tech {
}

#tvChannel {
    position: relative;
    background-color: black;
}

#tv {
    position: absolute;
    top: -30px;   /* move image upward */
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
}

.media-listing{
    text-align: center;
    justify-content: center;
    background-image: url("assets/pinefloorbackground.JPG");
    border: 3px solid #f9cd1b;
    border-radius: 20px; 
    padding: 15px;
    width: 100%;
    max-width: 800px;
}

.media {
    flex-direction: row;
    text-align: left;
    background-color: #c08403;;
    border: 3px solid #f9cd1b;
    border-radius: 20px;
    padding: 15px;
    overflow-y: scroll;
    max-width: 800px;
}

.media img {
    height: 200px;
    width: 147px;
    padding: 5px;
    border: 3px solid #f9cd1b;
    border-radius: 20px;
}

.media tr {
    padding: 10px;
}

.media-picture {
    background-image: url("https://i.pinimg.com/originals/e2/b0/40/e2b040fad81a9b7a75c3ec2ba3b113fc.gif");
    background-size: 100% auto;
    border: 3px solid #f9cd1b;
    border-radius: 15px; 
    height: 150px;
    width: 198px;
    color: white;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.media-picture2 {
    background-image: url("https://i.pinimg.com/originals/2a/fe/68/2afe68ad8312a546af038efcaeaa9214.gif");
    background-size: 100% ;
    border: 3px solid #f9cd1b;
    border-radius: 15px; 
    height: 150px;
    width: 198px;
    color: white;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.media-picture3 {
    background-image: url("https://i.pinimg.com/originals/44/6b/81/446b818528118589d7e3ca0bb77d2659.gif");
    background-size: 100% auto;
    border: 3px solid #f9cd1b;
    border-radius: 15px; 
    height: 150px;
    width: 198px;
    color: white;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}


/*ART.HTML*/
.art-display {
    text-align: center; 
    background-color: #379555;
    border: 3px solid #f9cd1b;
    border-radius: 10px; 
    justify-content: center;
    margin: auto;
    width: 1000px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #a7a7a7;
    border: 3px solid #f9cd1b;
    border-radius: 10px; 
    margin: auto;
}

.gallery-item {
    margin: 5px;
    border: 1px solid #ccc;
    width: 180px;
}


.gallery-item:hover {
    border: 1px solid #777777;
}  

.gallery-item img {
    width: 100%;
    height: auto;
}
.gallery-item .desc {
    padding: 15px;
    text-align: center;
    font-family: Dico;
}

/*BLOG.HTML*/
.Entry {
    position: relative;
    text-align: center; 
    justify-content: center;
    
    background-image: url("assets/paper.jpg");
    background-position: left top;
    background-repeat: repeat;
    
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 400px;
    padding: 35px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: scroll;
    
    border: #ADD8E6 2px double; 
    border-radius: 20px; 
}



  .Entry p {
    font-family: typewriter;
    color: black;
  }
  
  .Entry-images img {
    height: 200px;
    width: 200px;
  }


/*GRAPHICS*/

.badges {
    position: relative;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    
    background-image: url("assets/steel.jpg");
    
    border: double 3px black;
    border-radius: 20px;
    
    width: 100%;
    max-width: 700px;
    margin: auto;
}

.blinkies {
    position: relative;
    text-align: center;
    justify-content: center;
    
    background-image: url("assets/envelope.jpg"); 
    background-size: 100%;
    background-repeat: repeat;
    
    border-style: double;
    border-radius: 20px; 
    
    width: 100%;
    max-width: 700px;
}

.Buttons {
    position: relative;
    text-align: center;
    justify-content: center;
    
    background-image: url("assets/steel.jpg"); 
    background-size: 100%;
    background-repeat: repeat;
    
    border-style: double;
    border-radius: 20px; 
    
    width: 100%;
    max-width: 700px;
}

.stamps {
    position: relative;
    text-align: center;
    justify-content: center;
    
    background-image: url("assets/envelope.jpg"); 
    background-size: 100%;
    background-repeat: repeat;
    
    border-style: double;
    border-radius: 20px; 
    
    width: 100%;
    max-width: 700px;
}

.links {
    position: relative;
    text-align: center;
    justify-content: center;
    
    background-color: #9b9a9a;
    
    border-style: double;
    border-radius: 20px;
    
    width: 100%;
    max-width: 750px;
}

Buttons img{
    display: inline-block;
    transition: transform .2s ease-in-out;
    transform-origin: center;
}
    
  Buttons img:hover{
    transform: scale(1.3);
  }








.poster-1 {
  background-image: url("assets/eternity.jpg");
  width: 150px;
  height: 225px;
  max-height: 100%; max-width:100%;
}





/* ===== DARK MODE STYLES ===== */
body.dark-mode {
  background-image: url("assets/bluesparkle.gif");
  background-repeat: repeat;
}

body.dark-mode p {
    color: #eeff0a;
}

body.dark-mode h1 {
    color: #eeff0a;
}

body.dark-mode .main-header {
    background-color: #000000;
}

body.dark-mode .header {
    background-color: #000000;
}

body.dark-mode .container-with-float {
    background-color: #383eec;
}

body.dark-mode .party {
    background-image: url("assets/sidebar/nightclub.jpg");
}

body.dark-mode .bash {
  border-color: #aa00ff;
}

body.dark-mode .sites {
  background-image: url("assets/sidebar/brain.gif");
  border-color: #aa00ff;
}

body.dark-mode .grass {
    background-image: url(https://i.pinimg.com/originals/22/c8/05/22c805f2e6521a609b65e20433fd9eb5.gif);
}

body.dark-mode .blog-picture-1 {
    background-image: url("https://i.pinimg.com/originals/35/b2/ad/35b2adf6df8ad94fbc0313034918aeb9.gif");
}

body.dark-mode .blog-picture-2 {
    background-image: url("https://i.pinimg.com/736x/71/ed/26/71ed26b94da65c607f865069ce06aa24.jpg");
}

body.dark-mode .side-note {
    background-color: #000000;
}

body.dark-mode .Entry p {
    font-family: typewriter;
    color: black;
}

body.dark-mode .media-listing {
    background-color: #911bbd;
}

body.dark-mode .media {
    background-color: #f22d58;
}

body.dark-mode .poster-1 {
  background-image: url("assets/panther.jpg");
}

body.dark-mode .art-display {
    background-color: #ff00b7;
    color: white;
}

body.dark-mode .gallery {
    background-color: #000000;
}

body.dark-mode .links {
    background-color: #000000;
}

body.dark-mode .lower {
    background-color: #000000;
}