/* 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." */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
body {
  overflow:scroll;
  background:
    radial-gradient(circle at 20px 20px, rgba(255,255,255,0.45) 3px, transparent 4px),
    radial-gradient(circle at 60px 60px, rgba(180,240,255,0.35) 4px, transparent 5px),
    linear-gradient(
    to bottom,
    #5ee2ff,
    #ffffff
);

background-size:
    80px 80px,
    100px 100px,
    100% 100%;
    
    min-height: 2000px;
    
      color: black;
      font-family: "M PLUS Rounded 1c", sans-serif;
}

.container {
    width: 1000px;
    margin: 30px auto;
    padding: 20px;

    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 30px;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.12),
        inset 0 2px 0 rgba(255,255,255,0.8);

    position: relative;
    z-index: 10;
}

body.night {
    background:
        radial-gradient(circle at 20px 20px,
            rgba(255,255,255,0.45) 3px,
            transparent 4px),

        radial-gradient(circle at 60px 60px,
            rgba(180,240,255,0.35) 4px,
            transparent 5px),

        linear-gradient(
            to bottom,
            #5d7fc9,
            #3d5ca8,
            #243d73
        );

    background-size:
        80px 80px,
        100px 100px,
        100% 100%;
}

body.night::after {
    content: "⏾";
    position: fixed;
    top: 80px;
    right: 120px;
    font-size: 80px;
    color: #fffbdd;
    text-shadow: 0 0 25px rgba(255,255,200,0.9);
    pointer-events: none;
    z-index: 9999;
}
.massage {
  color: #1200FF;
  font-size: 20px;
  font-style: italic;
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
  letter-spacing: 1px;
}

h1{
  color: #1200ff;
}

nav {
    margin-top: 20px;
}

nav a {
    display: inline-block;
    background: linear-gradient(
        to bottom,
         #ffffff,
         #eaffea,
         #9fe09f
    );
    color: #0C6E40;
    text-decoration: none;
    padding: 8px 16px;
    margin: 5px 0;
    border-radius: 15px;
    border: 2px solid #8fd6a5;
    font-weight: bold;
    transition: 0.2s;
    box-shadow:
    0 4px 8px rgba(0,0,0,0.15),
    inset 0 2px 0 rgba(255,255,255,0.9);
}

nav a:hover {
    background: linear-gradient(
        to bottom,
        #f8fff8,
        #b8e8b8
    );
    color: #d6a84f;
    transform: translateY(2px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

img {
  filter:
  drop-shadow(0 5px 10px rgba(0,0,0,0.2));
}

.clockBox {
    position: absolute;

    top: 50px;
    right: 30px;

    width: 250px;

    padding: 10px;

    text-align: center;

    background: linear-gradient(
        to bottom,
        rgba(230,255,230,0.95),
        rgba(180,240,180,0.9),
        rgba(120,220,120,0.85)
    );

    border: 2px solid #d8ffd8;

    border-radius: 20px;

    color: #3c986d;

    font-size: 30px;
    font-weight: bold;

    box-shadow:
        0 0 15px rgba(120,255,120,0.4),
        inset 0 2px 5px rgba(255,255,255,0.8);
}

.bubble {
    width: 80px;
    height: 80px;

    border-radius: 50%;

    background: radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,0.9),
        rgba(255,255,255,0.3),
        rgba(180,220,255,0.2)
    );

    border: 1px solid rgba(255,255,255,0.7);

    box-shadow:
        0 0 20px rgba(255,255,255,0.6);

    position: absolute;
    right: 100px;
    top: 200px;
}
.bubble2 {
    width: 50px;
    height: 50px;
    right: 250px;
    top: 350px;
}

.bubble3 {
    width: 120px;
    height: 120px;
    right: 50px;
    top: 500px;
}
.bubble4 {
    width: 40px;
    height: 40px;
    right: 450px;
    top: 150px;
}

.bubble5 {
    width: 25px;
    height: 25px;
    right: 700px;
    top: 300px;
}

.bubble6 {
    width: 60px;
    height: 60px;
    right: 550px;
    top: 450px;
}
.bubble7 {
    width: 80px;
    height: 80px;
    right:300px;
    top:180px;
}

.clover {
    position: absolute;
    opacity: 0.50;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.8));
    pointer-events: none;
}

.clover1 {
    width: 140px;
    right: 1200px;
    bottom: 300px;
    
    transform: rotate(15deg);
}

.clover2 {
    width: 90px;
    right: 1350px;
    bottom: 100px;
    
    transform: rotate(-20deg);
}

.clover3 {
    width: 60px;
    right: 900px;
    bottom: 120px;
    
    transform: rotate(35deg);
}
.clover4 {
    width: 80px;
    left: 600px;
    top: 180px;
    
    transform: rotate(80deg);
}

.clover5 {
    width: 50px;
    left: 900px;
    top: 400px;
    
    transform: rotate(-40deg);
}

.clover6 {
    width: 200px;
    left: 200px;
    bottom: 30px;
    
    transform: rotate(75deg);
}
.cloud {
    position: absolute;
    opacity: 0.3;
    pointer-events: none;
    filter: blur(2px);
    z-index: -1;
    animation: floatCloud 80s linear infinite;
}
.cloud1 {
    width: 880px;
    left: -900px;
    top: 30px;
    animation-delay: 0s;
}

.cloud2 {
    width: 650px;
    left: -700px;
    top: 350px;
    animation-delay: -25s;
}

.cloud3 {
    width: 350px;
    left: -400px;
    bottom: 50px;
    animation-delay: -50s;
}

.cloud4 {
    width: 570px;
    left: -600px;
    bottom: 640px;
    animation-delay: -70s;
}

@keyframes floatCloud {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(1800px);
    }
}
.note {
    position: absolute;
    opacity: 0.5;
    pointer-events: none;
}

.note1 {
    width: 60px;
    right: 500px;
    top: 150px;
    transform: rotate(15deg);
}

.note2 {
    width: 80px;
    right: 900px;
    top: 400px;
    transform: rotate(-25deg);
}

.note3 {
    width: 50px;
    right: 350px;
    top: 250px;
    transform: rotate(40deg);
}

.note4 {
    width: 70px;
    right: 250px;
    bottom: 180px;
    transform: rotate(-10deg);
} 

.robo {
    position: absolute;
    right: 60px;
    bottom: 30px;
    width: 200px;
    
    cursor: pointer;
    
}
.speech {
    position: absolute;
    right: 60px;
    bottom: 270px;

    background: rgba(255,255,255,0.95);
    border: 2px solid #bdefff;
    border-radius: 20px;

    padding: 12px;
    max-width: 200px;

    display: none;

    color: #4a4a4a;
    font-size: 14px;

    box-shadow: 0 0 10px rgba(255,255,255,0.8);
}
.speech::after {
    content: "";
    position: absolute;

    right: 50px;
    bottom: -10px;

    width: 20px;
    height: 20px;

    background: white;

    transform: rotate(45deg);
}
@keyframes roboJump {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-15px);
    }

    60% {
        transform: translateY(0);
    }

    80% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

.roboJump {
    animation: roboJump 0.5s ease;
}
.aboutText {
    width: 720px;
    line-height: 1.8;

    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(4px);

    padding: 15px;
    border-radius: 15px;

    border: 2px solid rgba(255,255,255,0.7);
}
.updateBox {
    position: absolute;
    top: 150px;
    left: 720px;

    width: 300px;
    height: 200px;

    overflow-y: auto;

    background: linear-gradient(
    to bottom,
     rgba(230,255,230,0.95) 0%,

        rgba(180,240,180,0.9) 45%,

        rgba(120,220,120,0.85) 100%

    );

border: 2px solid #d8ffd8;

box-shadow:
    0 0 15px rgba(120,255,120,0.4),
    inset 0 2px 5px rgba(255,255,255,0.8);

border-radius: 20px;
}
.updateBox h3 {
    margin-top: 0;
    color: #3C986D;
}
.updateBox::-webkit-scrollbar {
    width: 8px;
}

.updateBox::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
}

.updateBox::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;
}
.galleryImage,
.galleryLarge{
    width: 300px;

    border-radius: 20px;

    border: 2px solid rgba(255,255,255,0.8);

    box-shadow:
        0 0 15px rgba(255,255,255,0.5),
        0 0 25px rgba(150,255,200,0.4);
}
.galleryLarge {
    width: 600px;
}

.diaryEntry {
    background: rgba(255,255,255,0.5);

    backdrop-filter: blur(4px);

    border: 2px solid rgba(255,255,255,0.7);

    border-radius: 20px;

    padding: 20px;

    margin-bottom: 20px;

    width: 700px;
}

.galleryButtons {
    margin-top: 20px;
}

.galleryBtn {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    color: #2f7a3f;
    font-weight: bold;
    background: linear-gradient(to bottom, #ffffff, #eaffea, #9fe09f);
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18),
                inset 0 2px 0 rgba(255,255,255,0.9);
}