@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap";@tailwind base;@tailwind components;@tailwind utilities;@layer base{body{@apply bg-primary text-text-secondary font-sans antialiased;}html{@apply scroll-smooth;}section{@apply min-h-screen py-24 px-8 md:px-16 lg:px-24;}h1,h2,h3{@apply text-text-primary font-bold;}h2{@apply text-3xl md:text-4xl mb-8 text-center;}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0a192f}::-webkit-scrollbar-thumb{background:#8892b0;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#64ffda}.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}.card-swap-container{perspective:900px;overflow:visible}.card{position:absolute;top:50%;left:50%;border-radius:12px;border:1px solid var(--accent-color);background:var(--secondary-color);transform-style:preserve-3d;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}@media(max-width:1200px){.card-swap-container{transform:scale(.9)}}@media(max-width:991px){.card-swap-container{transform:scale(.8)}}@media(max-width:576px){.card-swap-container{transform:scale(.65)}}.preloader-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#0a192f;z-index:9999;transition:opacity .5s ease,visibility .5s ease}.loader{scale:.75;position:relative;width:200px;height:200px;translate:10px -20px}.loader svg{position:absolute;top:0;left:0}.head{translate:27px -30px;z-index:3;animation:bob 1s infinite ease-in}.bod{translate:0px 30px;z-index:3;animation:bob 1s infinite ease-in-out}.legr{translate:75px 135px;z-index:0;animation:rstep 1s infinite ease-in;animation-delay:.45s}.legl{translate:30px 155px;z-index:3;animation:lstep 1s infinite ease-in}#gnd{translate:-140px 0;rotate:10deg;z-index:-1;filter:blur(.5px) drop-shadow(1px 3px 5px #000000);opacity:.25;animation:scroll 5s infinite linear}@keyframes bob{0%{transform:translateY(0) rotate(3deg)}5%{transform:translateY(0) rotate(3deg)}25%{transform:translateY(5px) rotate(0)}50%{transform:translateY(0) rotate(-3deg)}70%{transform:translateY(5px) rotate(0)}to{transform:translateY(0) rotate(3deg)}}@keyframes lstep{0%{transform:translateY(0) rotate(-5deg)}33%{transform:translateY(-15px) translate(32px) rotate(35deg)}66%{transform:translateY(0) translate(25px) rotate(-25deg)}to{transform:translateY(0) rotate(-5deg)}}@keyframes rstep{0%{transform:translateY(0) translate(0) rotate(-5deg)}33%{transform:translateY(-10px) translate(30px) rotate(35deg)}66%{transform:translateY(0) translate(20px) rotate(-25deg)}to{transform:translateY(0) translate(0) rotate(-5deg)}}@keyframes scroll{0%{transform:translateY(25px) translate(50px);opacity:0}33%{opacity:.25}66%{opacity:.25}to{transform:translateY(-50px) translate(-100px);opacity:0}}:root{--primary-color: #0a192f;--secondary-color: #112240;--accent-color: #64ffda;--text-primary: #ccd6f6;--text-secondary: #8892b0;--header-height: 80px;--driver-popover-bg: var(--secondary-color);--driver-popover-border-color: var(--accent-color);--driver-popover-title-color: var(--text-primary);--driver-popover-description-color: var(--text-secondary);--driver-popover-arrow-color: var(--secondary-color);--driver-button-text-color: var(--primary-color);--driver-button-bg: var(--accent-color);--driver-button-hover-bg: #a8ffeb;--driver-button-secondary-text-color: var(--accent-color);--driver-button-secondary-bg: transparent;--driver-button-secondary-hover-bg: rgba(100, 255, 218, .1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--primary-color);color:var(--text-secondary);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}main{padding:0 24px}section{min-height:100vh;padding:100px 0;display:flex;flex-direction:column;justify-content:center;max-width:1100px;margin:0 auto}h1,h2,h3{color:var(--text-primary);font-weight:700}a{text-decoration:none;color:var(--accent-color);transition:all .25s cubic-bezier(.645,.045,.355,1)}.header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);display:flex;justify-content:space-between;align-items:center;padding:0 40px;background-color:var(--primary-color);z-index:10;transition:all .3s ease}.header.scrolled{background-color:#112240d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px -10px #000000b3}.portfolio-logo{height:50px;width:auto;transition:transform .3s ease}.portfolio-logo:hover{transform:scale(1.05)}.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}.nav-links a{color:var(--text-secondary);font-family:Inter,sans-serif;font-size:.95rem;font-weight:500;position:relative;padding:5px 0;transition:color .3s ease}.nav-links a:hover{color:var(--accent-color)}.nav-links a:not(.resume-button):after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:var(--accent-color);transform:scaleX(0);transform-origin:center;transition:transform .3s ease-in-out}.nav-links a:not(.resume-button):hover:after{transform:scaleX(1)}.resume-button{color:var(--accent-color)!important;border:1px solid var(--accent-color);padding:.5rem 1rem!important;border-radius:4px;transition:background-color .3s ease}.resume-button:hover{background-color:#64ffda1a}.mobile-menu-btn{display:none;background:none;border:none;color:var(--accent-color);font-size:2rem;cursor:pointer;z-index:20}.sidebar{position:fixed;top:0;right:0;height:100vh;width:min(75vw,400px);background-color:var(--secondary-color);box-shadow:-10px 0 30px -15px #000000b3;display:flex;justify-content:center;align-items:center;transform:translate(100%);transition:transform .3s ease-in-out;z-index:9}.sidebar.sidebar-open{transform:translate(0)}.sidebar-links{list-style:none;display:flex;flex-direction:column;align-items:center;gap:2.5rem;text-align:center}.sidebar-links a{font-size:1.5rem;font-family:Inter,sans-serif;font-weight:600;color:var(--text-primary)}.sidebar-links a:hover{color:var(--accent-color)}.resume-button-mobile{margin-top:1rem;font-size:1.2rem!important;color:var(--accent-color)!important;border:1px solid var(--accent-color);padding:.75rem 2rem;border-radius:4px}.hero{text-align:left;max-width:1000px}.hero .intro{color:var(--accent-color);font-family:Fira Code,monospace;font-size:1.1rem;margin-bottom:1.5rem}.hero .name{font-size:clamp(40px,8vw,80px);line-height:1.1}.hero .subtitle{font-size:clamp(40px,8vw,70px);color:var(--text-secondary);line-height:1.1;margin-top:.5rem}.hero .description{margin-top:1.5rem;max-width:540px;font-size:1.1rem;line-height:1.6}.hero .cta-button{display:inline-flex;align-items:center;gap:.5rem;margin-top:3rem;padding:1.25rem 1.75rem;background:transparent;border:2px solid var(--accent-color);color:var(--accent-color);font-size:1rem;font-weight:600;border-radius:4px;cursor:pointer;transition:all .3s ease}.hero .cta-button:hover{background-color:#64ffda1a}.section-title{display:flex;align-items:center;width:100%;white-space:nowrap;font-size:2rem;margin-bottom:2.5rem}.section-title:after{content:"";display:block;width:100%;height:1px;margin-left:1.25rem;background-color:#8892b033}.section-title .number{color:var(--accent-color);font-family:Fira Code,monospace;font-size:1.5rem;margin-right:.75rem;font-weight:400}.about{display:flex;flex-direction:column;align-items:center;text-align:center}.about-content{display:flex;flex-direction:column;align-items:center;gap:50px;width:100%;max-width:1000px;margin:0 auto}.about-image-wrapper{position:relative;width:250px;height:250px;border-radius:50%;overflow:hidden;border:2px solid var(--accent-color);box-shadow:0 0 0 7px #64ffda33;transition:all .3s ease}.about-image-wrapper:hover{box-shadow:0 0 0 10px #64ffda66;transform:scale(1.02)}.profile-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.about-text{flex:1;max-width:600px}.about-text h3{margin-bottom:1rem}.about-text p{margin-bottom:1.25rem;line-height:1.7;font-size:1.05rem;color:var(--text-secondary);text-align:center}.skills{overflow:hidden}.skills-keycap-container{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem 1.5rem;margin-top:4rem;perspective:1000px;transform:rotateX(15deg)}.keycap-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem}.keycap{position:relative;width:90px;height:90px;transform-style:preserve-3d;transform:rotateX(-15deg);transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;box-shadow:0 10px #070e1b,1px 11px #070e1b,2px 12px #070e1b,3px 13px #070e1b,4px 14px 10px #0009}.keycap:hover{transform:translateY(5px) rotateX(-15deg);box-shadow:0 5px #070e1b,1px 6px #070e1b,2px 7px #070e1b,3px 8px 5px #0009}.keycap-face{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:12px}.keycap-front{background-color:var(--secondary-color);transform:translateZ(5px);border:1px solid #2a3a57}.keycap-front:before{content:"";position:absolute;width:100%;height:100%;background-color:#22324f;border-radius:12px;transform:translateY(-100%) rotateX(90deg);transform-origin:bottom;border:1px solid #2a3a57}.keycap-icon{font-size:3rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}.keycap-label{color:var(--text-secondary);font-weight:500;font-size:.9rem}.education-container{display:grid;grid-template-columns:1fr;gap:2rem;max-width:800px;margin:2rem auto 0}.education-box{background-color:var(--secondary-color);border-radius:8px;padding:1.5rem;display:flex;align-items:center;gap:1.5rem}.education-logo{width:80px;height:80px;border-radius:50%;object-fit:cover}.education-content h3{font-size:1.2rem;color:var(--text-primary)}.education-content p{color:var(--text-secondary);margin:.25rem 0}.education-content h4{color:var(--accent-color);font-size:.9rem;font-weight:500}.certificates-wrapper{margin-top:2rem;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}.certificates-scroll-container{display:flex;overflow-x:auto;padding-bottom:1.5rem;scrollbar-width:none;-ms-overflow-style:none}.certificates-scroll-container::-webkit-scrollbar{display:none}.certificate-card{width:300px;flex-shrink:0;margin-right:20px;background-color:var(--secondary-color);border-radius:8px;overflow:hidden;text-decoration:none;box-shadow:0 10px 30px -15px #000000b3;transition:transform .3s ease-in-out}.certificate-card:hover{transform:translateY(-7px)}.certificate-image{width:100%;height:180px;object-fit:cover;display:block}.certificate-info{padding:1.25rem}.certificate-info h3{color:var(--text-primary);font-size:1.1rem;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.certificate-info p{color:var(--text-secondary);font-size:.9rem}.projects-section-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem;padding:100px 24px;max-width:1200px;margin:0 auto;overflow:hidden}.projects-text-content{max-width:600px;text-align:center;z-index:2;margin:0 auto}.projects-description{margin-top:1.5rem;color:var(--text-secondary);line-height:1.6;font-size:1.1rem}.projects-card-swap-wrapper{position:relative;width:100%;height:520px;display:flex;justify-content:center;align-items:center;margin-top:1rem}@media(min-width:992px){.projects-section-container{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:4rem}.projects-text-content{text-align:left;max-width:100%;margin:0}.projects-card-swap-wrapper{margin-top:0;height:600px}}.project-card{background-color:var(--secondary-color);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px -15px #020c1bb3;display:flex;flex-direction:column;height:100%;border:1px solid rgba(100,255,218,.05)}.project-card .project-image-container{position:relative;width:100%;height:55%;overflow:hidden;border-bottom:1px solid rgba(2,12,27,.1)}.project-card .project-image{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .3s ease}.project-card:hover .project-image{transform:scale(1.05)}.project-card .project-status-badge{position:absolute;top:15px;right:15px;padding:5px 12px;font-size:.7rem;font-weight:700;border-radius:20px;color:#fff;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 10px #0000004d;z-index:5}.project-card .status-green{background-color:#10b981}.project-card .status-red{background-color:#ef4444}.project-card .status-blue{background-color:#3b82f6}.project-card .status-gray{background-color:#8892b0}.project-card .project-content{padding:1.5rem;flex:1;display:flex;flex-direction:column;justify-content:space-between}.project-card .project-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.project-card .project-card-title{font-size:1.35rem;margin:0;line-height:1.1;font-weight:700;color:var(--text-primary)}.project-card .project-card-title a{text-decoration:none;color:inherit;transition:color .3s ease}.project-card .project-card-title a:hover{color:var(--accent-color)}.project-card .project-card-links{display:flex;align-items:center;gap:15px;margin-left:12px;padding-top:2px}.project-card .project-card-links a{color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.645,.045,.355,1)}.project-card .project-card-links a:hover{color:var(--accent-color);transform:translateY(-2px)}.project-card .project-card-description{font-size:.95rem;color:var(--text-secondary);margin-bottom:1rem;line-height:1.5}.project-card .project-card-tech{display:flex;flex-wrap:wrap;gap:8px;font-family:Fira Code,monospace;font-size:.75rem;color:var(--accent-color);margin-top:auto}.contact-section{padding:100px 20px;display:flex;justify-content:center;align-items:center;min-height:80vh}.contact-container{max-width:600px;width:100%;text-align:center}.contact-header .number{color:var(--accent-color);font-family:Fira Code,monospace;font-size:1rem;display:block;margin-bottom:20px}.contact-header .title{font-size:clamp(40px,5vw,60px);margin-bottom:10px;color:var(--text-primary)}.contact-header .description{color:var(--text-secondary);font-size:1.1rem;line-height:1.6;margin-bottom:50px}.contact-form{display:flex;flex-direction:column;gap:15px;margin-bottom:30px}.form-group{display:flex;gap:15px}.form-input,.form-textarea{width:100%;padding:15px;background-color:var(--secondary-color);border:1px solid transparent;border-radius:4px;color:var(--text-primary);font-family:Inter,sans-serif;font-size:1rem;transition:all .3s ease}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--accent-color);background-color:#112240cc}.form-input::placeholder,.form-textarea::placeholder{color:#8892b080}.form-footer{display:flex;align-items:center;justify-content:space-between;margin-top:15px;flex-wrap:wrap;gap:20px}.contact-section .cta-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:1rem 1.75rem;background-color:transparent;border:1px solid var(--accent-color);color:var(--accent-color);font-family:Fira Code,monospace;font-size:1rem;font-weight:600;border-radius:4px;cursor:pointer;transition:all .3s ease;text-decoration:none;margin-top:0}.contact-section .cta-button:hover{background-color:#64ffda1a;transform:translateY(-3px);box-shadow:0 5px 15px #0000004d}.contact-section .cta-button:disabled{opacity:.6;cursor:not-allowed;border-color:var(--text-secondary);color:var(--text-secondary);transform:none;box-shadow:none}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footer-right{display:flex;align-items:center;justify-content:flex-end}.email-text{font-size:.9rem;color:var(--text-secondary);margin:0}.email-link{color:var(--accent-color);text-decoration:none;margin-left:5px;font-family:Fira Code,monospace;font-size:.85rem}.email-link:hover{text-decoration:underline}.status-msg{display:flex;align-items:center;gap:8px;font-size:.9rem;font-family:Fira Code,monospace}.status-msg.success{color:var(--accent-color)}.status-msg.error{color:#ef4444}.footer{padding:1.5rem;text-align:center;font-family:Fira Code,monospace;font-size:.8rem;color:var(--text-secondary)}.social-sidebar,.email-sidebar{display:none}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0a192fd9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.modal-content{position:relative;max-width:90vw;max-height:90vh}.modal-image{width:100%;height:100%;max-width:1200px;max-height:80vh;object-fit:contain;border-radius:8px}.modal-close-btn{position:absolute;top:-15px;right:-15px;background-color:var(--secondary-color);color:var(--text-primary);border:2px solid var(--accent-color);border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .3s,transform .3s}.modal-close-btn:hover{background-color:var(--accent-color);color:var(--primary-color);transform:rotate(90deg)}.driver-popover{border:1px solid var(--driver-popover-border-color);font-family:Inter,sans-serif}.driver-popover-title{font-size:1.25rem;font-weight:600}.driver-popover-close-btn{color:var(--text-secondary)}.driver-popover-close-btn:hover{color:var(--accent-color)}@media(min-width:768px){.social-sidebar{display:flex;flex-direction:column;align-items:center;gap:1.5rem;position:fixed;bottom:0;left:40px}.social-sidebar a{font-size:1.5rem;color:var(--text-secondary)}.social-sidebar a:hover{color:var(--accent-color);transform:translateY(-3px)}.social-sidebar:after{content:"";display:block;width:1px;height:90px;background-color:var(--text-secondary)}.email-sidebar{display:flex;flex-direction:column;align-items:center;gap:1.5rem;position:fixed;bottom:0;right:40px}.email-sidebar a{writing-mode:vertical-rl;font-family:Fira Code,monospace;font-size:.9rem;color:var(--text-secondary);padding:10px}.email-sidebar a:hover{color:var(--accent-color);transform:translateY(-3px)}.email-sidebar:after{content:"";display:block;width:1px;height:90px;background-color:var(--text-secondary)}.about-content{flex-direction:row;align-items:flex-start;gap:80px}.about-text p{text-align:left}.about .section-title{align-self:flex-start;text-align:left}.certificates-wrapper{-webkit-mask-image:none;mask-image:none;overflow:visible}.certificates-scroll-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;width:100%;max-width:1000px;margin:0 auto;overflow-x:visible;padding-bottom:0}.certificate-card{width:auto;margin-right:0}}@media(max-width:768px){.header{padding:0 20px}.nav-links,.desktop-nav{display:none}.mobile-menu-btn{display:block}}@media(max-width:600px){.education-box{flex-direction:column;text-align:center}.modal-close-btn{top:5px;right:5px}.form-group{flex-direction:column}.form-footer{flex-direction:column-reverse;align-items:center;gap:20px}.footer-right{justify-content:center}.contact-section .cta-button{width:100%}}@media(max-width:480px){.about-image-wrapper{width:200px;height:200px}}