:root{
    --white: #FAFAFA;
    --dark-blue: #054494;
    --black: #0e0e0e;
    --dark-grey:#1e1e1e;
    --dark-green: #12a64e;
    --green: #46ffbc;
    --blue:#4d80c9;
    --dark-purple:#53236a;
    --brown: #803922;
    --purple: #9e71ff;
    --grey: #aeb5bd;
    --red: #e93841;
    --dark-pink: #fc54ff;
    --pink:#fda1ff;
    --tan: #ffd19d;
    --yellow: #ffd646;
    --orange: #FF7246;
    --prism: linear-gradient(to right, var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--dark-pink));
}

@keyframes scanline {
    0% {
        bottom: 100%;
    }
    100% {
        bottom: -20%;
    }
}

html{
    margin:0;
    padding:0;
    width:100%;
    height:100vh;
    overflow: hidden;
    background:var(--dark-grey) radial-gradient(ellipse at center, transparent 10px, transparent 70%, var(--black) 110%);
    color: var(--white);
    font-size: calc(0.75em + 1vmin);
    font-family: 'Press Start 2P', sans-serif;
}

body{
    width:100%;
    height:100%;
    overflow:hidden;
    position: relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding:1.2rem; */
    margin:0;
    perspective: 200px;
}

*{
    box-sizing: border-box;
}

body:before{
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index:3;
    background: radial-gradient(ellipse at 0% 110%, transparent 10px, transparent 70%, var(--white) 120%); 
    mix-blend-mode: soft-light;
    border:0px solid transparent;
    border-image-source: url(../img/screen-border.svg);
    border-image-slice: 35;
    border-image-width: 65px;
    border-image-outset: 1;
    pointer-events: none;
}

body:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        to bottom,
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.05) 50%
    );
    background-size: 100% 8px;
    z-index: 2;
    pointer-events: none;
    border:0px solid transparent;
    border-image-source: url(../img/screen-border.svg);
    border-image-slice: 35;
    border-image-width: 65px;
    border-image-outset: 1;
}

.scanline {
    width: 100%;
    height: 100px;
    z-index: 1;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 255, 255, 0.1) 10%,
        rgba(0, 0, 0, 0.1) 100%
    );
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    animation: scanline 5s linear infinite;
}

#crt{
    width:100%;
    height:100%;
    background-color: var(--black) ;
    background:linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 5%, transparent 95%, rgba(0,0,0,0.8) ), radial-gradient(ellipse at center, var(--dark-grey), var(--black));
    position:relative;
    padding:4rem;
}

#content{
    width:100%;
    height:100%;
    background: transparent;
    border:2px solid var(--white);
    filter: drop-shadow(0px 0px 4px var(--white));
    border-radius: 1rem;
    overflow: hidden;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
}

.main{
    width:100%;
    height:auto;
    flex:1;
    padding:.5rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size:.6rem;
    filter: none;
}

@keyframes blink{
    0%, 49.9%{
        opacity:0;
    }
    50%, 100%{
        opacity:1;
    }
}

.main img{
    mix-blend-mode: screen;
    width:100%;
    max-width:12rem;
    height:auto;
    filter: drop-shadow(0px 0px 3px rgba(255,255,255,0.1)) !important;
    opacity:0;
    animation:blink 2s linear .8s infinite forwards;
}

.main p{
    /* opacity:0; */
    color: var(--white);
    text-align: center;
    line-height: 2;
    /* background: var(--prism);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* animation:blink 2s linear .8s infinite forwards; */
}

.text{
    width:100%;
    height:2rem;
    padding:.5rem;
    font-size:.8em;
    text-align:center;
}

.btn{
    background:transparent;
    color:#FFF;
    border:3px solid #FFF;
    border-radius:.8rem;
    padding:.8rem 1.5rem;
    font-size:.8rem;
    font-family: 'Press Start 2P', sans-serif;
    cursor: pointer;
}

.btn:hover{
    border-color:#46ffbc;
    color:#46ffbc;
    transform: translate(0,.2rem);
}