<!--                                                                                      
                                             ██████                                  
                                          █████████████                              
                                        ████████████████                             
                                     ███████████████████                             
                                ███████████████████████               ██████         
                        ████████████████████████████████████      █████████████      
                      █████████████████████████████████████████  ███████████████     
                     ████████████████████████████████████████████████████████████    
                    █████████████████████████████████████████████ ██████████████     
                    ████████████████████████████████████████████   ███████████       
                    ████████████████████████████████████████████████████████         
                    ███████████████████████████████████████████████████████          
                    ██████████████████████████████████████████████████████           
                     ████████████████████████████████████████████████████            
                      ███████████████████████████████████████████████████            
                         ████████████████████████     ██████████████████             
                          ██████████████████████        █████████████                
                            ███████████████████          █████████                   
                            ████████████████████                                     
                          ████████████████████████                                   
                         ███████████████████████████                                 
                         ██████████████████████████████                              
                          ██████████████████████████████                             
                           ████████████████████████████████                          
                           █████████████████████████████████                         
                          ███████████████████████████████████                        
                         █████████████████████████████████████                       
                         ████████████████  ████████████████████                      
                         ████████████████   █████████████████████                    
                         ████████████████     ███████████████████                    
                        █████████████████        ████████████████                    
                       █████████████████          ███████████████                    
                      ██████████████████           ███████████████                   
                     ████████████████             ████████████████                   
                  ██████████████████             █████████████████                   
                ████████████████████             █████████████████                   
              ████████████████████               █████████████████                   
             ██████████████████                  █████████████████                   
             ████████████████                    █████████████████                   
            ████████████████                      ████████████████                   
           █████████████████                       ██████████████                    
         ██████████████████                      ███████████████                     
    ██████████████████████                       ██████████████████                  
  ██████████████████████                         ████████████████████                
  ████████████████████                           ████████████████████████            
   ██████████████████                            ███████████████████████████         
     ███████████████                                         ███████████████         
        ██████████████                                                               
         ███████████████                                                             
         ███████████████                                                              -->


<head>

  <title>Fun7</title>
  <style>

    img{
        image-rendering: pixelated;

    }

    p{
        font-family: ds;


    }

    @font-face {
        font-family: ds;
        src: url(Font/Nintendo-DS-BIOS.ttf);
}

.ds{
font-family: ds;
        src: url(Font/Nintendo-DS-BIOS.ttf);

}


/* @layer body2, body;

@layer body {
    body {
      margin: 0;
      padding: 0;
      background-image: url("images/DS DSiSystem BIOS DSSystem MenuPictoChat.png");
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }
    
    @layer body2 {
    body{
    background-position: bottom;
    background: repeat url("images/backdown.png");

    }
}
} */

@layer base, effects;

@layer base {
  body {
    margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;

    background-image: url("images/background/DS DSiSystem BIOS DSSystem MenuPictoChat.png");
    flex-direction: column;
  }
}   


/* margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 90%), url(images/DS DSiSystem BIOS DSSystem MenuPictoChat.png);
    flex-direction: column; */


    /* body {
    margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;

    background-image:linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 88%), url("images/DS DSiSystem BIOS DSSystem MenuPictoChat.png");
    flex-direction: column; */




    .container {
      -width: 600px;
      -height: 600px;
      border: 1px solid rgb(0, 0, 0);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      width: 900px;
      background-color: white;
    }

    .top {
        height: 105px;
    background: black;
    /* margin: 5px; */
    border: 1px solid rgb(0, 0, 0);
    background-image: url(images/banner.png);
    background-size: 540px 100px;
    background-position: center;
    }

    .middle {
      display: flex;
      flex: 1;
          justify-content: space-around;
    }

    .left {
    width: 500px;
    border: 1px solid rgb(0, 0, 0);
    margin: 5px;
    justify-items: center;
    background-image: url(images/background/Background-1.png);
}

    .right {
        width: 41%;
      display: flex;
      flex-direction: column;
      margin: 5px 5px 5px 0;
    }

    .top-right {
      height: 240px;
      /* border: 1px solid black; */
      margin-bottom: 5px;
    }

    .bottom-right {
      display: flex;
      flex: 1;
    }

    .box {
      flex: 1;
      margin-right: 5px;
      border: 1px solid black;
    }

    .box:last-child {
      margin-right: 0;
    }

    @keyframes hover{
  0% {
    transform: translateY(-5%);
  }
  50% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(-5%);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  } 

  .tilt-in-fwd-tr {
	-webkit-animation: tilt-in-fwd-tr 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-tr 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: translateX(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: translateX(-10px);
            transform: scaleX(-1);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: translateX(2000px) scaleX(-1);
    opacity: 1;
  }
}

.box-main {
    box-sizing: border-box;
    padding-top: 20px;
    width: 430px;
    margin: 10px;
}
.imagem {
    width: 90px;
    float: left;
    shape-outside: url(images/BB/Nazar.png);
    background-size: 80px 80px;
    padding-left: 9px;
    padding-right: -15px;
    margin-left: -17px;
}


.imagem2 {
    width: 109px;
    float: inline-end;
    shape-outside: url(images/BB/nazar1.png);
    background-size: 80px 80px;
    padding-left: 7px;
    padding-top: 0px;
    position: static;
    margin-top: 31px;
    margin-right: -30px;
}


    .retro-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #0000aa; /* Azul padrão MS-DOS */
      color: #ffff00; /* Amarelo */
      border: 2px solid #ffffff; /* Borda branca */
      box-shadow: 2px 2px #5555ff;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      text-shadow: 1px 1px #000000;
            font-family: 'Courier New', monospace;
    }

    .retro-button:hover {
      background-color: #00ffff; /* Cor de destaque */
      color: #000080; /* Texto escuro */
    }

.ad-1 {
    padding: 5px;
    padding-top: 20px;
    background-image: url(images/ads/adbox_header.gif);
    background-position: 2px 3px;
    background-repeat: no-repeat;
    background-color: #ccccc2;
    margin: 0px;
        border-color: black;
    border-width: 4px;
    border-style: ridge;
}

.news{
  background-image: url(images/news01.gif);
  background-repeat: no-repeat;
  background-size: contain;

  /* width: 93%; */
height: 50%;
border-style: solid;
border-width: 1px;
margin: 10px;
}

.ad-info{
position: absolute;
    float: right;
    right: 0px;
    border-style: solid;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 5px;
    width: 17px;
    text-align: center;
    background: aliceblue;
    border-width: 1px;
    border-color: #a3acfb;
    font-family: ds;
    height: 16px;
    
  }

  .ad-info-more{
position: absolute;
    float: right;
    right: 0px;
    top: 0px;
    border-style: solid;
    border-radius: 100%;
    width: 0px;
    text-align: center;
    background: aliceblue;
    border-width: 1px;
    margin: 3px;
    overflow: hidden;
    transition: height 0.3s ease;
    height: 0px;
    border-style: none;
  }

.ad-info:hover .ad-info-more {
height: 16px;
    width: 96px;
    position: absolute;
    align-content: center;
    float: right;
    right: 14px;
    top: 0px;
    border-style: solid;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    text-align: center;
    background: aliceblue;
    border-width: 1px;
    margin: -1px;
    overflow: hidden;
    transition: width 0.3s ease;
    font-size: 12px;
    border-right-color: #7fffd400;
    }


  </style>
</head>
<body>

    <style>

.moon-container {
    padding: 10px 20px;
    display: flex;
    gap: 10px;
    border-radius: 2px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    width: 130px;
    background-image: url(images/background/moon.png);
    background-size: cover;
    position: fixed;
    top: 10px;
    left: 10px;
}
        
        .moon-label {
          line-height: 1;
          text-align: left;
        }
        
        #moon-phase {
          width: 40px;
          height: auto;
        }
        
        
        </style>
          <div class="moon-container">
            <span class="moon-label">HALF<br>MOON</span>
            <img id="moon-phase" src="" alt="Moon Phase">
          </div>
        
          <script>

const moonPhases = [
  {
    name: "NEW MOON",
    image: "https://static.wikia.nocookie.net/megamitensei/images/5/55/P3_Moon_1.png"
  },
  {
    name: "FIRST QUARTER",
    image: "https://static.wikia.nocookie.net/megamitensei/images/c/ca/P3_Moon_5.png"
  },
  {
    name: "FULL MOON",
    image: "https://static.wikia.nocookie.net/megamitensei/images/f/f6/P3_Moon_9.png"
  },
  {
    name: "LAST QUARTER",
    image: "https://static.wikia.nocookie.net/megamitensei/images/5/51/P3_Moon_14.png"
  }
];

function updateMoonPhase(index) {
  const phase = moonPhases[index];
  document.getElementById("moon-phase").src = phase.image;
  document.querySelector(".moon-label").innerHTML = phase.name.replace(" ", "<br>");
}


let currentPhaseIndex = parseInt(localStorage.getItem("moonPhaseIndex")) || 0;

updateMoonPhase(currentPhaseIndex);

const nextIndex = (currentPhaseIndex + 1) % moonPhases.length;
localStorage.setItem("moonPhaseIndex", nextIndex);


        </script>
        
<div style="display: flex; flex-direction: row;">
  <div class="container">    
    <div class="top">
        <img src="images/shmups/clonen_cg.gif" alt="" style="position: relative;top: 10px;left: -100px;animation: hover 3s infinite;">
        <!-- <img src="images/shmups/boss5_cg.gif" alt="" class="tilt-in-fwd-tr" style="position: relative;top: 230px;left: -390px;animation: tilt-in-fwd-tr 3s infinite;width: 90px;z-index: -10;"> -->
        <img src="images/figthing game/dudley/(dudleysa2).gif" alt="" style="position: relative;top: 720px;left: 420px;transform: scaleX(-1);z-index: 10;">

    </div>
    <div class="middle">
      <div class="left" style="
    position: relative;
">
        <div class="box-main" style="
        width: 90%;
        border-width: 4px;
        border-color: blue;
        border-style: solid;
        padding: 10px;
        margin: 20px;
        height: 140px;
        border-style: inset;
        border-radius: 3px;
    ">
            <img class="imagem" src="images/BB/Nazar.png" alt="">
            <img class="imagem2" src="images/BB/nazar1.png" alt="">
            <b style="
            font-size: 30px;
            font-family: 'ds';
        ">Fun7</b>
            <p style="
            font-size: 21px;
            margin: 5px;
        ">Im fun7 i play games, i making this site to host my shrine's i make in hotglue, and maybe some more stuff, now go, and leave me and my big orc bro alone, Nazar don't like observers.</p>
        </div>
<div style="width: 430px;border-width: 2px;border-color: blue;border-style: solid;padding: 10px;margin: 20px;bottom: 0px;position: absolute;border-style: none;">
<div onclick="location.href='pages/shrines/games.html';" class="retro-button">shrines</div>
<div onclick="location.href='#';" class="retro-button">music i like</div>


</div>

      </div>
      <div class="right">
        <div class="top-right">
          <div class="ad-1">
<img src="images/ads/small_616_37380_ctb_2005-03-16_hangame.gif" alt="" style="width: 100%;">
</div>

<div class="news" style="
    border-top-left-radius: 9px;
">
<div class="news1" style="
    background-image: url(images/news01.gif);
    background-repeat: no-repeat;
    background-size: contain;
    height: 24px;
    border-width: 1px;
">

</div>

<!-- <b class="ds" style="font-size: 30px; padding-left: 10px; margin-top: 0px;">■ news</b> -->


<div style="padding-top: 0px;overflow:auto;height: 96px;">

<table width="100%" cellspacing="4" cellpadding="0" style="">
              <tbody>

                                <!-- <tr valign="top">
                <td align="left" width="42"><img src="images/icon_event.gif" alt="アイコン" width="35" height="15"></td>
                <td width="0"><h1 style="font-size: 10px;margin-top: 0px;" class="top1"><a href="">コレジャナイロボが東京ジョイポリスを占拠!? 7月2日にイベント開催</a></h1></td>
                              </tr> -->

<tr valign="top">
                <td align="left" width="42"><img src="images/icon_event.gif" width="35" height="15"></td>
                <td width="0"><h1 style="font-size: 13px;margin-top: 0px;" class="top1"><a href="/pages/shrines/ketsui.html">17/05/2025 - CREATED KETSUI PAGE</a></h1></td>
                              </tr>

                <tr valign="top">
                <td align="left" width="42"><img src="images/icon_event.gif" width="35" height="15"></td>
                <td width="0"><h1 style="font-size: 13px;margin-top: 0px;" class="top1"><a href="/pages/shrines/games.html">12/05/2025 - uploaded my gaming shrine pages</a></h1></td>
                              </tr>

                                              <tr valign="top">
                <td align="left" width="42"><img src="images/icon_event.gif" width="35" height="15"></td>
                <td width="0"><h1 style="font-size: 13px;margin-top: 0px;" class="top1"><a href="">11/05/2025 - finally uploaded my site</a></h1></td>
                              </tr>
                               





                            </tbody></table>

</div>

</div>


        </div>
        <div class="bottom-right">
<div class="box" style="height: 225px;border-style: none;">

<div style="
    width: 100%;
    position: relative;
"><img src="images/ads/bnr_bl.gif" alt="" style="
    width: 142px;
    height: 20px;
    left: 20px;
    position: inherit;
    top: 10px;
">

<img src="images/figthing game/tumblr_numrvsxcee1r7sijxo1_500.gif" alt="" style="width: 103px;height: 80px;z-index: 0;top: 40px;position: inherit;left: 40px;">

<div style="
    top: 0px;
    position: absolute;
"><img src="images/arcade-cabinet.png" alt="" style="width: 100%;z-index: 1;position: relative;"></div>
</div>





          </div>
          <div class="box">
           <div>
            <img src="" alt="" style="/* width: 100%; */height: auto;">
            <!-- <img src="images/398ab9f7.jpg" alt="" style="width: 100%; height: auto;"> -->
            <img src="images/ads/small_601_28627_demon_040826.gif" alt="" style="/* width: 100%; */height: auto;">
            </div>
        </div>
          
        </div>
      </div>
    </div>
            <div class="infinite-scroll-container" style="display: flex;overflow: hidden;">
    <div class="infinite-scroll-content" style="display: flex;animation: scroll 20s linear infinite;">
        <img src="images/shmups/ss_01.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/ss_02.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/ss_03.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/ss_04.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/ss_05.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/ss_06.jpg" alt="" style="width: 100%; height: auto;">
        <!-- Duplica as imagens para criar o efeito contínuo -->
        <img src="images/shmups/daifukkatu/ss_01.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/daifukkatu/ss_02.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/daifukkatu/ss_03.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/daifukkatu/ss_04.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/daifukkatu/ss_05.jpg" alt="" style="width: 100%; height: auto;">
        <img src="images/shmups/daifukkatu/ss_06.jpg" alt="" style="width: 100%; height: auto;">
    </div>
  </div>


<style>
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
</style>
  </div>
<div style="
    /* top: 67px; */
    position: relative;
    left: 21px;
">
<div>
    <div class="ad-info" >i
    <div class="ad-info-more">    fake ad provide by Fun7</div>
  </div>
<img src="images/ads/square/banner_02.gif" alt="">
</div>
<div>
    <div class="ad-info" >i
    <div class="ad-info-more">    fake ad provide by Fun7</div>
  </div>
<img src="images/ads/vertical/banner_03.gif">
</div>

<!-- <div>
<img src="images/ads/size=margin_120x90&pos=2&network=ign&category=cube&site=cube&page=h.gif ">
</div> -->




</div>
</div>
  <!-- <div style="background: repeat url(images/backdown.png);width: 100%;height: 100px;margin-top: 40px;position: absolute;bottom: 0px;z-index: -99;">
</div> -->

</body>
</html>