body {
    background: #000000;
    overflow: scroll;
    color:#ffbf00;
    font-family: "arial";
    font-size: 20px;
}

h1 {
    color: #ffbf00;
    font-family: "arial black";
    font-size: 90px;
    display: flex;
    align-content: center;
    justify-content: center;
    
}

h2 {
    color: rgb(255, 191, 0);
    font-family: "arial black";
    font-size: 40px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100px;
}

h2:hover{
    color: white;
    animation: flicker2 1s infinite alternate;
}

h3 {
    color: rgb(255, 191, 0);
    font-family: "arial";
    display: flex;
    align-content: center;
    justify-content: center;
}


.menu{
    width: 20%;
    height: 10px;
    padding-left: 10px;
    justify-content: left;
    transform: translateX(70%);
}

#container{
    width: 750px;
    height: 300px;
    justify-content: left;
    padding: 1%;
    margin: auto;
    overflow: scroll;
}

#container-film{
    width: 830px;
    height: 400px;
    margin: auto;
    padding: 1%;
    overflow: scroll;
    justify-content: center;
}

.imagebutton-narrative{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
}

.imagebutton-narrative-swagapino{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/swagapino.jpg)
}

.imagebutton-narrative-room53b{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/)
}

.imagebutton-narrative-bingo-man{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/bingo%20man.png);
}

.imagebutton-narrative-skin{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/bingo%20man.png);
}

.imagebutton-narrative-itsjustacting{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/IJA%20STILL%202.png);
}

.imagebutton-narrative-jamesandjimmy{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/james%20and%20jimmy.jpg);
}

.imagebutton-narrative-sliceoflife{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/slice%20of%20life.jpg);
}

.imagebutton-narrative-pinkgunk{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/ICUPGASNINYM.jpg);
}

---

.imagebutton-editing{
    width: 450px;
    height: 160px;
    margin:auto;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-image: url("images/work/IJA%20STILL.png");
    background-size: cover;
}

.imagebutton-documentary{
    width: 450px;
    height: 157px;
    margin:auto;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-image: url("images/work/into%20the%20lights.jpg");
    background-size: cover;
}

.imagebutton-narrative-warofthecrowns{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/WOTC.png);
}

.imagebutton-narrative-intothelights{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/into%20the%20lights.jpg);
}

.imagebutton-narrative-fightlikeagirl{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/FLAG.jpg);
}



---

.imagebutton-musicvideo{
    width: 450px;
    height: 157px;
    margin:auto;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-image: url("images/work/angel.png");
    background-size: cover;
}

.imagebutton-narrative-angel{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/angel.png);
}

.imagebutton-narrative-valkyree{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/valkyree.jpg);
}

.imagebutton-narrative-mrmirror{
    width: 450px;
    height: 164px;
    margin:auto;
    margin-inline: auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-size: cover;
    background-image:url(images/work/mr%20mirror.png);
}

---

.imagebutton-pinkgunk{
    width: 450px;
    height: 164px;
    margin:auto;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    opacity: 75%;
    background-image: url("images/work/ICUPGASNINYM.jpg");
    background-size: cover;
}

#back{
    width: fit-content;
    justify-content: center;
    margin: auto;
}

#password{
    width: fit-content;
    justify-content: center;
    margin: auto;
    align-content: center;
    display: flex;
    transform: translateY(150px);
    
}


.my-button {
  color: #ffbf00;              /* Text color */
  text-decoration: none;     /* Removes the underline */
  display: inline-block;     /* Allows for padding and margins */
  border-radius: 5px;        /* Rounded corners */
  cursor: pointer;           /* Changes mouse icon to a hand */
}

.go-back {
  color: #ffbf00;              /* Text color */
  text-decoration: none;     /* Removes the underline */
  display: inline-block;     /* Allows for padding and margins */
  border-radius: 5px;        /* Rounded corners */
  cursor: pointer;           /* Changes mouse icon to a hand */
}

.go-back:hover::before{
    content: "bruh go ";
}

.flicker {
    color: white;
    animation: flicker 0.5s infinite alternate;
}

@keyframes flicker{
    100% {
        color: rgba(166, 166, 166, 0.16);
    }
    0% {
        color:#ffbf00;
    }
}

@keyframes flicker2{
    100% {
        color: rgb(255, 255, 255);
        font-size: 42px;
    }
    0% {
        color:#ffbf00;
        font-size: 40px;
    }
}