body{color:#ff9a00;box-sizing:border-box;background-color:#0e1a1d;margin:0;padding:0;font-family:Fira Code,monospace;overflow-x:hidden}.hd{background-color:#112124;border-radius:0 0 10px 10px;flex-direction:row;justify-content:flex-end;align-items:center;gap:25px;padding:3px;display:flex}.hd p{text-align:center;padding:3px 10px;font-size:1.2rem;transition:color .3s ease-in-out;position:relative}.hd p:hover{cursor:pointer;transform:scale(1.05)}.hd p:after{content:"";transform-origin:50%;background-color:#ff9a00;width:100%;height:2px;transition:transform .3s;position:absolute;bottom:-4px;left:0;transform:scaleX(0);box-shadow:2px 4px 8px #ff9a00}.hd p:hover{text-shadow:2px 4px 4px #ff9a0099;transform:translateY(-2px)}.hd p:hover:after{transform:scaleX(1)}.contents{flex-direction:column;justify-content:flex-start;margin-left:15px;padding:10px;display:flex}.contents h{gap:2px;font-size:2rem}.hdref{color:inherit;text-decoration:none}.txt1{word-break:break-word;align-items:center;gap:5px;margin-bottom:2px;padding:2px;font-size:clamp(.9rem,2.5vw,1.25rem);line-height:1.6}.contents div #age{color:#0ff;font-weight:900}.contents div #grn{color:#90ee90;font-weight:900}.contents div #yellow{color:#ff0;font-weight:900}.contents div #red{color:#f08080;font-weight:900}.contents div #wht{color:#fff;font-weight:900}.togepi-wrap{padding:10px 0 20px;display:flex}.togepi-img{filter:drop-shadow(0 0 18px #ff9a0059);width:min(320px,70vw);max-width:100%;height:auto;display:flex}.uppersec{flex-direction:row;justify-content:space-between;display:flex}.prjct{flex-direction:column;justify-content:center;align-items:center;margin-left:15px;padding:5px;display:flex}.hd2{gap:2px;font-size:2rem}.envelope{justify-content:center;align-items:flex-end;width:500px;height:350px;margin:50px auto;transition:transform .5s ease-in-out,z-index .5s;display:flex;position:relative}.envelope:hover{cursor:pointer}.mailBack{z-index:1;background-color:gray;width:500px;height:200px;position:absolute;bottom:0}.card img{object-fit:cover;width:auto;height:250px;transition:transform .3s ease-in-out}.card a{color:inherit;text-decoration:none}.card:hover{z-index:10;box-shadow:0 8px 16px #0000004d}.card-title{margin:5px 0;font-size:1.2rem;transition:color .3s ease-in-out}.mail-front{width:500px;height:200px;position:absolute;bottom:0}.mail-front span{background-color:#f5f5f5;width:100%;height:100%;position:absolute;inset:0}.mail-t{clip-path:polygon(0 0,100% 0,50% 50%);transform-origin:top;z-index:4;transition:transform .5s ease-in-out,z-index .5s}.mail-b{clip-path:polygon(0 100%,100% 100%,50% 50%);z-index:1}.mail-l{clip-path:polygon(0 0,0 100%,50% 50%);z-index:1}.mail-r{clip-path:polygon(100% 0,100% 100%,50% 50%);z-index:1}.envelope.is-open .mail-t{z-index:1;transform:rotateX(180deg)}.envelope.is-open{z-index:1;transform:translateY(100px)scale(.7)}.cards{z-index:2;pointer-events:none;width:100%;height:200px;position:absolute;bottom:0}.envelope.is-open .cards{pointer-events:auto}.card{opacity:0;text-align:center;background-color:#29373a;border-radius:10px;margin-left:-300px;padding:15px;transition:transform .6s ease-in-out,opacity .4s ease-in-out;position:absolute;bottom:0;left:50%;transform:translateY(50px)scale(.5)}.envelope.is-open .card{opacity:1}.envelope.is-open .card[id="0"]{z-index:3;transform:translate(-480px,-100px)rotate(-36deg)}.envelope.is-open .card[id="1"]{z-index:4;transform:translate(-240px,-160px)rotate(-18deg)}.envelope.is-open .card[id="2"]{z-index:5;transform:translateY(-180px)rotate(0)}.envelope.is-open .card[id="3"]{z-index:4;transform:translate(240px,-160px)rotate(18deg)}.envelope.is-open .card[id="4"]{z-index:3;transform:translate(480px,-100px)rotate(36deg)}.envelope.is-open .card[id="0"]:hover{z-index:10;transform:translate(-480px,-100px)scale(1.1)rotate(-36deg)}.envelope.is-open .card[id="1"]:hover{z-index:10;transform:translate(-240px,-160px)scale(1.1)rotate(-18deg)}.envelope.is-open .card[id="2"]:hover{z-index:10;transform:translateY(-180px)scale(1.1)rotate(0)}.envelope.is-open .card[id="3"]:hover{z-index:10;transform:translate(240px,-160px)scale(1.1)rotate(18deg)}.envelope.is-open .card[id="4"]:hover{z-index:10;transform:translate(480px,-100px)scale(1.1)rotate(36deg)}.cli{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;margin:50px 0;display:flex}.bg{background-color:#1e1e1e;border:2px solid #ff9a00;border-radius:20px;width:80%;height:60vh}.txtArea{color:#ff9a00;background-color:#1e1e1e;border:2px solid #ff9a00;border-radius:20px;align-items:flex-start;width:80%;height:60vh;padding:10px;font-size:1.2rem;display:flex;position:relative}.start{color:#ff9a00;margin-bottom:10px;font-family:Fira Code,monospace;font-weight:700}.cursor{margin-left:5px;animation:1s infinite blink}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}.hiddenInput{opacity:0;cursor:text;border:none;outline:none;width:100%;height:100%;position:absolute;top:0;left:0}