@import"https://fonts.googleapis.com/css2?family=Asap&family=Cinzel&family=Playfair+Display&display=swap";@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--header-height: 66px;--color-palette-50: #f0f4f8;--color-palette-100: #d9e2ec;--color-palette-200: #bcccdc;--color-palette-300: #9fb3c8;--color-palette-400: #829ab1;--color-palette-500: #627d98;--color-palette-600: #486581;--color-palette-700: #334e68;--color-palette-800: #243b53;--color-palette-900: #102a43;--logo-size: 48px}html{scroll-behavior:smooth}body{background-color:var(--color-palette-800);color:var(--color-palette-200);min-width:320px;width:100%}::-webkit-scrollbar{display:none}.flex-center{display:flex;align-items:center;justify-content:center}.flex-column{flex-direction:column}.separating-line{width:50%;border:1px;border-bottom-style:solid;margin-top:2.82em}.icon{width:24px;height:24px}.button{display:inline-block;color:var(--color-palette-200);text-decoration:none;border:solid 1px var(--color-palette-200);border-radius:10px;padding:16px 24px;transition:.3s;min-width:200px;text-align:center;cursor:pointer}.button:hover{border:solid 1px var(--color-palette-50);color:var(--color-palette-50)}button{cursor:pointer}.error-text{color:red}#home-logo{background-image:url(../images/header/logo.png);background-size:cover;background-position:center;aspect-ratio:3 / 1;width:150px}#home-logo:hover{background-image:url(../images/header/animated-logo.png)}.logo{display:inline-block;aspect-ratio:1 / 1;width:var(--logo-size, 48px);background-size:contain;transition:.3s}.linkedin-logo{background-image:url(../images/linkedin-light.png)}.linkedin-logo:hover{background-image:url(../images/linkedin-dark.png)}.github-logo{background-image:url(../images/github-light.png)}.github-logo:hover{background-image:url(../images/github-dark.png)}main{font:24px Asap;display:flex;flex-direction:column}.section-title{font:48px Cinzel;color:var(--color-palette-50);text-align:center}.section-subtitle{font:32px Cinzel;color:var(--color-palette-50)}footer{font:20px Playfair Display;text-align:center;margin:28px 0}@media screen and (max-width: 481px){:root{--logo-size: 32px;--header-height: 49px}.section-title{font-size:32px}.section-subtitle{font-size:24px}footer{font-size:12px}main{font-size:16px}.button{min-width:120px;padding:8px 12px}}#home{--min-height: 754px;display:flex;flex-direction:column;align-items:center;height:100vh;font-size:28px;min-height:var(--min-height, 754px);font-family:Playfair Display;padding-top:var(--header-height, 0)}#home-content{height:100%;padding-left:16px;padding-right:16px}#home-content-container{position:relative;min-height:calc(var(--min-height, 754px) - var(--header-height, 69px));height:100%;width:100%}#home-content-container:before{content:"";position:absolute;opacity:.25;background-image:url(../images/home/raymond-coding.png);background-size:cover;background-position:center;width:100%;min-height:calc(var(--min-height, 754px) - var(--header-height, 69px));height:100%}#hero-text-name{font-size:60px;font-weight:400;text-align:center;padding-top:2.35em;color:var(--color-palette-50);letter-spacing:.35em;text-transform:uppercase}#hero-text-intro,#tagline,#read-more-text{font-size:28px;font-weight:400}#tagline{padding-top:4.786em;color:var(--color-palette-50);word-break:break-word;text-align:center}#read-more{width:100%}#read-more-arrow{width:32px;height:32px;margin-top:.857em;transform:rotate(180deg)}@media screen and (max-width: 1366px){#read-more .separating-line{margin-top:24px}}@media screen and (max-width: 768px){#hero-text-name{font-size:48px}}@media screen and (max-width: 481px){#home-logo{width:120px}#home,#home>*{--min-height: 450px}#hero-text-name{font-size:24px}#hero-text-intro{font-size:12px}#tagline,#read-more-text{font-size:16px}#read-more-arrow{width:16px;height:16px}}#about{padding-top:var(--header-height, 0);padding-bottom:85px}#about .section-subtitle{margin-top:.5em}#about .section-subtitle{text-align:center}.about-hover-cards-container{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:16px}#about-self-portrait{width:200px;aspect-ratio:1 / 1;object-fit:cover;border-radius:50%}#about-content-intro{min-width:288px;flex:1 1 0}#about-content{margin-top:60px;gap:16px;flex-wrap:wrap}#about-content img:nth-child(3),#about-content>div{min-width:433px;flex:1 1 0;max-width:527px}#about-buttons{justify-content:space-between;justify-self:center}#about-work-button{margin-top:16px}#about-contact-button{margin-left:32px;margin-top:16px}@media screen and (max-width: 1366px){#about{padding-left:40px;padding-right:40px}#about{padding-bottom:85px}#about-content img:nth-child(3),#about-content>div{flex:1 1 0;max-width:none}#about-content img:nth-child(3){max-width:600px}#about-buttons{flex-wrap:wrap;column-gap:32px;justify-content:flex-start}#about-buttons>a{margin:16px 0 0}}@media screen and (max-width: 481px){#about{padding-top:calc(var(--header-height, 0) + 50px)}#about-content{margin-top:32px}.hover-card{min-width:288px}#about{padding-left:16px;padding-right:16px}#about-content img:nth-child(3),#about-content>div{min-width:288px;flex:1 1 0;max-width:420px}#about-buttons{grid-column-gap:8px}.button{min-width:120px;padding:8px 12px}}.hover-card{--card-padding: 16px;padding:var(--card-padding);background-color:#fff;position:relative;max-width:534px;min-width:400px;width:100%;transition:.3s;cursor:pointer;overflow:hidden;flex:1 1 0;aspect-ratio:3 / 2}.hover-card:hover{background-color:var(--color-palette-900)}.hover-card img{object-fit:contain;background-color:#fff;width:calc(100% - var(--card-padding));height:calc(100% - var(--card-padding));position:absolute;transition:.3s}.hover-card img:hover{opacity:0;transform:scale(1.2)}.hover-card p{text-align:center}#projects{background-image:url(../images/projects/project-background.png);background-size:100% 100%;padding-top:var(--header-height, 0);padding-bottom:85px}#projects-container{display:flex;position:relative;color:var(--color-palette-900);max-width:1366px;margin:60px auto 0}#projects-container .button,#projects-container .section-subtitle{color:var(--color-palette-900);border-color:var(--color-palette-900)}#projects-container .button:hover{color:var(--color-palette-500);border-color:var(--color-palette-500)}#projects-container>*{width:50%}#projects-image-container{position:relative}#projects-description-content-container{display:flex;gap:8px;margin-top:8px}#projects-image-container,#projects-description-content{overflow:hidden}#projects-image-container>*,#projects-description-content>*{transform-origin:left top;transform:translateY(100%)}.project-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left}#projects-description-content{display:grid}.project-description-links{display:flex;gap:8px}#projects .logo{height:61px;width:61px}.show{transform:translateY(0)!important}#projects-description-content>*{grid-row:1 / -1;grid-column:1 / -1}.project-description>*:not(:first-child){margin-top:8px}.project-description p{line-height:150%}.project-description .github-logo{background-image:url(../images/github-900.png)}.project-description .github-logo:hover{background-image:url(../images/github-500.png)}#projects-description-container{background-color:var(--color-palette-50);padding:32px}.project-description,.project-image{transition:1s}#projects-description-arrows button{background-image:url(../images/projects/arrow.png);background-size:cover;background-color:transparent;width:48px;height:48px;border:none;cursor:pointer;position:relative;border:1px solid transparent}#projects-description-arrows button:hover{border:1px solid var(--color-palette-900)}#projects-description-prev-btn{transform:rotate(-90deg)}#projects-description-next-btn{transform:rotate(90deg)}#project-number-container{position:relative;display:flex;flex-direction:column;--project-number-container-width: 50px;--diagonal-length: 70px;width:var(--project-number-container-width);color:var(--color-palette-900)}#project-number-container:after{content:"";position:absolute;width:var(--diagonal-length);border:1px solid var(--color-palette-500);transform:rotate(-45deg);bottom:50%;left:calc(calc(var(--diagonal-length) - var(--project-number-container-width)) / 2 * -1)}#total-project-number{align-self:flex-end}#projects-description-arrows{align-self:flex-end;display:flex;flex-direction:column}#projects-description-arrows img{width:48px;height:48px}@media screen and (max-width: 1366px){#projects{padding-left:40px;padding-right:40px}#projects{padding-bottom:85px}.projects-image{width:100%;max-width:424px;justify-self:center;grid-row:1;grid-column:1}.projects-image>*{max-width:424px;width:100%!important}}@media screen and (max-width: 1024px){#projects-container{flex-direction:column}#projects-image-container{aspect-ratio:4 / 3}#projects-container>*{width:100%}}@media screen and (max-width: 481px){#projects{padding-top:calc(var(--header-height, 0) + 50px)}#projects-container{margin-top:32px}#project-number-container{--project-number-container-width: 30px;--diagonal-length: 47px}#projects{padding-left:16px;padding-right:16px}#projects-description-container{padding:16px}#projects-description-arrows button{width:32px;height:32px}.projects-image,.projects-image>*{width:100%;min-width:0!important;height:170px!important}#projects .logo{height:36px;width:36px}}#skills{padding-top:var(--header-height, 0)}#skills-content-container{max-width:1366px;margin-top:60px;display:grid;grid-column-gap:16px}#hard-skills-container{display:flex;flex-wrap:wrap;gap:50px;--hard-skills-width: 130px}.hard-skills-content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:var(--hard-skills-width)}.hard-skills-content img{width:100%}.hard-skills-content p{text-align:center;font-size:32px}@media screen and (max-width: 1366px){#skills{padding-left:40px;padding-right:40px}#skills-content-container{grid-template-columns:100%;grid-row-gap:32px}#hard-skills-container{grid-row:2;grid-column:1;justify-self:center}}@media screen and (max-width: 768px){#hard-skills-container{--hard-skills-width: 100px;gap:32px}}@media screen and (max-width: 481px){#skills{padding-top:calc(var(--header-height, 0) + 50px)}#skills-content-container{margin-top:32px}.hard-skills-content p{font-size:16px}#skills{padding-left:16px;padding-right:16px}#hard-skills-container{grid-template-columns:repeat(2,100px)}#skills-content-container{padding:0 16px}}#contact{padding-top:var(--header-height, 0)}.contact-form{display:flex;flex-direction:column}#contact-chatbox-container{display:grid;grid-template-rows:70px;margin-top:32px;background-color:#1a273f;width:63.5%;border-radius:30px;grid-template-columns:100%}#contact-chatbox-header{grid-row:1;background-color:#0e1a30;border-radius:30px 30px 0 0;padding:21px 0 21px 32px}#contact-chatbox-content-container{display:flex;flex-direction:column;padding:16px}#contact-chatbox-content-container .contact-chatbox-right{align-self:flex-end}.contact-chatbox-left{align-self:flex-start}#contact-chatbox-content-container button{margin-top:8px;background-color:#1a273f;font:24px Asap}#contact input,#contact textarea,p.contact-chatbox-content,div.contact-chatbox-left{margin-top:8px;background-color:var(--color-palette-800);border-radius:10px;display:block;border:none;font:24px Asap;color:var(--color-palette-50);padding:16px 20px}div.contact-chatbox-right{margin-top:8px}#contact input,#contact textarea{margin-top:0}div.contact-chatbox-right{width:75%}#contact input,#contact textarea{width:100%}#contact textarea{height:200px}.contact-chatbox-contact-info{margin-top:8px;display:grid;grid-column-gap:8px;grid-template-columns:24px}.contact-chatbox-contact-info-icon{align-self:center;width:24px}.contact-chatbox-contact-info-content{grid-column:2;word-break:break-word}#contact .logo{margin-top:8px}#contact .linkedin-logo{margin-left:0}#contact a{color:inherit}#contact input::placeholder,#contact textarea::placeholder{color:var(--color-palette-200)}#contact input:focus,#contact input:hover,#contact textarea:focus,#contact textarea:hover{outline:none;background-color:#1c3046}.contact-chatbox-content{position:relative}.contact-chatbox-content:before{content:"";position:absolute;background-image:url(../images/contact/chat-bubble-light.png);height:14px;width:21px;left:calc(100% - 11px);top:calc(100% - 14px);pointer-events:none}.contact-chatbox-right:hover:before,.contact-chatbox-right:focus-within:before{background-image:url(../images/contact/chat-bubble-dark.png)!important}.contact-chatbox-left{border-radius:10px 10px 10px 0}.contact-chatbox-left:before{transform:scaleX(-1);left:-10px}@media screen and (max-width: 768px){#contact{padding-left:40px;padding-right:40px}#contact-chatbox-container{width:100%}}@media screen and (max-width: 481px){#contact{padding-top:calc(var(--header-height, 0) + 50px)}#contact-chatbox-content-container button{font-size:16px}#contact{padding-left:16px;padding-right:16px}#contact-chatbox-container{grid-template-rows:44px}#contact-chatbox-header{padding:12px 0 12px 28px}#contact input,#contact textarea,p.contact-chatbox-content,div.contact-chatbox-left{font-size:16px;padding:8px 12px}}#header nav a{color:var(--color-palette-200);font:24px Asap;text-align:center}#header nav a:hover{color:var(--color-palette-50);transition:.3s}.close+ul{display:block!important}#header nav ul{display:none;position:absolute;top:100%;left:0;width:100%;padding:16px;background-color:var(--color-palette-800);list-style:none}#header nav ul li{text-align:center}#header nav ul li:not(:first-child){margin-top:16px;text-align:center}.dropdown-menu{--stripes-length: 36px;height:var(--logo-size, 48px);width:var(--stripes-length);display:flex;flex-direction:column;row-gap:3px;background:transparent;border:none;cursor:pointer}.dropdown-menu-stripes{width:var(--stripes-length);height:2px;background-color:var(--color-palette-50);transition:.25s ease-in-out}.dropdown-menu.close .dropdown-menu-stripes{position:absolute}.dropdown-menu.close .dropdown-menu-stripes:nth-child(1){transform:rotate(135deg)}.dropdown-menu.close .dropdown-menu-stripes:nth-child(2){opacity:0}.dropdown-menu.close .dropdown-menu-stripes:nth-child(3){transform:rotate(-135deg)}.dropdown-menu:hover>.dropdown-menu-stripes{background-color:var(--color-palette-200)}#header{background-color:var(--color-palette-800);display:flex;flex-direction:column;font-family:Playfair Display;position:fixed;top:0px;z-index:1000;width:100%;padding:8px 16px}#header-content{display:flex;justify-content:space-between;align-items:center}#header-content-right{display:flex;gap:16px}header a{text-decoration:none}.cms{--size-xl: 32px;--size-l: 28px;--size-m: 20px;--size-s: 16px;--size-xs: 12px;--white-100: #faffff;--white-200: #edf2fb;--white-300: #e2eafc;--white-400: #ccdbfd;--blue-100: #4361ee;--blue-200: #3f37c9;--red: #ef476f;--gray-100: #979dac;--gray-200: #5c677d;--gray-300: #33415c;background-color:#fff;color:var(--gray-300);min-height:100vh;font-family:Manrope,sans-serif}.cms-form{width:fit-content}.cms-form__field{margin:8px 0;display:flex;justify-content:space-between}.cms-form__label{padding-right:8px}.cms-form__field input:not([type="checkbox"]),.cms-form__field textarea,.cms-form__field select{background-color:var(--white-200);padding:1em;width:200px}.cms__button{font-size:16px;display:inline-block;background-color:var(--white-200);border:0;padding:.5em;border-radius:10px;align-self:start}.cms__table-button{background-color:transparent}.cms-form__checkbox-container{display:flex;flex-direction:column;flex-grow:1000}.cms-form__checkbox{margin:8px}.dashboard{display:flex;background-color:#fff;color:var(--gray-300);min-height:100vh}.dashboard__header{width:200px;min-width:200px;background-color:var(--white-200);position:sticky;top:0;height:100vh}.dashboard__icon{width:1em;margin-right:.5em;color:var(--blue-200)}.dashboard__link,.dashboard__link:link,.dashboard__link:visited,.cms__button.dashboard__header-button{font-size:16px;font-family:Manrope,sans-serif;font-weight:500;color:var(--gray-200);cursor:pointer;text-decoration:none}.dashboard__link:hover,button:hover{color:var(--blue-200)!important}.dashboard__header li{padding:.5em 1em}.dashboard__table{border-collapse:collapse;width:100%;margin:.5em 0}.dashboard__table td,.dashboard__table th{padding:8px;vertical-align:middle}.dashboard__table tr:nth-child(even){background-color:var(--white-200)}.dashboard__table tr:nth-child(odd){background-color:var(--white-100)}.dashboard__table tr:hover{background-color:var(--white-400)}.dashboard__table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:var(--blue-100);color:var(--white-100)}.dashboard__image{width:200px}.dashboard__main{font-size:16px;font-family:Manrope,sans-serif;padding:20px;width:100%}.dashboard__button{font-size:16px;display:inline-block;background-color:var(--white-200);padding:.5em;border-radius:10px;align-self:start}.cms__button.dashboard__header-button{padding:0;border-radius:0}.dashboard__user{background-color:var(--blue-200);color:var(--white-100);padding:1em;font-size:20px;text-align:center}.dashboard__preview-img{margin-top:8px;width:200px}.dashboard__image.skill-image{width:100px}