@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;
    }

}

.magic-wrap {
  display: flex;
  margin: 0 auto;
  align-items: stretch;
  min-height: 100vh;
  max-width: 1100px;
}
.super-sidebar {
   height: 100%;
  width: 160px; 
  position: fixed; 
  z-index: 1; 
  top: 0; 
  left: 0;
  background-color: #0B0B45;
  overflow-x: hidden; 
  padding-top: 20px;
  transition: 0.5s;
}

.main-content {
display: flex;
justify-content:center;
align-items:stretch;
min-height:100vh;
gap:20px;
background-color: #8FAD17;
padding:40px;
font-family: "Illegal Pixels";
font-size:22px;
}
.column {
display:flex;
flex-direction:column;
width: var(--content-width);
background-color:#0000AA;
min-height:100vh;
position:relative;
border-radius: 0;
image-rendering:pixelated;
z-index:1;
border-image-source: url("../Images/Vine.png");
border-image-slice: 33 35 33 35;
border-image-width: 50px 50px;
border-image-repeat: round;
border-width:33px 35px;
border-style: solid;
padding: 10px;
}






.box {
  padding: 30px;
}
.small-box {
  padding: 20px;
}
.review {
  max-width: 800px;
  padding: 20px;
  margin: 20px;
  border: 2px solid white;
}

@media (max-width: 800px) {
  .magic-wrap {
    flex-direction: column;
  }
  .super-sidebar {
    width: 100%;
  }
}
.banner{
  display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    text-decoration:none;
    background-size:cover;
    background-position:center;
    border:2px solid black;
    transition:transform .2s;
    height:200px;
    border-radius:15px;
}

.newbox{
 display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
    margin: 20px;
    color: white;
    text-decoration: none;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .2s;
}

.newbox h2{
  font-size: 46px;
text-shadow:3px 3px black;
text-align:center;
}

.newbox:hover{
  transform:scale(1.2);
}

.box-test1{
  background-image:url(../Images/Typewriter.png);
  justify-content:flex-start;
  background-position: bottom center;
}
.box-test2{
  background-image:url("../Images/Logo.png");
  background-size:250px 250px;

  text-align:center;
  background-position: center;
}
.box-test2 h2 {
    padding-left: 0;
    margin: 0;
}
.box-test3{
  background-size:250px 250px;
  background-image:url("../Images/PixCalendar.png");

}
.box-test4{
  background-image:url("../Images/JournalPix.png");
  background-size:250px 250px;
  background-position:bottom center;
}
.box-test5{
  background-image:url("../Images/LocalvoidPix.png");
  background-size:250px 250px;
}
.banner h2{
font-size: 46px;
text-shadow:3px 3px black;
}
.banner:hover{
 transform:scale(1.02);
}

.banner1{
  background-image:url(../Images/parchment_background.jpg.avif);
}
.banner2{
  background-image:url(../Images/Redleather.jpg);
}

.banner3{
background-image:url(../Images/Linedpaper.jpeg);
}
.banner4{
  background-image:url(../Images/Calendar.png);
}
.banner5{
  background-image:url(https://media.istockphoto.com/id/1498878143/photo/book-stack-and-open-book-on-the-desk-in-modern-public-library.jpg?s=612x612&w=0&k=20&c=vRcxdgfHSFJkow6DNPtaL9DT_ttdMGWel-qRLEzkQEI=);
}
.banner6{
  background-image:url(Images/Guestbook.png);
}

.banner7{
  background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScnQgAQNKJ0ls7zK5s27nv0oFupjpqFLUv0AuCKf9Ztw&s=10");
}
.title-card{
text-align:center;
border-bottom: 2px dotted gold;
height:auto;
padding:35px;
}
.title-card h1{
color:#EFBF04;
margin: 0;
font-family: "Times New Roman";
width:100%;
text-shadow:5px 5px black;
align-self:center;
border: 2px dotted gold;
font-size:120px;
letter-spacing:12px;
}
.Intro-text{
text-align:left;
padding-bottom:20px;
padding-top: 20px;
line-height:1.6rem;
font-size:26px;
border: 2px dotted gold;
color:#EFBF04;
margin:0;
padding:35px;
}

.link-section{
display:flex;
    flex-direction:column;
    gap:30px;
    border: 2px dotted gold;
    padding:35px;
}
.link-sectionnew-container{
  padding:none;
  display:flex;
    flex-direction:row;
    width:100%;
}
.link-sectionnew{
      gap:30px;
    border:none;
    padding:none;
    display:flex;
    flex-direction: row;
width:100%;
margin:0 auto;
justify-content:center;
align-content:center;
}
/*?showcounter=true*/


.spin{
  background-color: transparent;
  animation-name: spin;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


.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;
}

.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;
}


.hoverbox {
  position: relative;
  display: inline-block;
  cursor: pointer;
}


.hovertext {
  visibility: hidden; 
  width: 200px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; 
    bottom: 100%;
  left: 30%;
  margin-left: -50px;
 
}


.hoverbox:hover .hovertext {
  visibility: visible;
}


* { box-sizing: border-box; }

:root {
--duration: 30s;
}

@keyframes ticker{
  0%{
    transform:translate3d(0, 0, 0);
    visibility:visible;
  }
  100%{
    transform: translate3d(-100%, 0, 0);
  }
}

.ticker-wrap {
  border:2px white solid;
  border-radius:15px;

  overflow: hidden;
font-family:"Illegal Pixels";
  background-color: #000000;
  padding-left: 100%;

  position: fixed;
bottom:0;
    display: inline-block;
    height: 4rem;
    line-height: 4rem;  
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    padding: 0 2rem;
  font-size: 2rem;
  color: white;
  transform: translateX(-50%);
  left:50%;
  width: 835px;
  z-index:2;
}
  .ticker {
position: fixed;
bottom:0;
    display: inline-block;
    height: 4rem;
    line-height: 4rem;  
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: var(--duration);
  }

.ticker-wrap .ticker-item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 2rem;
  color: white;
}



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

@keyframes bounce{
0% {transform: scale(1);}

50%{transform: scale(1.2)}

100%{transform: scale(1)}

}

.bouncer{
animation:bounce 10s infinite;
height:200px;
}


.new{
  font-weight:normal;
}

.new:after{
  content:"*New*";
  color:lightblue;
}