body {
    margin: 0;
    padding: 0;
    background-color: black;
    background-image:  linear-gradient(rgba(0, 0, 0, 0), black), url("/img/bg/f_arch.png"), url("/img/bg/f_pillar.png");
    background-position: center bottom, center top, center top;
    background-repeat: repeat, repeat-x, repeat;
    background-size:1vh, auto, auto;
    min-height: 100vh;

    color: white;
    font-family: monospace;
    image-rendering: crisp-edges;
}

@media screen and (max-width: 1280px) {
    #monitor{
        width: 100%;
        height: 100%;
        background-color: rgba(250, 235, 215, 0.397);
    }
}

@media screen and (min-width: 1280px) {
    #monitor{
        width: 1280px;
        height: 720px;
        background-image: linear-gradient(rgba(189, 85, 0, 0.733),rgba(189, 85, 0, 0));
        border-radius: 10px;
    }
}
#frame{
    padding: 5%;
}
#monitor{
    margin: auto;
}
#heider{
    margin: auto;
    text-align: center;
    font-family:monospace;
    font-size: 4em;
    color: white;
}

@keyframes tagline-colours {
    0%      {color: cyan;}
    25%     {color: yellow;}
    50%     {color: magenta;}
    75%     {color: black;}
    100%     {color: cyan;}
}

#tagline-bar{
    animation-name: tagline-colours;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    text-align: center;
    font-size: 1.5em;
}
#main-grid{
    display: grid;
    min-height: 100%;
    margin: 10px;
    grid-template-columns: 60% 40%;
    gap: 10px;
}

.grid-box{
    border: 10px ridge rgb(122,105,85);
}

#left-box{
    grid-row-start: 1;
    grid-row-end: 3;
    display: grid;
    grid-template-columns: auto;
    text-align: center;
    font-size: 2em;
}

.cover-image{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

@keyframes get-enormous {
    from      {transform: scale(1);}
    to   {transform: scale(2);}
}

.sub-fiend:hover{
    animation-name: get-enormous;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

#right-top{
    display: flex;
    justify-content: center;
    align-items: center;
}
#right-bottom{
    display: flex;
    justify-content: center;
    align-items: center;
}
#email-button{
    background-image: url("/img/buttons/email.png");
    width: 114px;
    height: 110px;
    background-size: cover;

}
#email-button:hover{
    background-image: url("/img/buttons/email_hover.png")
}