@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    user-select: none;
    background-color: black;
}

.launchpage {
  background-image: url("./groovy.jpg");
  background-size: cover;
  background-position: center center;
  ba
  width: 100vw;
  height: 100vh;
}

.center {
  display: block;
  text-align: center;
}

h1 {
  font-size: 8vw;
  font-family: 'Modak', cursive;
  font-weight: 100;
  color: white;
  text-shadow: black 1px 0 12px;
}

#launchbtn {
    position: relative;
    top: 20vh;
}

#gallerybtn {
  margin-top: 7em;
}

#gallerybtn a {
  margin-top: 7em;
  border: .1em solid #431e05;
  border-radius: .5em;
}

a {
    font-size: 8vw;
    color: black;
    background-color: #fd881f;
    border-radius: 1.7vw;
    padding: 1vw 2vw .6vw 2vw;
    text-decoration: none;
    font-family: 'Bebas Neue', sans-serif;
}

a:hover {
  color: #fd881f;
  background-color: black;
}

.gallerypage {
    background-color: black;
    width: 100vw;
    height: auto;
    display: grid;
    grid-template-areas:
        "img img"
        "status status"
        "prevlbl nextlbl"
        "back next";
    grid-template-rows:
        auto
        auto
        2em
        auto;
    grid-template-columns: 1fr 1fr;

}

#statusupdate {
    grid-area: status;
    color: white;
    text-align: center;
    font-size: 3vh;
}

#currentimg {
    grid-area: img;
    object-fit: contain;
    width: calc(100% - 3vw);
    height: auto;
    object-fit: contain;
    border: 1.5vw solid white;
    border-radius: 1vw;
    margin: 1.5vw;
}

#prevlbl {
    grid-area: prevlbl;
    color: white;
    width: 100%;
    text-align: center;
    font-size: 1em;
    margin-top: .5em;
}

#nextlbl {
    grid-area: nextlbl;
    color: white;
    width: 100%;
    font-size: 1em;
    margin-top: .5em;
    text-align: center;
}

#previmg {
    grid-area: back;
    width: calc(100% - 3vw);
    height: auto;
    object-fit: contain;
    border: 1.5vw solid white;
    border-radius: 1vw;
    margin: 1.5vw;
}

#nextimg {
    grid-area: next;
    width: calc(100% - 3vw);
    height: auto;
    object-fit: contain;
    border: 1.5vw solid white;
    border-radius: 1vw;
    margin: 1.5vw;
}