/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* Fonts */
    @font-face {
    font-family: CafeTW;
    src: url('https://jay6t4.neocities.org/CafeTw.ttf');}
    @font-face {
    font-family: NSwitch;
    src: url(https://jay6t4.neocities.org/nintendo_ext.ttf);}
    @font-face {
    font-family: Kabel;
    src: url('https://jay6t4.neocities.org/ITCKabelStd-Demi.otf');}
    @font-face {
    font-family: KabelBold;
    src: url('https://jay6t4.neocities.org/ITCKabelStd-Bold.otf');}
    @font-face {
    font-family: Eras;
    src: url('https://jay6t4.neocities.org/ERASBD.TTF');}
    
/* Page setup */

    body {
    background-image: url("theme/wallpaper.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    font-family: CafeTW; 
    font-size: 17px;
    color: #101010;
    text-shadow: 1px 1px 0px #808080;
    width: 1277px;
    margin-left: auto;
    margin-right: auto;
    }

    img {vertical-align: middle;}
    
/* Link colours */ 
    a:link {
    color: #8282AA;
    background-color: transparent;
    text-decoration: none;}
    a:visited {
    color: #8282AA;
    background-color: transparent;
    text-decoration: none;}
    a:hover {
    color: #FF0028;
    background-color: transparent;
    text-decoration: none;}
    a:active {
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;}

/* Custom header text */
    h1 {
    font-family: Eras;
    color: #FFFFFF;
    text-shadow: -1px 0 #0000FF, 0 1px #0000FF, 1px 0 #0000FF, 0 -1px #0000FF;
    text-align: right;
    font-size: 60px;
    transform: scaleY(0.80);
    margin-top: 40px;
    margin-bottom: 36px;
    width: auto;
    }
    @media screen and (max-width: 749px) {
      h1 {
      text-align: center;
      font-size: 45px;
      margin-top: 100px;
      margin-bottom: 16px;}
      }
    h2 {
    font-family: Eras;
    color: #FFFFFF;
    text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
    text-align: center;
    font-size: 32px;
    font-variant: small-caps;
    margin-top: 12px;
    margin-bottom: 12px;
/*     background-image:url("header.png"); */
/*     background-repeat: no-repeat; */
/*     background-position: bottom center; */
    }
    h3 {
    font-family: Eras;
    color: #FFFFFF;
    text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
    text-align: center;
    font-size: 24px;
    font-variant: small-caps;
    margin-top: 8px;
    margin-bottom: 8px;
    }
    footer {
    margin-top: 92px;
    text-align: center;
    }
    
/* Main content (default theme colour is blue) */
    #main {
    border: 5px solid transparent;
    border-image: url(/theme/borderblue.png) 5 round;
	  float: right;
	  width: 936px;
	  padding: 0px 32px 24px 32px;
	  margin-top: 32px;
	  margin-bottom: 32px;
    background-image: url(theme/logo.png), url(theme/bodyheaderblue.png), url(theme/bodyfooterblue.png), url(theme/bodystripe.png), url(theme/bodyshape.png), url(theme/bodyshape2.png), linear-gradient(180deg, #A0C0FFC0, #003CB4C0);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
    background-position: 33px 16px, top left, bottom right, top left, top left, bottom right, 0px 0px;
    background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, fixed;
    }
    
/* Navigation bar */
    #navbar {
    border: 5px solid transparent;
    border-image: url(/theme/borderblue.png) 5 round;
	  float: left;
    width: 225px;
    position: fixed;
    top: 32;
    z-index: 1;
    background-image: linear-gradient(180deg, #7AA1E6, #6375D6);
	  margin-top: 32px;
	  padding-top: 16px;
	  padding-bottom: 16px;
    overflow-x: hidden;
    text-align: center;
    }
    #navbar a {
    display: block;
    }
    #navbardivide {
    display: inline-block;
    margin: 8px;
    }
    #ani {
    margin-top: 16px;
    }

/* Back to top button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
 /*   font-size: 18px; */
  border: none;
  outline: none;
 /*  background-image: red; */
 /*  color: white; */
  cursor: pointer;
  padding: 0px; 
 /* border-radius: 4px; */
}
    
/* Borders */
    #borderblue {
    border: 5px solid transparent;
    border-image: url(/theme/borderblue.png) 5 round;
    }
    #borderred {
    border: 5px solid transparent;
    border-image: url(/theme/borderred.png) 5 round;
    }

/* Polaroid image */
    #polaroid {
    background-image: url("theme/polaroid.png");
    width: 219px;
    height: 265px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    }
    #polaroid img {
    width: 175px;
    height: 175px;
    border-style: solid;
    border-width: 1px;
    border-color: #808080;
    margin: 25px 24px 0px 20px;
    top: 0;
    object-fit: contain;
    background-color: #00000040;
    }
    #polaroid p {
    position: relative;
    text-align: center;
    transform: translate(-3px,-4px);
    font-weight: bold;
    color: black;
    text-shadow: none;
    }
        
/* Mobile optimisation */
    @media screen and (max-width: 1276px) {
    body {
    width: 95%;
    margin: auto;
    }
  #main {
		float: none;
    margin: auto;
		max-width: 94%;
	  padding-left: 8px;
	  padding-right: 8px;
	  margin-top: 0px;
	  margin-bottom: 32px;
    }
  #navbar {
		float: none;
		width: 94%;
    overflow: auto;
    white-space: nowrap;
		max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
	  margin-bottom: 24px;
	  padding: 4px 16px 4px 16px;
    }
  #navbar a {
  display: inline-block;
	  }
  #ani {
    display: inline-block;
    margin-top: 0px;
    margin-left: 16px;
    }
  #ani img {
    width: 90px;
    }
}