a:link{
  color:blue;
}

a:visited{
  color:blue;
}


@font-face{
  font-family: "Illegal Pixels";
  src: url("../fonts/illegalpixels.woff2") format("woff2");
  font-weight:normal;
  font-style:normal;
}

@font-face{
  font-family: "Blade Runner";
  src: url("../fonts/blade-runner-movie-font/BladeRunnerMovieFont-4nx9.ttf") ;
  font-weight:normal;
  font-style:notmal;
}

@font-face{
  font-family:"Artilux";
  src: url("../fonts/et-artilux/ETArtilux-Regular.ttf") ;
  font-weight:normal;
  font-style:normal;
}
@media (max-width:950px){

    .column{
        width:100%;
    }

    .main-content{
        padding:10px;
    }

    .title-card h1{
        font-size:70px;
        letter-spacing:6px;
    }

    .vine{
        display:none;
    }

}




body{
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScnQgAQNKJ0ls7zK5s27nv0oFupjpqFLUv0AuCKf9Ztw&s=10");
  background-position:  center top;
  background-attachment: fixed;
  background-size:cover;
}
.main-content {
display: flex;
justify-content:center;
align-items:center;
min-height:100vh;
gap:20px;
padding:40px;
font-family: "Illegal Pixels";
font-size:22px;
width:100%;
color:white;

}

.title-card{
  background-image:var(--background-image);
  width:auto;
  width:100%;
align-self:center;
border: solid white 2px;
font-size:120px;
letter-spacing:12px;
margin:0;

}


:root {
  --content-width: 1000px;
}


.column {
display:flex;
flex-direction:column;
width: var(--content-width);
background-color:transparent;
min-height:100vh;
position:relative;
border-radius: 0;
image-rendering:pixelated;
z-index:1;
padding: 20px 20px 20px 20px;
border:white solid 2px;
}

.boxes {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}



.boxes .box {
break-inside: avoid;
border: solid white;
min-width: 0;
}


.card {
background: black;
border-right: 2px solid white;
border-bottom: white solid 2px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
background-image:var(--background-image);
background-size:contain;
background-attachment: fixed;
overflow:scroll;
max-height:300px;
max-width:350px;
}


.card ul {
margin: 0;
padding: 0;
list-style: square;
}


.card ul li {
padding: 6px 0;
border-bottom: 1px solid white;
font-size: 20px;
}

.card p{
  margin: 0;
padding: 0;
padding: 6px 0;
border-bottom: 1px solid white;
font-size: 20px;
}

.card img{

  max-width:250px;
  max-height:250px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: baseline;
color: white;
background-color: black;
padding: 7px;
gap: 1rem;
font-family: monospace;
font-family:"Illegal Pixels";
}

.Intro-text{
text-align:left;
padding-bottom:20px;
padding-top: 20px;
line-height:1.6rem;
font-size:26px;
border: 2px solid white;
color:white;
margin:0;
padding:35px;
background-image:var(--background-image);
background-repeat:repeat-x;
background-size: cover;
}

.gridrion {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(120px, auto);
grid-auto-flow: dense;
gap: 0;
}

.card-wide {
grid-column: 1 / -1;
}

:root{
  --background-image:url("https://media.tenor.com/bQvEhQcSGmEAAAAM/twinkle-little-star.gif");
}

* {
box-sizing: border-box;
}

.scanlines:before {
    width: 100%;
    height: 2px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.75;
    animation: scanline 6s linear infinite;
}

.scanlines:after {
    top: 0;
    bottom: 0;
    z-index: 2147483648;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 51%
    );
    background-size: 100% 4px;
    animation: scanlines 1s steps(60) infinite;
}

@keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
}

@keyframes scanlines {
    0% {
        background-position: 0 50%;
    }
}

div {
    margin: 0;
    padding: 0;
}

body {
  text-align: center;
  margin:0;
}

.scanlines {
    position: relative;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
/*Styling individual box sizes!*/
.box1 {
  grid-column: span 2;
  grid-row: span 2;
}