body{
background-image: url(img/skyloft2.jpg);
background-size: 100%;
}


@font-face {                  
font-family: 'UFO!';
src: url(https://humantooth.neocities.org/fonts/UFO!-Mono.woff) format('woff');
font-weight: normal;
font-style: normal;
} 
@font-face {                  
font-family: 'FT88-Italic';
src: url(https://humantooth.neocities.org/fonts/FT88-Italic.woff) format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {                  
font-family: 'Canarina';
src: url(https://humantooth.neocities.org/fonts/Canarina.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 



.headerbox{
background-image: url(img/textbox2.png);
width: 604px;
height: 134px;
transform: translate(-10px, -20px);
padding: 55px 0px 0px 100px;
float: left;
}

.header{
    width: 554px;
    color: #2c2112;
    text-shadow: 1px 1px 0px #b5a274, -1px 1px 0px #b5a274, -1px -1px 0px #b5a274, 1px -1px 0px #b5a274;
}

h1 {
font-family: 'UFO!';
font-size: 36px;
line-height: 41px;
}

.ft88{
    font-family: 'FT88-Italic';
    font-size: 20px;
}

.rightalign {
    float: right;
    padding-right: 50px;
}

.subheader {
    padding: 35px 20px 20px 0px;
    text-align: center;
    width: 500px;
    margin: 0px 0px 20px 0px;
    color:#2c2112;
    text-shadow: 1px 1px 0px #dcd2a4, -1px 1px 0px #dcd2a4, -1px -1px 0px #dcd2a4, 1px -1px 0px #dcd2a4;
    
}

.wiistamp {
    float:left;
    padding: 15px 0px 0px 0px;
    width: 75px;
    margin-left: 20px;
}

.nintendostamp {
    float: right;
    padding: 15px 0px 0px 0px;
    width: 75px;
    margin-right: 20px;
}

.vine {
    width: 510px;
    opacity: 75%;
    float: center;
    transform: translate(-10px, 0px);
}

.outline {
     text-shadow: 1px 1px 0px #b5a274, -1px 1px 0px #b5a274, -1px -1px 0px #b5a274, 1px -1px 0px #b5a274;
}

@font-face {                  
font-family: 'DepartureMono';
src: url(https://humantooth.neocities.org/fonts/DepartureMono.woff) format('woff');
font-weight: normal;
font-style: normal;
} 
@font-face {                  
font-family: 'unixel';
src: url(https://humantooth.neocities.org/fonts/unixel-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

p{
    font-family: 'unixel';
    font-size: 15px;
    
}

.ray{
    margin-top: -11px;
    margin-left: 115px;
    margin-bottom: -5px;
    font-size: 20px;
    text-shadow: 1px 1px 0px #74602f, -1px 1px 0px #74602f, -1px -1px 0px #74602f, 1px -1px 0px #74602f;
    color: #b5a274;
}
.pbg{
    background-color: #dcd2a4;
    padding: 20px;
    color: #2c2112;
    border: 4px solid #b5a274;
    border-radius: 7px;
}
.board1{
width: 42%;
border: 4px solid  #68a3c7;
border-radius: 7px;
background-color: #87cefa;
background-image: url(img/wood-pattern.png);
background-size: 50%;
float: left;
padding: 20px;
position: absolute;
left: 50px;
top: 210px;
}

.board2
{
width: 42%;
border: 4px solid  #68a3c7;
border-radius: 7px;
background-color: lightskyblue;
background-image: url(img/wood-pattern.png);
background-size: 50%;
float: right;
padding: 20px;
position: absolute;
top: 400px;
right: 30px;
}

.half{
 top: 210px;
}

.half2{
   top:810px;
}

.half3 {
    top: 525px;
}

.half4{
    top: 1340px;
}

.gallery{
    float: right;
    overflow: scroll;
    top: 1690px;
    background-color: #dcd2a4;
    padding: 20px;
    color: #2c2112;
    border: 4px solid #b5a274;
    border-radius: 7px;
    width: 42%;
    right: 30px;
    position:absolute;
    height: 300px;
}

.galleryimg {
    width: 500px;
}

.galleryimg2 {
    height: 200px;
}

.flowers {
    width: 42%;
    float: left;
    left: 50px;
}

.funpng {
    width: 100px;
    float: right;
    
}


#popup1 {
    border: 4px solid gray;
    background-color: white;
    width: 300px; 
    padding: 10px;
    position: fixed;
    top: 310px;
    left: 400px;
    z-index: 2;
    visibility: hidden;
}

#popup1 .show {
    visibility: visible;
}

#popup2 {
    border: 4px solid gray;
    background-color: white;
    width: 520px; 
    padding: 10px;
    position: fixed;
    top: 30px;
    right: 100px;
    z-index: 2;
    visibility: hidden;
}

#popup3 {
    border: 4px solid gray;
    background-color: white;
    width: 300px; 
    padding: 10px;
    position: fixed;
    top: 80px;
    left: 70px;
    z-index: 2;
    visibility: hidden;
}

#popup4 {
    border: 4px solid gray;
    background-color: white;
    width: 300px; 
    padding: 10px;
    position: fixed;
    top: 190px;
    right: 200px; 
    z-index: 2;
    visibility: hidden;
}
#popup4point5 {
    border: 4px solid gray;
    background-color: white;
    width: 300px; 
    padding: 10px;
    position: fixed;
    top: 290px;
    right: 220px; 
    z-index: 2;
    visibility: hidden;
}

#popup5 {
    border: 4px solid gray;
    background-color: white;
    width: 300px; 
    padding: 10px;
    position: fixed;
    top: 80px;
    left: 500px;
    z-index: 2;
    visibility: hidden;
}

#popup6 {
    border: 4px solid gray;
    background-color: white;
    width: 300px; 
    padding: 10px;
     padding-top: 5px;
    position: fixed;
    top: 370px;
    left: 100px;
    z-index: 2;
    visibility: hidden;
}

#popup7 {
    border: 4px solid gray;
    background-color: white;
    width: 300px; 
    padding: 10px;
    padding-top: 5px;
    position: fixed;
    top: 100px;
    right: 600px;
    z-index: 2;
    visibility: hidden;
}

#popup8 {
    border: 4px solid gray;
    background-color: white;
    width: 400px; 
    padding: 10px;
     padding-top: 5px;
    position: fixed;
    top: 150px;
    left: 150px;
    z-index: 2;
    visibility: hidden;
}

#popup9 {
    border: 4px solid gray;
    background-color: white;
    width: 400px; 
    padding: 10px;
    position: fixed;
    top: 340px;
    right: 30px;
    z-index: 2;
    visibility: hidden;
}

.fi {
    width: 100px;
    float: left;
}

.dekubaba {
    width: 100px;
    float: right;
}

.shield {
    width: 100px;
    float: right;
}

.popuptxt {
    color: black;
}

.button {
    padding: 4px;
    background-color: lightgrey;
    border: 2px solid gray;
    font-family: 'unixel';
}

.button:hover {
background-color: lightskyblue;
border-color: #68a3c7;
color: #152935;
}