/*FONTS*/
 @font-face {
        font-family: whiteonblack;
        src: url(fonts/WhiteOnBlack.ttf) format(truetype); 
    }
     @font-face {
        font-family: cutout;
        src: url(fonts/NewspaperCutoutWhiteOnBlac-Rg.ttf) format(truetype); 
    }

      @font-face {
        font-family: cricket;
        src: url(fonts/CRICKET-PERSONAL-USE.ttf) format(truetype); 
    }
        @font-face {
        font-family: elite;
        src: url(fonts/SpecialElite-Regular.ttf)format(truetype); 
    }
    
        @font-face {
        font-family: panic;
        src: url(fonts/Panic.ttf) format(truetype); 
    }
    
        @font-face {
        font-family: diesel;
        src: url(fonts/Diesel-Crack.ttf) format(truetype); 
    }
        @font-face {
        font-family: averia;
        src: url(fonts/AveriaLibre-Regular.ttf) format(truetype); 
    }
        @font-face {
        font-family: kosugi;
        src: url(fonts/KosugiMaru-Regular.ttf) format(truetype); 
    }
    
    
/*FONTS*/

.nav {
    display: flex;
    width: 1024px;
    min-width: 360px;
    height: 100px;
    background-image: url(Media/Backgrounds/Banner.png);
    text-align: center; }


.navtext {
    display: flex;
    margin-top: 25px;
    font-size: 40px;
    font-family: whiteonblack;
    color: #d14f9b;
    text-align: center; 
    margin-left: auto;
    margin-right: auto;
    a {
    color: #d14f9b;
    text-decoration: none;
}
}

a.optionnav:hover {
  color: #43a52b;

}
body {
    background-image: url(Media/Backgrounds/image-from-rawpixel-id-18984836-original.jpg); 
    background-size: cover;
    background-repeat: repeat; 
    
}
/*INDEX ONLY*/
.gifbox {
    position: absolute;
    display: flex;
    gap: 45px;
margin-left: 150px;
margin-top: -60px;
    width: 150px;
height: 80px;


    border-radius: 12px;
img {
    margin-left: 0px;
    margin-top: 0px;
    height: 100px;
border-radius: 14px; border: 3px; border-style: solid; border-color: #d14f9b;
}}
.indexpage {
    width: 1080px;
    margin-top: 10px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.indexpage2 {
    display: flex;
    width: 1100px;
    align-items: center;
    margin-right: auto;
    margin-left: 25px;
    margin-top: 10px;
    gap: 0px;
    
}
.index-sidebar {
    text-align: center;
    width: 310px;
    height: 720px;
    background-image: url(Media/Backgrounds/siderbar.png);
    background-repeat: no-repeat;   
}

.sidebarbox {
    display: inline-flexbox;
    width: 240px;
    height: 220px;
    margin-left: 20px;
    margin-right: auto;
    background-image: url(Media/Backgrounds/box3.png);
    background-size: 100%;
    text-align: center;
    line-height: 30px;
    font-family: averia;
    font-size: 15px;
    background-repeat: no-repeat;
    img { width: 175px;
    margin-left: 0px; margin-top: 1px;}
    a { color: #d14f9b; }
}
.index-main {
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    width: 690px;
    height: 720px;
    background-image: url(Media/Backgrounds/page.png);
    background-repeat: no-repeat;
    
}
.smallheader {
    
width: 300px;
background-repeat: no-repeat;
background-image: url(Media/Backgrounds/smallheader.png);
position: absolute;
background-size: auto;
height: 50px;
margin-top: -10px;
margin-left: 2px;
color: rgb(255, 255, 255);
font-family: cutout;
text-indent: 20px;
line-height: 0px;
font-size: 30px;
}

.index-welcome {
width: 380px;
margin-left: 15px;
margin-top: 20px;
background-repeat: no-repeat;
text-indent: 30px;
line-height: 50px;
font-size: 35px;
background-image: url(Media/Backgrounds/title.png);
background-size: 370px;
height: 65px;
color: white;
font-family: cutout;
}
.index-visitors {
height: 120px;
width: 200px;
margin-left: 85px;
margin-top: -10px;
background-color: #f8de49;
transform: rotate(-10deg);
border: 2px; border-color: rgb(255, 255, 255); border-style: solid; border-radius: 50%;
font-size: 20px;
font-weight: bolder;
text-align: center;
backdrop-filter: blur(10px);
}
.introbox {
    height: 200px;
    width: 600px;
    margin-top: -15px;
    margin-left: 20px;
    margin-bottom: 0px;
    background-image: url(Media/Backgrounds/introbox.png);
    background-repeat: no-repeat;
    background-size: 600px 200px;
    border-radius: 20px;
    color: rgb(0, 0, 0);
    }
.introbox2 {
    height: 200px;
    width: 600px;
    margin-top: -100px;
    margin-left: 0px;
    margin-bottom: 0px;
    background-image: url(Media/Backgrounds/introbox.png);
    background-repeat: no-repeat;
    background-size: 600px 200px;
    border-radius: 20px;
    color: rgb(0, 0, 0);
    }

    .textintro {
        flex-wrap: wrap;
        height: 200px;
        width: 580px;
     color: rgb(0, 0, 0);
     margin-left: 20px;
     font-family: averia;
     font-size: 16px;
    }
.indexsecondary {
    overflow: visible;
    gap: 20px;
    align-items: center;
    margin-left: 25px;
    margin-top: -40px;
    display: inline-flex;
    flex-wrap: wrap;
    width: 800px;
    height: 600px; }

.scrollbox1 {
    overflow: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    margin-top: 0px;
    height: 300px;
    width: 300px;
    background-image: url(Media/Backgrounds/scrollbarbox.png);
background-repeat: no-repeat;
background-position-y: 20px;
font-size: 16px;
font-family: averia;
}
.scrollbox1text {
    font-family: averia;
    overflow: scroll;
    scrollbar-width: none;
    line-height: 20px;
    margin-top: 10px;
    padding: 10px;
    width: 290px;
}
/*SP Cycle*/
.gimmickwheel {
    overflow: hidden;
    width:225px;
    max-width: 300px;
    margin: 28px;
    border: 2px; border-color: rgb(2, 1, 0); border-style: dashed; border-radius: 15px;
}
@keyframes slide {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-117%);} /* play w this number till it works lollsz*/
}
.strawpagecycle {
    display: flex;
    width: 600%;
    animation: slide 12s linear infinite;
}

.strawpagecycle img {
   width:275px;
}