@font-face {
    font-family: 'Nintendo';
    src: url('assets/fonts/Nintendo Wii U (NintendoU).ttf') format('truetype');
}

@font-face {
    font-family: 'Xtra Icons';
    src: url('assets/fonts/Nintendo DS, 2DS and 3DS (New Fontendo 23DSi Lite XL).ttf') format('truetype');
}

@viewport {
  zoom: 1.0;
  min-zoom: 1.0;
  max-zoom: 1.5;
}

body,html{
    font-family: 'Nintendo', sans-serif;
    margin: 0;
    /* overflow: hidden; */
}


::-webkit-scrollbar-track {
  background-color: transparent;
}


img{
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.backgroundContainer{
    width: 100%;
    height: 100%;
    overflow:hidden;
    position: fixed;
    top:0px;
    left:0px;
    z-index: 0;

    background: hsla(0, 0%, 92%, 1);

    background: linear-gradient(135deg, hsla(0, 0%, 92%, 1) 0%, hsla(0, 0%, 99%, 1) 100%);

    background: -moz-linear-gradient(135deg, hsla(0, 0%, 92%, 1) 0%, hsla(0, 0%, 99%, 1) 100%);

    background: -webkit-linear-gradient(135deg, hsla(0, 0%, 92%, 1) 0%, hsla(0, 0%, 99%, 1) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#EAEAEA", endColorstr="#FDFDFD", GradientType=1 );
    
}

.scroller{
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fafafa' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='2.5'/%3E%3Ccircle cx='13' cy='13' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    position: absolute;
    background-size: 20px 20px;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    left: 0;
    animation: scroll 45s linear infinite;
}

@keyframes scroll {
    0% { background-position: 0 0; }
    100% { background-position: -100% -100%; }
}

.title{
    font-family: 'Nintendo', sans-serif;
    margin-top: 0pt;
    margin-bottom: 0pt;
    display: flex;
    text-align: center;
    align-items: center;
    width: fit-content;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.logo{
    max-width: 350pt;
    width: 50vw;
    margin: auto;
    padding: 5pt;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo:hover {
    transform: scale(0.97, 1.06);
    cursor: pointer;
}

.logo:active {
    transform: scale(1.03, 0.99);
    cursor: pointer;
}

.header{
    position: relative;
    z-index: 2;
    text-align: center;
    margin: auto;
    margin-top: 5vh;
    background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    width: 90vw;
    height: fit-content;
    padding: 15pt;
    border-radius: 25pt;
    border: 3pt solid lightgray;
    max-width: 895px;
}

#miiCnr{
    position: fixed;
    bottom: 0px;
    z-index: 2;
    right: 0px;
    padding: 0;
    margin: 0;
    width: 200pt;
    height: 200pt;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    transform-origin: center bottom;
}

#miiCnr:hover{
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    transform: scaleX(0.97) scaleY(1.03);
    cursor: pointer;
}

#miiCnr:active{
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    transform: scaleX(1.03) scaleY(0.97);
    cursor: pointer;
}

#speechBubble{
    display: none;
    box-sizing: border-box;
    opacity: 0;
    position: fixed;
    z-index: 100;
    font-family: 'Nintendo', sans-serif;
    bottom: 180pt;
    right: 180pt;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
    padding: 15pt;
    border-radius: 25pt 25pt 2pt 25pt;
    border: 2.5pt solid lightgray;
    text-align: center;
    margin: 0;
    width: 200pt;
}

#nextButton{
    box-sizing: border-box;
    z-index: 2;
    font-family: 'Nintendo', sans-serif;
    border-radius: 9pt;
    padding-left: 20pt;
    padding-right: 20pt;
    padding-top: 5pt;
    padding-bottom: 5pt;
    background-color: #f5f5f5;
    border: 2pt solid lightgray;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

#nextButton:hover{
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    border: 2.5pt solid #7446de;
    scale: 105%;
    box-shadow: 0px 3px 0px #3a236f;
    cursor: pointer;
}

#nextButton:active{
    transition: box-shadow 0.2s ease-out;
    box-shadow: 0px 0px 0px #3a236f;
    cursor: pointer;
    scale: 100%;
}

.separator{
    margin: auto;
    margin-top: 0pt;
    margin-bottom: 10pt;
    border-top: 2pt dotted lightgray;
    width: 60%;
}

.subtitle{
    font-size: 14pt;
    margin-top: 15pt;
    margin-bottom: 0pt;
    font-family: Nintendo;
    margin-left: 5%;
    margin-right: 5%;
}

.statusContainer{
    position: fixed;
    bottom: -1000pt;
    left: 2.5vw;
    z-index: 2;
    background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    width: fit-content;
    height: fit-content;
    padding: 15pt;
    border-radius: 25pt 25pt 0pt 0pt;
    border-top: 3pt solid lightgray;
    border-left: 3pt solid lightgray;
    border-right: 3pt solid lightgray;
    font-family: 'Nintendo', sans-serif;
    display: flex;
    flex-direction: column;
    max-width: 180pt;
    min-width: 180pt;
    min-height: 195pt;
    text-align: center;
}

.statusContainer::before {
  content: "";
  position: absolute;
  top: -18pt;
  cursor: pointer;
  left: 50%;
  transform: translateX(-50%);
  width: 60pt;
  height: 15pt;
  background: rgba(247, 247, 247, 1);
  box-shadow: 0px 10px 0px rgba(247, 247, 247, 1);
  border-top: 3pt solid lightgray;
  border-left: 3pt solid lightgray;
  border-right: 3pt solid lightgray;
  border-radius: 15pt 15pt 0 0;
  z-index: 1;
}

.statusContainer::after {
  content: "↑";
  position: absolute;
  top: -16pt;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 60pt;
  height: 15pt;
  text-align: center;
  font-size: 13pt;
  line-height: 15pt;
  z-index: 2;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  transform-origin: 50% 60%;
}

.statusContainer.expanded::after {
  transform: translateX(-50%) rotate(180deg);
}

.albumCover{
    border-radius: 8pt;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 100pt;
    height: 100pt;
    margin-bottom: 10pt;
}

.statusText{
    margin-top: 0pt;
    overflow: hidden;
}

.gameImage{
    border-radius: 8pt;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 100pt;
    height: 100pt;
    margin-bottom: 10pt;
}

.carouselPrev{
    border: 3pt solid lightgray;
    border-radius: 10pt;
    position: absolute;
    left: -15pt;
    background-color: rgba(247, 247, 247, 1);
    top: 50%;
    transform: translateY(-50%) scaleX(-100%);
    font-size: 24pt;
    color: gray;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.carouselNext{
    border: 3pt solid lightgray;
    border-radius: 10pt;
    position: absolute;
    right: -15pt;
    top: 50%;
    background-color: rgba(247, 247, 247, 1);
    transform: translateY(-50%);
    font-size: 24pt;
    color: gray;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.carouselBtn{
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.carouselBtn:hover{
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    scale: 110%;
}

.carouselNext:active{
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    scale: 100%;
    transform: translateX(10%) translateY(-50%);
}

.carouselPrev:active{
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    scale: 100%;
    transform: translateX(-10%) translateY(-50%) scaleX(-100%);
}

.discordActivityImage{
    border-radius: 8pt;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 100pt;
    height: 100pt;
    margin-bottom: 10pt;
}

.carouselDots {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px;
}
.carouselDot {
    display: inline-block;
    box-sizing: border-box;
    width: 6pt;
    height: 6pt;
    margin: 0 2pt;
    border-radius: 3pt;
    background: #bbb;
    transition: 
        width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s cubic-bezier(0.4,0,0.2,1),
        border-radius 0.3s cubic-bezier(0.4,0,0.2,1);
}
.carouselDot.active {
    background: #333;
    width: 16pt;
    border-radius: 8pt;
}

.linkIcon{
    width: 90px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    transform-origin: 50% 85%;
    position: relative;
    z-index: 2;
    will-change: transform, box-shadow;
}

.linksContainer{
    position:relative;
    z-index: 2;          
    margin: auto;
    margin-top: 50px;
    background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
    border-radius: 25pt;
    border: 3pt solid lightgray;
    width: fit-content;
    padding: 20pt;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20pt;
    align-items: center;
    justify-items: center;
    box-sizing: border-box;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.linkBox{
    text-align: center;
    padding: 15pt;
    box-shadow: 0px 0px 0px transparent;
    border-radius: 25pt;
    background-color: #f5f5f5;
    width: 100pt;
    height: 100pt;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 2pt solid lightgray;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    box-sizing: border-box;
}

.linkBox:hover .linkIcon {
    transform: translateY(-12%) scale(1.25);
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
}


.linkBox:active {
    transform: translateY(4pt) scale(0.995);
    transition: all 120ms cubic-bezier(0.65, 0, 0.35, 1);
    box-shadow: 0px 0px 0px lightgray !important;
}

.linkBox:active .linkIcon{
    transform: translateY(-10%) scale(1.15);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
}


.linkBox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(116,70,222,0.12), 0 6px 12px rgba(0,0,0,0.06);
    border-color: #7446de;
}

#abt:hover{
    border: 4pt solid #7446de;
    box-shadow: 0px 5px 0px #3a236f;
    background-color: #e3d9fa;
    scale: 105%;
}

#msc:hover{
    border: 4pt solid #de4674;
    box-shadow: 0px 5px 0px #6f233a;
    background-color: #f5ced9;
    scale: 105%;
}

#prj:hover{
    border: 4pt solid #46de74;
    box-shadow: 0px 5px 0px #236f3a;
    background-color: #d9fae3;
    scale: 105%;
}

#lnks:hover{
    border: 4pt solid #deab46;
    box-shadow: 0px 5px 0px #6f5f23;
    background-color: #faf1d9;
    scale: 105%;
}

.linkText{
    font-family: 'Nintendo', sans-serif;
    margin-top: 0pt;
    font-size: 11pt;
    text-align: center;
    text-decoration: none;
    color: black;
    margin-top: 2pt;
}

.icon{
    font-family: 'Xtra Icons', sans-serif;
    font-size: 20pt;
}

.miiIdle{
    position: fixed;
    bottom: -10pt;
    z-index: 200;
    width: 200pt;
    height: auto;
}

@supports (-webkit-touch-callout: none){
    .mIdleVid{
        visibility: hidden;
    }
}

.mIdleVid{
    width: 200pt;
    height: auto;
}

.back{
    border-radius: 10pt;
    font-family: Nintendo;
    position: absolute;
    bottom: 240pt;
    left: 50%;
    z-index: 99999999999999999999999 !important;
    transform: translateX(-50%);
    opacity: 0;
    transition: bottom 200ms cubic-bezier(0.68, -0.6, 0.32, 1.6), box-shadow 200ms cubic-bezier(0.65, 0, 0.35, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.65, 0, 0.35, 1);
    font-size: 20;
    padding: 5pt;
    background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
    border: lightgray 2pt solid;
    box-sizing: border-box;
}

.back:hover{
    cursor: pointer;
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0px 3px 0px gray;
}

.back:active{
    cursor: pointer;
    transform: translateX(-50%) translateY(0px);
    box-shadow: 0px 0px 0px gray;
}


.miiIdle:hover .back{
    bottom: 250pt;
    opacity: 1;
}

a{
    color: inherit;
    text-decoration: none;
}

.eye {
    transition: transform 0.15s ease;
    transform-origin: center center;
}
svg.smiley:hover .eye.left {
    transform: scaleY(1.2);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
svg.smiley:hover .eye.right {
    transform: scaleY(1.2);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

svg.smiley:active .eye.left {
    transform: scaleY(0.2) translateX(10px) scaleX(1.5);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
svg.smiley:active .eye.right {
    transform: scaleY(0.2) translateX(-10px) scaleX(1.5);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

svg.smiley:active .mouth {
    transform: scaleX(1.2) scaleY(0.9) translateY(10px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mouth{
    transition: ease transform 0.15s;
    transform-origin: center center;
}

svg.smiley{
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

svg.smiley:hover{
    transform:scale(1.05);
}

svg.smiley:active {
    transform:scale(0.95) translateY(11px);
}

.SmileShadow{
    transition: transform 0.15s ease;
    transform-origin: center center;
}

svg.smiley:active .SmileShadow {
    transform:translateY(-11px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);   
}

.svg-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-top: 40px;
    position: relative;
    z-index: 10;
    background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
    width: fit-content;
    padding: 20pt;
    margin: auto;
    margin-top: 25pt;
    border-radius: 50pt;
    border: 3pt solid lightgray;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 100%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}


.svg-row:hover {
    padding-left: 35pt;
    padding-right: 35pt;
    cursor: pointer;
}

.svg-row svg {
    width: 50pt;
    height: 50pt;
    flex-shrink: 0;
    display: block;
}

.svg-row svg:hover {
    filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
}

.svg-row svg:active {
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
}

.speechiconline1{
    transition: transform 0.15s ease;
    transform-origin: left center;
}

.speechiconline2{
    transition: transform 0.15s ease;
    transform-origin: right center;
}

.speechiconline3{
    transition: transform 0.15s ease;
    transform-origin: right center;
}

svg#bubble:hover .speechiconline1{
    transform: translateX(5px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

svg#bubble:hover .speechiconline2{
    transform: translateX(-5px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

svg#bubble:hover .speechiconline3{
    transform: translateX(5px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

svg#bubble{
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

svg#bubble:hover{
    transform:scale(1.05);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
svg#bubble:active{
    transform:scale(0.95) translateY(11px);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

svg#bubble:active .speechiconline1{
    transform: translateX(-5px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

svg#bubble:active .speechiconline2{
    transform: translateX(5px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

svg#bubble:active .speechiconline3{
    transform: translateX(-5px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.BubbleShadow{
    transition: transform 0.15s ease;
    transform-origin: center center;
}
svg#bubble:active .BubbleShadow{
    transform: translateY(-11px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}   


#web{
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center ;
}

.webline{
    transition: ease transform 0.3s;
    transform-origin: center center;
}
#web:hover .webline{
    transform:rotate(180deg) translateY(9.5px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#web:hover{
    transform:scale(1.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#web:active{
    transform:scale(0.95) translateY(12px);
}

.webshadow{
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center ;
}

#web:active .webshadow{
    transform:translateY(-13px);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#miiVerse{
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center ;
}

#miiVerse:hover{
    transform:scale(1.05);
}

#miiVerse:active{
    transform:scale(0.95) translateY(8px);
}

.miiVEyeL{
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center ;
}

.miiVEyeR{
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center ;
}

.miiVMouth{
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center ;

}

#miiVerse:active .miiVMouth{
    transform:translateY(-10px) scaleX(1.3) scaleY(0.8);
}

.miivshadow{
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center ;
}

#miiVerse:active .miivshadow{
    transform:translateY(-8px);
}

#miiVerse:active .miiVEyeL{
    transform:translateY(-30px) translateX(2px) scaleX(1.2) scaleY(0.4);
}

#miiVerse:active .miiVEyeR{
    transform:translateY(-30px) translateX(-2px) scaleX(1.2) scaleY(0.4);
}

#aboutMeCarousel {
    position: relative;
    z-index: 2;
    background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
    box-shadow: 0px 8px 32px rgba(0,0,0,0.18);
    border-radius: 30pt;
    border: 3pt solid lightgray;
    padding: 15pt;
    min-width: 320px;
    font-family: Nintendo;
    max-width: 90vw;
    text-align: center;
    overflow: hidden;
    display: block;
    margin: 25pt 200pt 0 200pt;
    opacity: 100%;
}

.about-carousel-content {
    min-height: 180pt;
    max-height: 180pt;
    overflow:auto;
    border-radius: 20pt;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.about-section-title{
    font-size: 18pt;
    margin: 0pt 0pt 4pt 0pt;
}

#aboutCarouselDots {
    transition: all 0.3s ease;
}

.about-dot {
    display: inline-block;
    box-sizing: border-box;
    width: 6pt;
    height: 6pt;
    margin: 0 2pt;
    border-radius: 3pt;
    background: #bbb;
    transition: 
        width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s cubic-bezier(0.4,0,0.2,1),
        border-radius 0.3s cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
    vertical-align: middle;
}
.about-dot.active {
    background: #333;
    width: 20pt;
    border-radius: 8pt;
    transition: 
        width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s cubic-bezier(0.4,0,0.2,1),
        border-radius 0.3s cubic-bezier(0.4,0,0.2,1);
}

button{
    outline: none;
    cursor: pointer;
    background: none;
    border: none;
}

.floating-twig {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    width: 120pt;
    height: auto;
    opacity: 0.85;
    will-change: left, transform;
    transition: none;
}

.guestbook{
    z-index: 2;
    box-sizing: border-box;
    position: relative;
    align-items: center;
    width: fit-content;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    height: fit-content;
    max-height: 65vh;
    margin: auto;
    margin-top: 25pt;
    background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
    padding: 20pt;
    overflow: auto;
    border-radius: 25pt;
    border: 3pt solid lightgray;
    width: 60vw;
    align-content: center;
    display: flex;
    flex-direction: column;
}

#author{
    font-family: 'Nintendo', sans-serif;
    font-size: 11pt;
    margin: 0pt;
    border-radius: 5pt;
    border: 2pt solid lightgray;
    width: auto;
    padding-left: 20pt;
    padding-right: 20pt;
    padding-top: 5pt;
    padding-bottom: 5pt;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

#message{
    font-family: 'Nintendo', sans-serif;
    font-size: 11pt;
    margin: 0pt;
    border-radius: 5pt;
    border: 2pt solid lightgray;
    width: auto;
    padding-left: 20pt;
    padding-right: 20pt;
    padding-top: 5pt;
    padding-bottom: 5pt;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

#author:focus, #message:focus{
    outline: none;
    border: 2pt solid #7446de;
    box-shadow: 0 0 0 4px rgba(116,70,222,0.12), 0 6px 12px rgba(0,0,0,0.06);
}

#postbutton{
    box-sizing: border-box;
    z-index: 2;
    font-family: 'Nintendo', sans-serif;
    border-radius: 9pt;
    padding-left: 20pt;
    padding-right: 20pt;
    padding-top: 5pt;
    padding-bottom: 5pt;
    border: 2.5pt solid transparent;
    background-color: #f5f5f5;
    border: 2pt solid lightgray;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    margin-top: 10pt;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#postbutton:hover{
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    border: 2.5pt solid #7446de;
    box-shadow: 0px 3px 0px #3a236f;
    cursor: pointer;
}

.guestbook-post{
    background: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2), box-shadow 0.2s ease-out;
    border-radius: 15pt;
    padding: 10px; 
    margin: 15px 0; 
    max-width: 500pt;
    min-width: 500pt;
    text-wrap: wrap;
    overflow-wrap: break-word;
    border-radius: 10px;
}

.author{
    margin-left: 35pt;
}

.message{
    margin-top: 2pt !important;
    margin-left: 35pt;
}

.guestbook-post:hover{
    scale: 1.05;
    cursor: pointer;
    box-shadow: 0px 4px 0px var(--shadow-color);
    transform: translateY(-4px);
}

.guestbook-post img{
    max-width: 150pt;
    height: auto;
    border-radius: 10pt;
}

#eyepfp{
    transition: transform 0.15s ease;
    transform-origin: center center;
}

.guestbook-post:hover #eyepfp {
    transform: scaleY(0.4) translateY(-200px) scaleX(1.3);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}



@media (max-width: 768px) {

    .profile-icon{
        display: none;
    }
    .author{
    margin-left: 0pt;
    }

    .message{
        margin-top: 5pt;
        margin-left: 0pt;
    }

    .guestbook{
        margin-left: 10pt;
        margin-right: 10pt;
        width: calc(100vw - 20pt);
        max-height: 45vh;
        text-align: center !important;
    }

    .guestbook-post{
        font-size: 10pt;
        max-width: 200pt;
        min-width: 200pt;
    }

    #author, #message{
        font-size: 10pt;
    }

    #message{
        margin-top: 10pt;
    }

    .logo{
        width: 70vw;
    }
    
    .linksContainer{
        width: calc(100vw - 80pt);
        margin: auto;
        margin-top: 3vh;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 10pt;
        transition: opacity 0.3s ease, filter 0.3s ease, transform 0.4s cubic-bezier(0.4,0,0.2,1);
        z-index: 0;
    }
    .linksContainer.fade-out {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-400px);
    }

    .spacer{
        height: 600px;
        width: 100%;
    }

    .linkBox{
        flex-direction: row;
        width: auto;
        max-height: 70pt;
        min-width: 180pt;
        max-width: 180pt;
        margin-bottom: 0pt;
        justify-content: center;
    }

    .linkText{
        margin-top: auto;
    }

    .header{
        width: calc(100vw - 80pt);
        margin: auto;
        margin-top: 3vh;
        margin-bottom: 15pt !important;
    }

    .svg-row {
        padding: 15pt;
        gap: 20pt;
        width: fit-content;
        margin-top: 0pt;
    }
    
    #miiCnr{
        z-index: 10000000;
        width: 120pt;
        height: 120pt;
    }
    
    #speechBubble{
        box-sizing: border-box;
        opacity: 0;
        position: fixed;
        z-index: 100;
        font-family: 'Nintendo', sans-serif;
        bottom: 10pt;
        right: 100pt;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(247, 247, 247, 1) 100%);
        padding: 15pt;
        border-radius: 25pt 25pt 2pt 25pt;
        border: 2.5pt solid lightgray;
        text-align: center;
        margin: 0;
        width: 140pt;
    }

    #speechText{
        font-size: 13pt;
    }

    #postbutton{
        margin-top: 5pt;
        width: auto;
    }

    .statusContainer{
        min-width: 150pt;
        max-width: 150pt;
    }

    .carouselPrev{
        left: 0pt;
        font-size: 18pt;
        background-color: transparent;
        border: none;
        color: black;
    }

    .carouselNext{
        right: 0pt;
        font-size: 18pt;
        background-color: transparent;
        border: none;
        color: black;
    }



    .back{
        opacity: 100%;
        bottom: 20pt;
        left: 90%;
        transform: translateX(-50%);
        font-size: 13pt;
        padding: 3pt;
        width: 60%;
        text-align: center;
        box-sizing: border-box;
    }

    .mIdleVid{
        width: 135pt;
    }

    .svg-row svg {
        width: 30pt;
        height: 30pt;
        flex-shrink: 0;
        display: block;
    }

    .svg-row:hover {
        padding-left: 15pt;
        padding-right: 15pt;
    }

    .subtitle{
        font-size: 12pt;
    }

    .title{
        font-size: 20pt;
        margin: 0pt;
    }

    .separator{
        margin: 5pt;
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
    }

    #aboutMeCarousel {
        position: relative;
        min-height: 200pt;
        padding: 5pt;
        margin: 15pt 15pt 0 15pt;
    }

    .miiIdle{
        margin-left: -10pt;
    }
    
    .miiIdle:hover .back{
        bottom: 20pt;
        opacity: 1;
    }

    #miiCnr{
        width: 15vh;
        height: auto;
    }

    

}

@media (max-width: 415px){

    .mIdleVid{
        width: 90pt;
    }

    #guestbook{
        max-height: 65vh;
    }

    .miiIdle{
        z-index: 10000;
    }

    .subtitle{
        font-size: smaller;
    }

    .about-carousel-content{
        font-size: small;
    }

    .about-section-title{
        font-size: medium;
        margin-top: 5pt;
    }

    .back{
        opacity: 100%;
        bottom: 20pt;
        left: 75%;
        transform: translateX(-50%);
        font-size: 13pt;
        padding: 3pt;
        width: 60%;
        text-align: center;
        box-sizing: border-box;
    }

    .linkBox{
        width: 180pt;
        min-width: auto;
        max-width: 100%;
        max-height: 50pt;
        border-radius: 20pt;
    }

    .linksContainer{
        padding: 10pt;
    }

    .linkIcon{
        width: 50pt;
    }

    .statusContainer{
        min-width: 120pt;
        max-width: 120pt;
    }

    .statusText{
        font-size: small;
    }

    #speechBubble{
        max-width: 150pt;
        min-width: auto;
        width: fit-content;
    }

    #speechText{
        font-size: small;
    }


}