:root {
                --body-bg-image: url('christmas/snowflake bg.gif');

                /* colors */
                --content: #000000;
            }

            /* if you have the URL of a font, you can set it below */
            /* feel free to delete this if it's not your vibe */

            /* this seems like a lot for just one font and I would have to agree 
    but I wanted to include an example of how to include a custom font.
    If you download a font file you can upload it onto your Neocities
    and then link it! Many fonts have separate files for each style
    (bold, italic, etc. T_T) which is why there are so many!
    
    */

            @font-face {
                font-family: sans-serif;
                src: url('fonts/s2glove.ttf');
            }
            
            @font-face {
                font-family: sans-serif;
                src: url('fonts/Porcelain-Regular.otf');
            }

            @font-face {
                font-family: sans-serif;
                src: url('fonts/s2glove.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: sans-serif;
                src: url('fonts/s2glove.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: sans-serif;
                src: url('fonts/s2glove.ttf');
                font-style: italic;
                font-weight: bold;
            }

            body {
                font-family: 'S2G Love', sans-serif;
                font-weight: 800;
                margin-left: 0px;
                background-color: #CBC8F3;
                background-size: 350px;
                color: #7F77FF;
                background-image: var(--body-bg-image);
                width: 360px;
                height: 100%;
                background-repeat: repeat;
                margin-top: 0;
                margin-bottom: 0;
                margin-left: 0;
               margin-right: 0;
               padding-left: 0;
               padding-right: 0; 
               background-position: bottom left;
              
            }
            
            #topborder{
background-image: url('christmas/xmas4.gif');
background-repeat: repeat-x;
height: 73px;
width: 100vw;
position: fixed;
top: 0px;
z-index: 2;
}
            
  #container {
                max-width: 1000px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }
            
            #container a {
                color: #000000;
                font-weight: bold;
                text-decoration: none;
}

#flex {
                display: flex;
            }


#menu {
  position: fixed;
  left: 1px;
  padding: 0px;
  width: 400px;
  height: 100%;
  border-right: 1px solid #000;
  background-color: #CBC8F3;
	background-image: url("christmas/starsxmas.png");
  background-size: 400px;
  overflow-x: hidden;
	overflow-y: scroll;
  top: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
}


.menutext {
  font-family: 'S2G Love', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #898EFC;
	line-height: 12pt;
	letter-spacing: 1px;
	text-align: justify;
	margin: 10px;
	margin-bottom: 10px;
  }

 main {
    border: dotted #898EFC 2px;
    position: fixed;
    top: 90px;
    left: 550px;
    height: 500px;
    width: 400px;
    background-image:url('christmas/silverpaper.png');
    background-color: #CBC8F3;
    float: center;
    height: 70%;
    width: 40%;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 1;
    padding: 20px;
    text-align: center;
  }
  
  .maintext {
    font-size: 20px;
    margin: 20px;
    font-family: 'S2G Love', sans-serif;
    src: url('fonts/s2glove.ttf');
    color: #898EFC;
  }
              
            }
}
.subtitle {
	text-align: left;
	color: #CBC8F3;
	font-weight: bold;
	line-height: 22px;
	margin: 15px 0;
	letter-spacing: 1px;
	font-size: 20px;
	text-transform: uppercase;
	font-family: 'S2G Love'; 
	background: #898EFC;
	border: 1px dashed #000;
	text-shadow: 2px 2px #000;
  border-radius: 15px;
}
.title {
	font-weight: 100;
	text-transform: uppercase;
		font-family: 'S2G Love', sans-serif;
	color: #898EFC;
	font-size: 58px;
	line-height: 54px;
	text-align: center;
	margin: 15px 0;
	font-weight: bold;
}

 h1,
            h2,
            h3 {
                color: #000000;
            }

            h1 {
                font-size: 40px;
            }

            strong {
                /* this styles bold text */
                color: #000000;
            }
            
            .nav li{
list-style-image: url('mini111.gif');
margin-bottom: 5px;
}

            .nav a{
color: #898EFC;
}

.nav a:visited{
color: #898EFC;
}

.nav a:hover{
text-shadow: 0px 0px 5px #898EFC;
font-style: normal;
transform: rotate(-15deg);
}

.nav a:active{
font-style: italic;
text-shadow: 0px 0px 5px #898EFC;
}

 tape {
    position: fixed;
    top: 30px;
    right: 450px;
    height: 86px;
    max-width: 200px;
    z-index: 1;
  }            
            
            
             .img{
align-self: center;
top: 350px;
right: 10;
width: 27%;
min-width: 20%;
position:fixed;
 z-index: 3;
}

            .img2{
align-self: center;
top: 100px;
left: 1500;
width: 100px;
position:fixed;
z-index: 3;
}

            niss{
top: 45px;
left: 450;
width: 100px;
position:fixed;
z-index: 3;
transform: rotate(20deg);
}


@keyframes float {
    0%   { transform: translate(0, 0px); }
    50%  { transform: translate(0, -8px); }
    100% { transform: translate(0, 0px); }
}

#float { animation: 2s linear 0s infinite float }
.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 1.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.imgtxt:hover span, .imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img, .imgtxt:focus img {
  /* add hover effects like transform or filter to your images here! */
}
.hoverspin:hover {
  transform:rotate(360deg);
  transition:.7s ease
}

</style>