/* =========================================
   TEREKO TV - STYLE CSS
   Retro CRT / Neocities / TV Network
========================================= */


@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');


/* RESET */

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


body {

    background:
    radial-gradient(circle at center,#101040,#020208);

    color:white;

    font-family:"VT323", monospace;

    min-height:100vh;

    overflow-x:hidden;

}


/* =========================================
   CRT EFFECT
========================================= */


body::before {

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:999;

    background:
    repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.04) 1px,
        transparent 2px,
        transparent 4px
    );

}


body::after {

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:
    radial-gradient(
        circle,
        transparent 50%,
        rgba(0,0,0,.5)
    );

}



/* =========================================
   HEADER
========================================= */


header {

    text-align:center;

    padding:30px;

    background:

    linear-gradient(
        180deg,
        #07152f,
        #020208
    );

    border-bottom:

    3px solid #00eaff;

    box-shadow:

    0 0 25px #00eaff;

}



.logo {

    font-family:"Press Start 2P";

    font-size:35px;

    color:#00eaff;

    text-shadow:

    0 0 10px #00eaff,
    0 0 25px #00eaff;

}



.subtitle {

    font-size:28px;

    margin-top:15px;

    color:#ddd;

}



/* =========================================
   NAVIGATION
========================================= */


nav {

    margin-top:25px;

}



nav a {

    display:inline-block;

    margin:5px;

    padding:12px 18px;

    background:#111;

    color:#00eaff;

    text-decoration:none;

    border:

    2px solid #00eaff;

    font-size:22px;

    transition:.3s;

}



nav a:hover {

    background:#00eaff;

    color:#000;

    box-shadow:

    0 0 20px #00eaff;

    transform:translateY(-5px);

}



/* =========================================
   TV SCREEN
========================================= */


.tv-container {

    display:flex;

    justify-content:center;

    margin:50px auto;

}



.tv {

    width:550px;

    max-width:90%;

    background:#252525;

    border:

    20px solid #333;

    border-radius:35px;

    padding:25px;

    box-shadow:

    0 0 40px black,

    0 0 50px #00eaff;

}



.screen {

    height:300px;

    background:

    linear-gradient(

    135deg,

    #001b2b,

    #003b55

    );

    border:

    8px solid black;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    animation:

    screenFlicker 3s infinite;

}



.screen h1 {

    font-family:"Press Start 2P";

    font-size:35px;

    color:#00eaff;

    text-shadow:

    0 0 20px #00eaff;

}



@keyframes screenFlicker {


0%,100% {

opacity:1;

}


50% {

opacity:.85;

}


}


/* =========================================
   SECTIONS
========================================= */


.section {

    max-width:1100px;

    margin:40px auto;

    padding:30px;

    background:

    rgba(5,5,20,.9);

    border:

    2px solid #00eaff;

    box-shadow:

    0 0 20px #00eaff;

}



.section h2 {

    font-family:"Press Start 2P";

    font-size:20px;

    color:#00eaff;

    margin-bottom:20px;

}



.section p {

    font-size:25px;

    line-height:1.4;

}



/* =========================================
   CARDS
========================================= */


.cards {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}



.card {

    flex:1;

    min-width:230px;

    background:#111;

    padding:25px;

    border:

    2px solid #333;

    transition:.3s;

}



.card:hover {

    border-color:#00eaff;

    box-shadow:

    0 0 15px #00eaff;

    transform:translateY(-8px);

}



.card h3 {

    color:#00eaff;

    font-size:28px;

}



/* =========================================
   BUTTONS
========================================= */


.button {

    display:inline-block;

    margin-top:20px;

    padding:15px 25px;

    background:#00eaff;

    color:black;

    text-decoration:none;

    font-size:24px;

    border:

    3px solid white;

    transition:.3s;

}



.button:hover {

    background:white;

    box-shadow:

    0 0 20px white;

}



/* =========================================
   ON AIR
========================================= */


.onair {

    position:fixed;

    right:20px;

    top:20px;

    z-index:100;

    background:red;

    padding:12px;

    border-radius:10px;

    font-family:"Press Start 2P";

    font-size:12px;

    animation:

    blink 1s infinite;

}



@keyframes blink {

50% {

opacity:.3;

}

}



/* =========================================
   FOOTER
========================================= */


footer {

    text-align:center;

    padding:40px;

    margin-top:50px;

    border-top:

    2px solid #00eaff;

    font-size:25px;

}



/* =========================================
   MOBILE
========================================= */


@media(max-width:700px){


.logo {

font-size:20px;

}


.subtitle {

font-size:22px;

}



.screen {

height:200px;

}


.screen h1 {

font-size:20px;

}



.section {

margin:20px;

padding:20px;

}


}