/* == 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/giphy-export.gif);
    font-family: 'DotGothic16', sans-serif;
    color: #c8d4ee; /* Default Text colour! */
    background-color: #000000; /* 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: #c8d4ee;
    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;
}


/* == 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: #000000;
    max-width: 900px;
    margin: 10px auto;
    padding: 50px;
    text-shadow: 2px 1px 1px #3f3256;
}

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

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


/* 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;
}
}