/*FONT*/
/*STUFF*/
@font-face {
    font-family: 'yomogi';
    src: url(/public/assets/fonts/yomogi/Yomogi-Regular.ttf) format('truetype');
}

/*BASE*/
/*STUFF*/
html {
  /*cursor change*/  
  cursor: url('/public/cursors/Defaultcursor.png'), auto;

  /*background change*/
  background-image: url("/public/assets/images/Bluesky.jpg");
  background-attachment: fixed;
  background-size: cover;

  /*universal font*/
  font-family: 'yomogi';
}

/*cursor change on hover*/
a:hover {
    cursor: url('/public/cursors/Clickingcursor.png'), pointer;
}

.relative {
    position: relative;
}

.relative img {
    position: absolute;
    width: 100%;
    height: 100%;
}

/*makes stuff wiggle around*/
.wiggle:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/*RESPONSIVE*/
/* STUFF */
/* ! I DON'T UNDERSTAND ASPECT RATIOS LMAAAOOOOOOO ! (crying) */

/*lARGE SCREENS*/
@media only screen and (min-aspect-ratio: 4/3) {
    html {font-size: 16px;}

    body {
        position: absolute;
        width: 100%;
        height: 100svh;
    }

    p {font-size: 1rem;}

    h1 {font-size: 3rem;}

    h3 {font-size: 1rem;}

    h2 {font-size: 1rem;}

    /* THE  */
    /* GNOME */
    #gnome {
        position: absolute;
        max-width: 25%;
        max-height: 25%;
        top: 0;
        left: 0;
        z-index: 2;
        
    }

    #main {display: grid;}

    #mobile {display: none;}

    #medium {display: none;}

    .upper {
        grid-template-columns: 500px 1fr 500px;
        grid-template-rows: auto;
        grid-template-areas: 
        'upleft head upright'
        ;
    }

    /*upper left*/

    .cat {
        position: absolute;
        rotate: 5deg;
        width: 68%;
        height: 115%;
        right: -6%;
        bottom: -18%;
        z-index: 1;
    }

    .leaf {
        position: absolute;
        rotate: -12deg;
        width: 25%;
        height: 25%;
        right: 7%;
        top: 5%;
        z-index: 2;
    
    }

    /*upper right*/
    .tag {
        position: absolute;
        width: 75%;
        height: 130%;
        left: 7%;
        top: -20%;
        rotate: 10deg;
        z-index: 1;
    }
    
    .middle {
        grid-template-columns: 350px 1fr 350px;
        grid-template-rows: 1fr 150px;
        grid-template-areas: 
        'midleft post midright'
        'midleft post midright'
        ;
    }

    .center {
        grid-area: post;
    
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: 
        'postcard'
        ;
    }

    .postcard {
        grid-area: postcard;
    
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: .7fr 1fr .5fr;
        grid-template-areas: 
        'top'
        'post-main'
        'bottom'
        ;
    }

    .tape-1 {
        position: absolute;
        width: 100%;
        height: 40%;
        top: 0%;
    }

    .tape-2 {
        position: absolute;
        width: 80%;
        height: 64%;
        bottom: -10%;
        left: 9%;
    }

    .greeting-title {
        position: absolute;
        width: 90%;
        height: 40%;
        left: 5%;
        top: 0%;
    }

    .greeting h2 {
       margin-bottom: -1%;
       margin-left: 3%;
       color: #2e8568;

    
    }

    .greeting-textbox {
        position: absolute;
        width: 90%;
        height: 55%;
        left: 5%;
        top: 42%;
    
        overflow: auto;
        color: #04472b;
    }

    /*end postcard left side*/

    .note {
        position: absolute;
        width: 60%;
        height: 40%;
        left: 7%;
        top: 60%;
        margin-top: -5%;
    }

    .links {
        position: absolute;
        width: 70%;
        height: 35%;
        top: 20%;
        left: 8%;
    }

    .insta {
        grid-area: insta;
        width: 50%;
        height: 48%;
        left: 2%;
        top: 40%;
    }

    .neocities {
        grid-area: neo;
        height: 35%;
        top: 45%;
        left: -30%;
    }
    /*end postcard right side*/

    .mid-left {
        grid-area: midleft;
    }

    .flower {
        position: absolute;
        width: 40%;
        height: 25%;
        top: 10%;
        right: -10%;
    }
    
    .blue {
        position: absolute;
        width: 8%;
        height: 5%;
        top: 35%;
        right: -5%;
    }
    
    .white {
        position: absolute;
        width: 23%;
        height: 15%;
        top: 40%;
        right: 3%;
    }
    
    .strawberry {
        position: absolute;
        width: 60%;
        height: 60%;
        bottom: -5%;
        left: 12%;
        rotate: -10deg;
    }

/*end of middle-left*/

    .mid-right {
    grid-area: midright;
    }

    .green {
        position: absolute;
        width: 18%;
        height: 12%;
        top: 23%;
        left: 28%;
    }

    .yellow {
        position: absolute;
        width: 8%;
        height: 5%;
        left: 50%;
        top: 20%;
    }

    .butterfly {
        position: absolute;
        width: 85%;
        height: 55%;
        bottom: 0%;
        left: -20%;
        rotate: 8deg;

    }
    /*end middle-right*/

    footer {
      width: 50%;
      height: 70%;
      left: 25%;
      top: 15%;
    }

    
}

/*MEDIUM SCREENS*/
@media only screen and (max-aspect-ratio: 4/3) and (min-aspect-ratio: 10/14) {
    html {font-size: 13px;}

    p {font-size: 1.3rem;}

    h1 {font-size: 2.5rem;}

    h3 {font-size: 1.5rem;}

    h2 {font-size: 2rem;}

    /* THE  */
    /* GNOME */
    #gnome {
        position: absolute;
        max-width: 15%;
        max-height: 15%;
        top: 0;
        left: 2;
        z-index: 2;
        
    }

    #main {display: none;}

    #mobile {display: none;}

    #medium {display: grid;}

    .upper {
        grid-template-columns: 300px 1fr 300px;
        grid-template-rows: auto;
        grid-template-areas: 
        'upleft head upright'
        ;
    }

    /*upper left*/

    .cat {
        position: absolute;
        rotate: 5deg;
        width: 75%;
        height: 115%;
        right: -6%;
        bottom: -18%;
        z-index: 1;
    }

    .leaf {
        position: absolute;
        rotate: -30deg;
        width: 25%;
        height: 25%;
        right: 7%;
        top: 5%;
        z-index: 2;
    
    }

    /*upper right*/
    .tag {
        position: absolute;
        width: 75%;
        height: 150%;
        left: 15%;
        top: -20%;
        rotate: 10deg;
        z-index: 1;
    }

    .middle {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: 
        'post'
        ;
    }

    .center {
    grid-area: post;

    display: grid;
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: auto;
    grid-template-areas: 
    'decorl postcard decorr'
    ;
    }

    .flower {
        position: absolute;
        width: 95%;
        height: 25%;
        top: 10%;
        right: -5%;
    }
    
    .blue {
        position: absolute;
        width: 25%;
        height: 5%;
        top: 35%;
        right: -25%;
    }
    
    .white {
        position: absolute;
        width: 55%;
        height: 10%;
        top: 40%;
        right: 3%;
    }
    
    .strawberry {
        position: absolute;
        width: 65%;
        height: 25%;
        bottom: 10%;
        left: 15%;
        rotate: -10deg;
    }

/*end of center-left*/

    .green {
        position: absolute;
        width: 50%;
        height: 10%;
        top: 18%;
        left: 28%;
    }

    .yellow {
        position: absolute;
        width: 25%;
        height: 5%;
        left: 50%;
        top: 5%;
    }

    .butterfly {
        position: absolute;
        width: 95%;
        height: 30%;
        bottom: 0%;
        left: -30%;
        rotate: 8deg;

    }
    /*end middle-right*/

    .postcard {
    grid-area: postcard;

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: .7fr 1fr .5fr;
    grid-template-areas: 
    'top'
    'post-main'
    'bottom'
    ;
    }

    .tape-1 {
        position: absolute;
        width: 80%;
        height: 50%;
        top: -7%;
        left: 9%;
    }

    .tape-2 {
        position: absolute;
        width: 80%;
        height: 64%;
        bottom: -10%;
        left: 9%;
    }

    .greeting-title {
        position: absolute;
        width: 90%;
        height: 38%;
        left: 5%;
        top: 0%;
    }

    .greeting h2 {
        margin-bottom: -5%;
        margin-left: 3%;
        color: #2e8568;

    
    }

    .greeting-textbox {
       position: absolute;
       width: 90%;
       height: 55%;
       left: 5%;
       top: 45%;
   
       overflow: auto;
       color: #04472b;
    }

    /*end postcard left-side*/

    .note {
        position: absolute;
        width: 60%;
        height: 38%;
        left: 7%;
        top: 64%;
        margin-top: -5%;
    }

    .links {
        position: absolute;
        width: 70%;
        height: 35%;
        top: 18%;
        left: 8%;

        
    }

    .insta {
        grid-area: insta;
        width: 50%;
        height: 48%;
        left: 2%;
        top: 40%;
    }

    .neocities {
        grid-area: neo;
        height: 35%;
        top: 45%;
        left: -30%;
    }
    /*end postcard right side*/

    footer {
      width: 75%;
      height: 70%;
      left: 12%;
      top: 15%;
    }

    footer h2 {
        font-size: 22px;
    }

}

/*MOBILE SCREENS*/
@media (max-aspect-ratio: 10/14) {
    html {font-size: 10px;}

    p {font-size: 2rem;}

    h1 {font-size: 3rem;}

    h2 {font-size: 2.5rem;}

    h3 {font-size: 2rem;}

    #main {display: none;}

    #mobile {display: grid;}

    #medium {display: none;}

    #gnome {display: none;}

    /* THE  */
    /* GNOME */
    #gnome {
        position: absolute;
        max-width: 15%;
        max-height: 15%;
        top: 0;
        left: 2;
        
    }
    
    .header {
        position: absolute;
        width: 75%;
        height: 75%;
        left: 10%;
        top: 5%;
    }
    
    .paper {
        position: absolute;
        width: 85%;
        height: 100%;
        left: 8%;
    
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: .3fr 1fr .3fr;
        grid-template-areas: 
        'ptop'
        'pmid'
        'pbot'
        ;
    }
    
    .greeting {
        grid-area: ptop;
        overflow: auto;
    }

    .greeting h2 {
        margin-bottom: -1%;
        margin-left: 3%;
        color: #2e8568;    
    }
    
    .paper-mid {
        grid-area: pmid;
    
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr 75px;
        grid-template-areas: 
        'list'
        'links'
        ;
    
        
    }
    
    .mobile-list {
        grid-area: list;
    }

    .greeting-textbox {
       position: absolute;
       width: 95%;
       height: 100%;
       left: 2%;
       top: 0%;
   
       overflow: auto;
       color: #04472b;
    }
    
    .mobile-links {
        grid-area: links;

        display: grid;
        grid-template-columns: 25% 25%;
        grid-template-rows: auto;
        grid-template-areas: 
        'insta neo'
        ;
        padding: .5rem;
    }

    .insta {
        grid-area: insta;
        width: 50%;
        left: 20%;
    }

    .neocities {
        grid-area: neo;
        height: 75%;
        top: 8%;
    }
    
    .paper-bottom {
        grid-area: pbot;
    }

    
}
/*end of responsive stuff*/






/*  MAIN  */
/* STUFF */

#main {
    height: 100svh;

    grid-template-columns: auto;
    grid-template-rows: 200px 1fr 80px;
    grid-template-areas: 
    'up'
    'mid'
    'low'
    ;
}

/* ~ UPPER SECTION ~ */
.upper {
    grid-area: up;

    display: grid;
}

.up-left {
    grid-area: upleft;
}


.up-right {
    grid-area: upright;
}

/*header stuff*/
header {
    grid-area: head;

    display: grid;
    padding: 2rem;
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    'h e l1 l2 o'
    ;
}

.h {
    grid-area: h;
}

.e {
    grid-area: e;
}

.l1 {
    grid-area: l1;
}

.l2 {
    grid-area: l2;
}

.o {
    grid-area: o;
}
/*end of header stuff*/

/* ~ MIDDLE SECTION ~ */
.middle {
    grid-area: mid;

    display: grid;
}

.decor-left {
    grid-area: decorl;
}

/*POST CARD STUFF*/


.postcard img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.postcard-top {
    grid-area: top;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    't-1 t-2 t-3'
    ;
}

.top-1 {
    grid-area: t-1;
}

.top-2 {
    grid-area: t-2;
}

.top-3 {
    grid-area: t-3;
}

.pfp {
    position: absolute;
    width: 34.5%;
    height: 53.5%;
    right: 16.5%;
    bottom: 10%;
}

.postcard-main {
    grid-area: post-main;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    'l r'
    ;
}

.l {
    grid-area: l;
}

.greeting {
    text-align: center;
    color: #ec6930;
    height: 100%;
}

.greeting h3 {
    margin-bottom: 0%;
}

.greeting-textbox li {
    list-style-image: url(/public/assets/pixel-art/Frog-bullet-slower.gif);
    list-style-type: circle;
}

.r {
    grid-area: r;
}

.links {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: auto;
    grid-template-areas: 
    'insta neo'
    ;
    padding: .5rem;
}

.postcard-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    'b-1 b-2 b-3'
    ;
}

.b-1 {
    grid-area: b-1;
}

.b-2 {
    grid-area: b-2;
}

.b-3 {
    grid-area: b-3;
}

.enter::before {
    content: url(/public/assets/webp/Pointerfinger-smallest.webp);
    transition: opacity 0.3s ease-in-out;
}

.enter:hover::before {
    content: url(/public/assets/webp/ENTER-smallest.webp);
}
/*end postcard stuff*/

.decor-right {
    grid-area: decorr;
}
/*end mid-center*/



/* ~ LOWER SECTION ~ */
.lower {
    grid-area: low;

    display: grid;
}

footer {
    position: absolute;
    color: rgb(7, 42, 95);
    text-align: center;
    padding: .5rem;

    border: 3px dotted rgb(255, 91, 26);
}



/*lower section*/

/* MEDIUM */
/*  ONLY  */
#medium {
    height: 100svh;

    grid-template-columns: auto;
    grid-template-rows: 300px 1fr 150px;
    grid-template-areas: 
    'up'
    'mid'
    'low'
    ;
}


/* MOBILE */
/* ONLY */
#mobile {
    height: 100svh;
    gap: 1rem;

    grid-template-columns: auto;
    grid-template-rows: 80px 1fr 80px;
    grid-template-areas: 
    'up'
    'mid'
    'low'

    ;
}

.pbot-enter {
    position: absolute;
    padding: 1rem;
    width: 25%;
    height: 40%;
    margin-left: 37.5%;
    margin-right: 37.5%;
    top: 5%;
}

.m-enter {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}