@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

.bungee-spice-regular {
  font-family: "Bungee Spice", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.honk{
  font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 15,
    "SHLN" 50;
}

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

.alfa-slab-one-regular {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Ion Gold';
  src: url('../Assets/Fonts/IonGold-Regular.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

*{
  color-scheme: light dark;
  image-rendering: pixelated;
}

body{
  width: 100vw;
  height: 100vh;
  margin: 0%;
  padding: 0%;

  header{
    display: grid;
    grid-template-columns: 10% 90%;
    grid-template-rows: 100%;

    height: 10%;
    background-color: light-dark(silver, slategray);
    background-image: url('../Assets/Dark/shelf\ side.png');
    background-size: contain;
    background-repeat: repeat-x;

    align-items: center;

    h1{
      height: 100%;
      margin: 1%;

      img{
        height: 80%;
        margin: 1%;
      }
    }

    ul{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      column-gap: 15pt;

      height: 80%;
      margin: 1%;

      justify-content: right;

      li{
        list-style: none;

        background-color: slategray;
        background-image: url('../Assets/White\ Noise.gif');
        background-size: cover;
        background-repeat:repeat-x;
        position: relative;
        

        height: 90%;
        display: flex;

        align-items: center;

        border-style:groove;
        border-color: sienna;
        box-shadow: 1pt 1pt 1pt Black;


        a{
          font-family: 'Ion Gold', "Alfa Slab One", serif;
          text-decoration: none;
          color: orange;
          background: radial-gradient(circle,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0) 100%);
          font-size: xx-large;
          padding: 10pt;
        }
      }
    }
  }
  
  main{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 25% 75%;
    overflow-y: scroll;

    height: 85%;
    background-color: light-dark(Seashell,  Indianred);
    background-image: url('../Assets/Dark/ceiling\ demo.png');
    background-size: contain;
    background-repeat: repeat;

    justify-items: center;
    align-items: center;
    
    #About{
      display: grid;
      grid-template-columns: 100%;
      grid-row: 20% 80%;

      justify-items: center;
      text-align: center;
      margin-top: 1%;
      

      width: 95%;
      background-color: darkslategray;
      background-image: url('../Assets/monitor.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border-style: inset;
      border-color: dimgray;
      box-shadow: 6pt 6pt 7pt Black;

      h2{
        font-family: 'Ion Gold', "Alfa Slab One", serif;
        color: orange;
        font-size: xx-large;
        padding: 0;
        margin: 1%;
      }

      p{
        max-width:95%;
        font-family: "VT323", monospace;
        color: light-dark(Floralwhite, Ghostwhite);
        font-size: x-large;
        padding: 0;
        margin: 0;
        margin-bottom: 24pt;

        a{
          color: red;
        }
      }
    }

    #Content{
      display: grid;
      grid-template-columns: 30% 65%;
      grid-template-rows: 100%;

      justify-content: space-between;
      align-items: center;

      height: 90%;
      width: 95%;

      #Gallery{
        display: grid;
        grid-template-columns: 95%;
        grid-template-rows: 20% 60%;

        width: 100%;
        height: 100%;
        background-color: darkslategray;
        background-image: url('../Assets/monitor.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-style: inset;
        border-color: dimgray;
        box-shadow: 6pt 6pt 7pt Black;
        
        justify-content: center;

        h2{
          font-family: 'Ion Gold', "Alfa Slab One", serif;
          color: orange;
          font-size: xx-large;
          text-align: center;
          width: 100%;

          border-bottom: solid;
          border-color: whitesmoke;
          align-content: center;

          padding: 0;
          margin: 0;
        }
        
        #ScreenForPics{
          display: block;
          grid-template-columns: 100%;
          grid-template-rows: 100%;

          width: 100%;
          overflow-y: scroll;
          justify-content: center;
          align-content: center;
          text-align: center;

          border-bottom: solid;
          border-color: whitesmoke;

          #Trailer{
            display: grid;
            grid-template-columns: 100%;
            grid-auto-rows: 5% 90%;
            row-gap: 5%;

            height: 95%;
            align-items: center;
            justify-items: center;

            border-bottom: solid;
            border-color: whitesmoke;
            border-width: 1pt;
            padding-bottom: 2%;

            h3{
              font-family: 'Ion Gold', "Alfa Slab One", serif;
              color: orange;
              font-size: xx-large;
              height: 100%;
              align-content: center;
            }

            video{
              max-height: 95%;
              max-width: 95%;
              border-style: double;
              border-width: 3pt;
            }
          }

          #Images{
            border-bottom: solid;
            border-color: whitesmoke;
            border-width: 1pt;
            padding-bottom: 2%;

            h3{
              font-family: 'Ion Gold', "Alfa Slab One", serif;
              color: orange;
              font-size: xx-large;
              height: 100%;
              padding-bottom: 2%;
            }
            div{
              border-style: solid;
              border-color: whitesmoke;
              border-width: 0.5pt;
              h4{
                font-family: 'Ion Gold', "Alfa Slab One", serif;
                color: orange;
                font-size: x-large;
                height: 100%;
                padding-bottom: 2%;
              }
              img{
                max-height: 95%;
                max-width: 95%;
                border-style: double;
                border-width: 3pt;
              }
              video{
                max-height: 95%;
                max-width: 95%;
                border-style: double;
                border-width: 3pt;
              }
            }
          }
        }
      }

      #Text{
        display: grid;
        grid-template-columns: 95%;
        grid-template-rows: 20% 60%;

        width: 100%;
        height: 100%;
        background-color: darkslategray;
        background-image: url('../Assets/monitor.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-style: inset;
        border-color: dimgray;
        box-shadow: 6pt 6pt 7pt Black;

        justify-content: center;

        h2{
          font-family: 'Ion Gold', "Alfa Slab One", serif;
          color: orange;
          font-size: xx-large;
          text-align: center;
          width: 100%;

          border-bottom: solid;
          border-color: whitesmoke;
          margin: 0;
          align-content: center;
          }
        }
        
        #ScreenForText{
          display: block;
          grid-template-columns: 100%;
          grid-template-rows: 100%;

          width: 100%;
          overflow-y: scroll;
          justify-content: center;
          text-align: center;

          border-bottom: solid;
          border-color: whitesmoke;

          div{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;

            align-items: center;
            justify-items: center;

            border-bottom: solid;
            border-color: whitesmoke;
            border-width: 1pt;

            h3{
              font-family: 'Ion Gold', "Alfa Slab One", serif;
              color: orange;
              font-size: xx-large;
              margin: 12pt;
              padding: 0pt;
              align-content: center;
            }

            p{
              max-width:95%;
              font-family: "VT323", monospace;
              color: light-dark(Floralwhite, Ghostwhite);
              font-size: x-large;
              margin-top: 0;

              a{
                color: red;
              }
            }
            div{
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;

              justify-content: space-evenly;
              align-items: center;

              div{
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;

                justify-content: space-evenly;
                align-items: center;

                border: solid;
                border-color: whitesmoke;
                border-width: 1pt;
                h4{
                  font-family: 'Ion Gold', "Alfa Slab One", serif;
                  color: orange;
                  font-size: x-large;
                  margin: 12pt;
                  padding: 0pt;
                }
                p{
                  font-family: "VT323", monospace;
                  color: light-dark(Floralwhite, Ghostwhite);
                  a{
                    color: red;
                  }
                }
                a{
                  img{
                    width: 200px;
                    max-width: 100%;
                  }
                  #exception{
                    height: 200px;
                    width: 200px;
                    object-fit: cover;
                    object-position: 18%;
                  }
                }
              }
            }
          }
        }
      }
    }
    
    footer{
      display: flex;
      flex-direction: row;
  
      height: 5%;
      background-color: maroon;
      background-image: url('../Assets/Dark/floor\ pt.png');
      background-size: contain;
      background-repeat: repeat;
  
      align-items: center;
      justify-content: space-between;
  
      p{
        margin: 2%;
  
        color: antiquewhite;
        font-family: "Bungee Spice", sans-serif;
        
        a{
          font-family: "Honk", system-ui;
          font-size: x-large;
          text-decoration: none;
          color: royalblue;
        }
      }
    }
  }
  
@media only screen and (max-width: 1300px){
    body{
      main{
          #Content{
            grid-template-columns: 49% 49%;
          }
        }
      footer{
        p{
          font-size: xx-small;
          a{
            font-size: small;
          }
        }
      }
    }
}

@media only screen and (max-width: 600px){
  body{
    header{
      grid-template-columns: 50% 50%;
      grid-template-rows: 100%;
      justify-content: center;
      align-items: center;

      height: 10%;
      h1{
        max-width: 100%;
        img{
          width: 100%;
        }
      }
    }

    main{
      grid-template-columns: 95%;
      grid-template-rows: 20% 100% 50%;

      justify-content: center;
      align-items: center;
      #About{
        margin-top: 40%;
      }
      #Content{
        grid-template-columns: 100%;
        grid-template-rows: 100% 100%;
        margin-top: 70%;

        row-gap: 5%;
      }
    }

    footer{
      p{
        font-size: 1%;
      }
    }
  }
}

@media (prefers-color-scheme: light)
{
  body{
    header{
      background-image: url('../Assets/Light/marvel.png');
    }

    main{
      background-image: url('../Assets/Light/small lobby walls.png');
      background-size: cover;
      background-repeat: round;
    }

    footer{
      background-image: url('../Assets/Light/frame top.png');
    }
  }
}