html {
    background-image: url("img/bg.png");
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(105%) contrast(110%);
    background-color: cornflowerblue;
    overflow: hidden;
}

body {
    margin: 0;
    height: 100vh;
    cursor: url('img/pointer.svg'), auto;
 }

#cursor {
    display: none;
    position: absolute;
    width: 86px;
    height: 86px;
    filter: saturate(10%) contrast(10%) brightness(135%) opacity(90%);
    animation: cursor1 0.8s infinite ease-in-out, cursor2 0.5s ease-in;
    transition-duration: 0.60s;
    transition-timing-function: ease-out;
}

#cursor:hover {
    transform: scale(0.85);
}

@keyframes cursor1 {
    100% {opacity: 0.75;}   
}

@keyframes cursor2 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#heart {
    display: none;
    position: absolute;
    overflow: hidden;
    width: 25px;
    height: auto;
    filter: saturate(100%) contrast(100%) brightness(100%) opacity(75%);
    animation: heart1 0.5s ease-in forwards, heart2 0.5s 0.2s ease-in forwards, heart3 0.5s 0.7s ease-out forwards;
}

@keyframes heart1 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes heart2 {
    100% {transform: scale(6);}
}

@keyframes heart3 {
    100% {opacity: 0;}
}

.name {
    display: block;
    position: absolute;
    bottom: -1.5vh;
    left: 50.25%;
    transform: translate(-50%,-50%);
    min-width: 200px !important; 
    max-width: 20% !important;
    filter: saturate(75%) contrast(75%) brightness(175%) opacity(75%);
    mix-blend-mode: lighten, color;
    animation: name 2.5s ease-in, blinker 5s ease-in-out infinite; 
}

@keyframes name {
    0% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes blinker {
    50% { opacity: 0.3;}
}

.logo {
    position: absolute;
    left: 0vw;
    top: 16vh;
    transform: translate(-50%,-50%);
    width: 100vw;
    height: 74vh;
    aspect-ratio: 1/1 !important;
    object-fit: contain;
    filter: saturate(10%) contrast(10%) brightness(115%) opacity(75%);
    animation: logo 10s infinite linear, logo2 4s ease-in;
    transform-origin: center;
    overflow: hidden;
    z-index: -1;
}

@keyframes logo {
    0% { transform: rotateY(0deg);}
    100% { transform: rotateY(359deg);}
}

@keyframes logo2 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.bubbles img {
    mix-blend-mode: lighten;
    width: 65px;
    filter: saturate(75%) brightness(107%) contrast(103%) opacity(50%);
    animation: bubble 7s linear infinite, color-change 4250ms ease-in-out infinite;
}

@keyframes color-change {
    0%      {filter: hue-rotate(0deg)     opacity(65%);}
    6.25%   {filter: hue-rotate(22.5deg)  opacity(65%);}
    12.5%   {filter: hue-rotate(45deg)    opacity(65%);}
    18.75%  {filter: hue-rotate(67.5deg)  opacity(65%);}
    25%     {filter: hue-rotate(90deg)    opacity(65%);}
    31.25%  {filter: hue-rotate(112.5deg) opacity(65%);}
    37.5%   {filter: hue-rotate(135deg)   opacity(65%);}
    43.75%  {filter: hue-rotate(157.5deg) opacity(65%);}
    50%     {filter: hue-rotate(180deg)   opacity(65%);}
    56.25%  {filter: hue-rotate(202.5deg) opacity(65%);}
    62.5%   {filter: hue-rotate(225deg)   opacity(65%);}
    68.75%  {filter: hue-rotate(247.5deg) opacity(65%);}
    75%     {filter: hue-rotate(270deg)   opacity(65%);}
    81.25%  {filter: hue-rotate(292.5deg) opacity(65%);}
    87.5%   {filter: hue-rotate(315deg)   opacity(65%);}
    93.75%  {filter: hue-rotate(337.5deg) opacity(65%);}
    100%    {filter: hue-rotate(360deg)   opacity(65%);}
  }

.bubbles {
    display: flex;
    position: absolute;
    width: 100vw;
    left: 50vw;
    transform: translateX(-50%);
    align-items: center;
    justify-content: space-around;
    bottom: -75px;
    z-index: -1;
}

@keyframes bubble {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateY(-80vh);
        opacity: 0;
    }
}

.bubbles img:nth-child(1) {
    animation-delay: 3s;
    width: 55px;
}

.bubbles img:nth-child(2) {
    animation-delay: 1s;
    width: 58px;
}

.bubbles img:nth-child(3) {
    animation-delay: 2.5s;
    width: 52px;
}

.bubbles img:nth-child(4) {
    animation-delay: 5s;
    width: 65px;
}

.bubbles img:nth-child(5) {
    animation-delay: 3.5s;
    width: 60px;
}

.bubbles img:nth-child(6) {
    animation-delay: 6s;
    width: 53px;
}

.bubbles img:nth-child(7) {
    animation-delay: 1.5s;
    width: 57px;
}

.news {
    margin-top: 2.7px;
}

.about {
    margin-top: calc(-1px);
}

.link {
    cursor: url('img/pointer.svg'), auto;
    display: block;
    font-size: max(2vw, 18px);
    font-style: oblique;
    color: papayawhip;
    text-decoration: none;
}

.link:active {
    background: linear-gradient( 90deg, rebeccapurple, steelBlue, rebeccapurple);
    mix-blend-mode: lighten, color;
    border-radius: 2vh;
}

.menu {
    display: block;
    text-decoration: none;
    color: papayawhip;
    font-size: max(2.5vw, 24px);
    font-weight: normal;
}

.menu-area ul {
    list-style: none;
}

.menu-area {
    display: inline-block;
    filter: opacity(75%);
    text-align: center;
    font-size: max(2vw, 20px);
    position: absolute;
    top: 10vh;
    left: 50vw;
    transform: translate(-50%,-50%);
    animation: menu1 5s ease;
    z-index: 2;
}

@keyframes menu1 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.menu-area li:hover, .menu-area li:focus {
    background: linear-gradient( 90deg, steelBlue, rebeccapurple);
    border-radius: 1.5vh;
}

.menu-area > ul {
    list-style: none;
    border-bottom: 3px solid steelblue;
    border-radius: 1.5vh;
    padding: 0;
    display: inline-block;
    background: linear-gradient( 90deg, rebeccapurple, steelBlue);
    color: papayawhip;
}

.menu-area > ul > li {
    position: relative;
    font-family: 'Expansiva', sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
    float: left;
    width: 50vw;
    height: 10vh;
    line-height: 10vh;
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10vh;
    padding: 0;
}

.dropdown li {
    border-bottom: 3px solid steelblue;
    border-radius: 1.5vh;
    background: linear-gradient( 90deg, steelBlue, rebeccapurple);
    display: none;
}

.dropdown li:hover, .dropdown li:focus {
    background: linear-gradient( 90deg, rebeccapurple, steelBlue);
    border-radius: 1.5vh;
}

.menu-area li:hover > .dropdown li {
    display: block;
    transform-origin: top center;
    opacity: 0;
}

.menu-area li:hover > .dropdown {
    perspective: 1000px;
}

.menu-area li:hover > .dropdown li:nth-child(1) {
    animation: animate 500ms ease-in-out forwards;
    animation-delay: 0ms;
}

.menu-area li:hover > .dropdown li:nth-child(2) {
    animation: animate 500ms ease-in-out forwards;
    animation-delay: 150ms;
}

.menu-area li:hover > .dropdown li:nth-child(3) {
    animation: animate 500ms ease-in-out forwards;
    animation-delay: 300ms;
}

.menu-area li:hover > .dropdown li:nth-child(4) {
    animation: animate 500ms ease-in-out forwards;
    animation-delay: 450ms;
}

.menu-area li:hover > .dropdown li:nth-child(5) {
    animation: animate 500ms ease-in-out forwards;
    animation-delay: 600ms;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(20deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

footer {
    position: absolute;
    left: 50vw;
    top: 2vh;
    transform: translate(-50%,-50%);
    filter: opacity(25%) brightness(100%);
    mix-blend-mode: lighten, color;
    font-family: 'Expansiva', sans-serif;
    color: lightskyblue;
    font-size: max(0.5vw, 12px);
}