<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>whale sharks</title>
      <link rel="icon" type="image/x-icon" href="https://files.catbox.moe/zd5h9u.gif">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">

<style>

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
background-image: url('https://files.catbox.moe/1txkeb.jpg');
background-color: #F8EEDA;
margin: 7%;
font-family: 'Courier New', Courier, monospace;
font-size: 0.8vw;
color: #black;
}



.header { 
    grid-area: header; 
    background-image: url('https://files.catbox.moe/sd7fyy.gif');
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid darkgray;
    border-radius: 15px;
}

.title{
    color: white;
    font-weight: bold;
    text-decoration: none;
    transition: ease-in-out 0.3s;
    font-size: 3vw;
    filter: drop-shadow(1px 1px 0 rgb(202, 134, 160)) drop-shadow(-1px 1px 0 rgb(202, 134, 160)) drop-shadow(0 -1px 0 rgb(202, 134, 160)) drop-shadow(1px 0 rgb(202, 134, 160));
    margin-top: 14%;
    margin-left: 3%;
}

.title span{
    transition: ease-in-out 0.5s;
}

.title span:hover{
    letter-spacing: 5px;
}

.topscroll { 
    grid-area: topscroll; 
    background-image: url('https://files.catbox.moe/mghfce.gif');
    border: 1px solid darkgray;
    border-radius: 15px;
}

.topscroll marquee span{
    font-style: italic;
    color: white;
    filter: drop-shadow(1px 1px 0 rgb(122, 122, 122)) drop-shadow(-1px 1px 0 rgb(122, 122, 122)) drop-shadow(0 -1px 0 rgb(122, 122, 122)) drop-shadow(1px 0 rgb(122, 122, 122));
}

.nav { 
    grid-area: nav; 
    border-width: 7px; 
    border-style: solid;
    border-image: url("https://files.catbox.moe/jqcqeg.gif") 7 fill round;
    padding: 1%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav h1{
    background-image: url('https://files.catbox.moe/khmhpt.gif');
    font-size: 1vw;
    text-align: center;
    animation: jerky 1s infinite;
    margin: 0;
    margin-top: 1%;
    filter: drop-shadow(1px 1px 0 rgb(122, 122, 122)) drop-shadow(-1px 1px 0 rgb(122, 122, 122)) drop-shadow(0 -1px 0 rgb(122, 122, 122)) drop-shadow(1px 0 rgb(122, 122, 122));
}

.nav span{
    color: white;
    filter: drop-shadow(1px 1px 0 rgb(122, 122, 122)) drop-shadow(-1px 1px 0 rgb(122, 122, 122)) drop-shadow(0 -1px 0 rgb(122, 122, 122)) drop-shadow(1px 0 rgb(122, 122, 122));
}

ul li{
    list-style-image: url('https://files.catbox.moe/zd5h9u.gif');
}

a{
    color: #FFDFEC;
    font-weight: bold;
    text-decoration: none;
    transition: ease-in-out 0.3s;
    font-size: 1vw;
    filter: drop-shadow(1px 1px 0 rgb(202, 134, 160)) drop-shadow(-1px 1px 0 rgb(202, 134, 160)) drop-shadow(0 -1px 0 rgb(202, 134, 160)) drop-shadow(1px 0 rgb(202, 134, 160));
}

a:hover{
    padding: 5px 15px 5px 15px;
}

    @keyframes jerky {
      0% {
        transform: rotate(2deg);
      }

      50% {
        transform: rotate(2deg);
      }

      51% {
        transform: rotate(-2deg);
      }

      100% {
        transform: rotate(-2deg);
      }
    }

h1{
    color: #FFDFEC;
    font-weight: bold;
    text-decoration: none;
    transition: ease-in-out 0.3s;
    font-size: 2.5vw;
    text-align: left;
    margin: 0;
    filter: drop-shadow(1px 1px 0 rgb(202, 134, 160)) drop-shadow(-1px 1px 0 rgb(202, 134, 160)) drop-shadow(0 -1px 0 rgb(202, 134, 160)) drop-shadow(1px 0 rgb(202, 134, 160));
}

.main { 
    grid-area: main; 
    background-image: url('https://files.catbox.moe/yttuxo.gif');
    border: 1px solid darkgray;
    border-radius: 15px;
    padding: 1%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: auto;
}

</style>

</head>

<body>