/* == Fonts and other imports ==*/

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

/* If you have your own font hosted somewhere, you can just format it like this! (This is how I have one of mine :D)
@font-face {
    font-family: 'PixelOperator';
    src: url("https://ne0nbandit.neocities.org/assets/fonts/PixelOperator.ttf") format("truetype");
  }
*/

/* == MAIN == */
body {
    margin: 8px; /* This prevents things from sticking to the edges of the screen :) */
    padding: 0;
    cursor: url(https://file.garden/aKiVtvT2mTk-AieW/cursor2.png), auto;
    background-image: url(https://file.garden/aKiVtvT2mTk-AieW/2ruY.gif);
    font-family: 'DotGothic16', sans-serif;
    color: #c8d4ee; /* Default Text colour! */
    background-color: #4731dd; /* If you BG doesn't load, this colour will be underneath */
    background-attachment: fixed; /* Keeps background from scrolling along with the page! */
    background-repeat: repeat;
}

* { box-sizing: border-box; } /* to be fully honest I still don't know how this specific thing works but when I add it, it fixes some sizing issues with the boxes on my website and it seems to have the same effect on yours so I'm adding it lol */

h1 { /* Big text for titles etc */
    text-align: center;
    color: #e74c3c;
    margin: 10px;
}


a { /* Links! */
    color: #ffbe00;
    text-decoration: none; /* Prevents links for having the underline by default */
    transition: 0.25s; /* The speed at which your link will change colour etc when hovered :) */
}

a:hover {
    cursor: url('https://file.garden/aKiVtvT2mTk-AieW/cursorpoint.png'), auto;
    color: #4e0028;
}

/* SOPPINGLINES */
.soppinglines {
transition: 0.1s;
}

.soppinglines:hover {
cursor: url('https://cdn.discordapp.com/attachments/1041251780996116503/1110235929148395584/cursorpoint.png'), auto;
}

.soppinglines:active {
transform: scale(0.95);
}

/* == BOXES ETC == */
.CoolMainBox { /* You can name this to whatever you like, just make sure the name also matches in the .html file :) Any box you make with class="CoolMainBox" will have this structure! */
    border: 3px solid #c8d4ee;
    box-shadow: 5px 5px 6px #4e0028;    
    font-size: 18px;
    background-color: #1c000f;
    background-image: url(https://cdn.discordapp.com/attachments/760229616165584946/1110021407271817226/2ruYdarkened.gif);
    background-repeat: repeat;
    max-width: 900px;
    margin: 10px auto;
    padding: 50px;
    text-shadow: 2px 1px 1px #3f3256;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #c9bdeb #090563;}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar { width: 15px; }
*::-webkit-scrollbar-track { background: #090563;}
*::-webkit-scrollbar-thumb { background: #c9bdeb;}


/* == CRT FILTER ==*/
.crt::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
  }
  
@keyframes flicker {
    0% {
    opacity: 0.27861;
    }
    5% {
    opacity: 0.34769;
    }
    10% {
    opacity: 0.23604;
    }
    15% {
    opacity: 0.10626;
    }
    20% {
    opacity: 0.18128;
    }
    25% {
    opacity: 0.10626;
    }
    30% {
    opacity: 0.18128;
    }
    35% {
    opacity: 0.23604;
    }
  }
  
.crt::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

/* RESPONSIVE LAYOUTS */
/* Basically whenever your screen goes below the specified widths, these things will apply to the current CSS */

@media only screen and (max-width: 1115px) { /* For tablet/ipad-like screens */
h1 {
    line-height: 40px;
}

.CoolMainBox {
    padding: 20px; /* Decreases the space between the images and the edges of the box */
}
}

@media only screen and (max-width: 700px) { /* Mobile screens*/
.CoolMainBox {
    padding: 10px;
}
}