@font-face {
    font-family: 'Muff';
    src: url('src/font/Muff.woff2') format('woff2'),
         url('src/font/Muff.woff') format('woff'),
         url('src/font/Muff.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Muffdiff';
    src:
        url('src/font/Muffdiff.woff2') format('woff2'),
         url('src/font/Muffdiff.woff') format('woff'),
         url('src/font/Muffdiff.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nikki';
    src:
        url('src/font/YumeNikkiTitleScreen.woff2') format('woff2'),
         url('src/font/YumeNikkiTitleScreen.woff') format('woff'),
         url('src/font/YumeNikkiTitleScreen.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}








#welcome{
    background-color: black;
}
#home{
     background-color: black;
}

.background{
z-index: -3;
}


.logo {
    align-content: center;
    display: block;
    margin: auto;
    position: relative;
}


/* Warning section */
.alleyway {
    align-content: center;
    display: block;
    margin: auto;
    width: 1200px;
    height: 750px;
}

.welcbox{
    width: 90%;
    height: 500px;
    padding: 1px;
     margin-top: -600px;
     margin-right: 115px;
    overflow:auto;
    position:relative;
}

.nano{
    width: 389px;
    height: 596px;
    position: relative;
    margin-left: 715px;
    margin-top: -555px;
}
/* Warning section Ends here*/


/*navigation stuff*/

.navmen{
    width: 1000px;
    height: 60px;
    border-style: double;
    border-color: rgb(32, 30, 28);
    border-radius: 17px;
    position: relative;
    margin-top: 20px;
    background-image: linear-gradient(rgb(97, 90, 90), rgb(53, 51, 50));
}
.topnav{
    position: relative;
     display: inline;
     padding: 3px 0px 0px 3px;
}  

/* its not needed but i can come back to this and possibly reuse it for a future thing
.art{
    background-image: url(src/imp/art1.png);
    width: 250px;
    height: 80px;
    display: inherit;
}

.art:hover{
    background-image: url(src/imp/art2.png);
    display: inherit;
    z-index: -2;
}


.wiki{
    background-image: url(src/imp/wiki1.png);
    width: 250px;
    height: 80px;
    display: inherit;
}

.wiki:hover{
    background-image: url(src/imp/wiki2.png);
    z-index: -2;
    display: inherit;
}
*/

/*navigation stuff Ends here*/

.truemain{
width: 1150px;
height: 1000px;
display: flex;
position: relative;
margin-top: -1060px;
column-gap: 7px;
padding: 1px 0px 0px 1px;
}


#side{
     width: 250px;
    height: 800px;
    border-style: groove;
  border-width: thick;
  border-color: rgb(24, 22, 21);
    position: relative;
    order: 1;
       border-radius: 10px;
       overflow-x: hidden;
       overflow-y: hidden;
       background-image: linear-gradient(rgb(97, 90, 90), rgb(53, 51, 50));
}

#Main{
     width: 900px;
    height: 800px;
    border-style: groove;
     border-width: thick;
     border-color: rgb(22, 9, 44);
    position: relative;
    order: 2;
    border-radius: 10px;
    background-image: url(src/imp/stars3.gif);
}


.content{
     width: 900px;
    height: 800px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    overscroll-behavior: contain;
}

.sidecontent{
    width: 200px;
    height: 450px;
    overflow-y: hidden;
    overflow-x: hidden;
    text-align: center;
    border-style: groove;
    border-color: rgb(22, 9, 44);
    padding: 5px 5px 5px 5px ;
    background-image: linear-gradient(rgb(68, 63, 63), rgb(31, 29, 29));
}

/*scroll the thing that makes the scroll for the buttons*/
.scroll{
    width: 1010px;
    border-style: double;
    border-color: rgb(32, 30, 28);
    margin-top: -185px;
    position: relative;
    background-image: linear-gradient(rgb(97, 90, 90), rgb(53, 51, 50));
}



.marquee {
    width: 1000px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap; 
    animation: marquee 20s linear infinite; 
    transition: animation 0.5s ease-in-out;
}

.marquee:hover .marquee-content {
    animation-play-state: paused;
    transition: animation 1s ease-in-out;
}

.marquee-content img {
    margin: 0 5px;
    vertical-align: middle;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } 
}
/*scroll*/

/*Images*/

/*Commissions*/
.combox{
     width: 900px;
    height: auto;
    border-style: groove;
     border-width: thick;
     border-color: rgb(0, 0, 0);
    position: relative;
    margin-top: -1040px;
    border-radius: 10px;
    background-image: linear-gradient(rgb(68, 63, 63), rgb(31, 29, 29));
}

.comtent{
     width: 900px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: justify;
    overscroll-behavior: contain;
}

.commissions{
    column-count: 2;
    column-rule-style: double;
    column-gap: 5px;
}
/*Commissions end*/










/*boxes*/

.updates{
   width: 780px;
   height: 300px;
   border-style: dotted dotted dashed dotted;
   border-color: rgb(68, 83, 80);
   overflow: scroll; 
   overflow-x: hidden;
   text-align: center;
   margin-left: 50px;
background-image: url(src/blink/oldbg.jpg);
border-radius: 4px;
}















p {
    font-family: 'Muff';
    font-size: 20px;
}

h1{
    font-family: 'Muffdiff';
}

h2{
    font-family: 'Muffdiff';
}

h3{
    font-family: 'Muffdiff';
    font-size: 30px;
}


h4{
    font-family: 'Nikki';
    font-size: 40px;
    font-weight: normal;
}

h5{
    font-family: 'Nikki';
    font-size: 20px;
    font-weight: normal;
}