@font-face {
            font-family: 'Poppin';
            src: url('https://oopsallcereal.neocities.org/fonts/Poppin-Regular.woff') format('woff');
        }
        h1 {
            font-family: 'Poppin';
        }

html {
    background-image: url("https://oopsallcereal.neocities.org/images/Untitled-1.png");
}
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  grid-template-columns: 1fr 5fr;
  gap: 3px;
  padding: 5px;
}

:root{
scrollbar-face-color: yellow;
scrollbar-track-color: orange;
scrollbar-color: orange yellow;
scrollbar-width: thick;
}

.container div {
  padding: 10px;
}
.container div.header {
  grid-area: header;
  text-align: center;
border: 2px dotted yellow;
  border-left:none;
  border-right:none;
  border-top:none;
}
.container div.menu {
  grid-area: menu;
  margin-top: 5%;
  border: 2px dotted yellow;
  border-left:none;
  border-bottom: none;
  border-top: none;
}
.menu li {
list-style: none;
margin-left: -10%;
}
.menu li a:hover {
filter: contrast(140%); brightness(80%); 
cursor:crosshair;
transition: 0.3s ease-in;

}

.container div.content {
  grid-area: content;
  height: 100%;
  }
.container div.footer {
  grid-area: footer;
  text-align: center;  
}


/* Sidebar Hidden */
.w3-teal {
  display: none; 
}
#photos {
    display: flex;
    align-items: flex-start;
    margin-left: 8%;
    flex-wrap: wrap;
}

#photos figure {
    margin: 10px;
    max-width: min-content;
}

#photos img {
    border: 3px ridge #c3c3c3;
    width: 15em;
    /* Enable this for pixel art!! */
    /* image-rendering: pixelated; */
}

#photos img:hover {
    border-color: #ffda00;
}

#photos span {
    text-align: center;
    display: block;
}

#photos figcaption {
    padding: 10px 0px;
}

.page-links {
    text-align: center;
}

.page-links ul {
    padding: 0px 5px;
    margin: 10px 0px;
    display: inline-block;
}
.page-links li {
    list-style: none;
    display: inline;
    margin: 0px 3px;
}

/* Mobile Styling */

@media (max-width: 800px) {

    #photos figure {
        width: 95%;
        max-width: min-content;
    }

 #photos {
margin-left: -2%;
 }
 
}

#photos figure:nth-child(1) img {
    width: 15rem;
}
#photos figure:nth-child(7n) img {
    width: 10rem;
    transform: rotate(5deg) translateX(50%) translateY(50%);;
}

#photos figure:nth-child(2) img {
    width: 12rem;
    transform: rotate(-1deg) translateY(5%);
}

#photos figure:nth-child(3) img {
      width: 15rem;
    transform: translateY(30%);
}

#photos figure:nth-child(4) img {
  width: 10rem;
    transform: translateY(20%) rotate(1deg);
}

#photos figure:nth-child(5) img {
      width: 20rem;

    transform: translateY(0%);
}

#photos figure:nth-child(6) img {
      width: 20rem;

    transform: translateY(10%);
}

/* Styling for JavaScript viewer (if enabled) */

#js-viewer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.612);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#js-viewer img {
    max-width: 95%;
    max-height: 80%;
    height: auto;
    width: auto;
    border: 3px ridge #c3c3c3;
}

#js-viewer span {
    margin-top: 10px;
}

#js-viewer span button {
    border-radius: 0px;
    border: 2px outset #cecece;
    background-color: #e2e2e2;
    cursor: pointer;
}

#js-viewer span button:hover {
    border: 2px inset #cecece;
    background-color: #b8b8b8;
}

/* Mobile Styling */

@media (max-width: 1300px) {
.header img { 
  width: 25em;
    }
    #mainframe {
            margin-left: 0%;
}

#photos figure:nth-child(1) img {
    width: 15rem;
}
#photos figure:nth-child(7n) img {
    width: 5rem;
    transform: rotate(5deg) translateX(50%) translateY(50%);;
}

#photos figure:nth-child(2) img {
    width: 7rem;
    transform: rotate(-1deg) translateY(5%);
}

#photos figure:nth-child(3) img {
      width: 8rem;
    transform: translateY(30%);
}

#photos figure:nth-child(4) img {
  width: 5rem;
    transform: translateY(20%) rotate(1deg);
}

#photos figure:nth-child(5) img {
      width: 10rem;

    transform: translateY(0%);
}

#photos figure:nth-child(6) img {
      width: 20rem;

    transform: translateY(10%);
}


/*  Mobile */

@media (max-width: 1250px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) 3fr auto;
    grid-template-areas:
      "header"
      "content"
      "footer";
  }
  
  .header img { 
  width: 25em;
    }
    #mainframe {
            margin-left: 0%;
}

#photos figure:nth-child(1) img {
    width: 15rem;
}
#photos figure:nth-child(7n) img {
    width: 5rem;
    transform: rotate(5deg) translateX(50%) translateY(50%);;
}

#photos figure:nth-child(2) img {
    width: 7rem;
    transform: rotate(-1deg) translateY(5%);
}

#photos figure:nth-child(3) img {
      width: 8rem;
    transform: translateY(30%);
}

#photos figure:nth-child(4) img {
  width: 5rem;
    transform: translateY(20%) rotate(1deg);
}

#photos figure:nth-child(5) img {
      width: 10rem;

    transform: translateY(0%);
}

#photos figure:nth-child(6) img {
      width: 20rem;

    transform: translateY(10%);
}
}
#mainframe {
    border: groove;
    width: 100%;
   height: 100vh;    background-color: yellow;
        border-color: yellow;
            margin-left: 0%;
}
/* Sidebar Styling */
.w3-teal {display: block; width: 5rem; position: fixed;}
.w3-sidebar{height:23%;width:220px;background-image: url("https://oopsallcereal.neocities.org/images/Untitled-1.png");;position:fixed;z-index:1;overflow:hidden;border: dotted yellow 2px;}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}


.container div.menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 180px;
    height: calc(100vh - 50px);
    opacity: 1;
    grid-area: unset;
    transition: transform 1s ease;
    transform: translateX(-200%);  
  }
  
}