.container{display:grid;grid-template-columns:20rem 1fr;gap:4rem;min-height:100vh;font-size:1rem;background-color:var(--background)}.container main{position:relative}.container main h1{padding-top:1.5rem;color:var(--primary-color)}@media (max-width: 600px){.container{display:block;margin:0 auto}main h1{text-align:center}}#sideNavigation{background-color:var(--navigation-bar);max-height:100svh;position:sticky;top:0;font-size:1.5rem}#sideNavigation .side-nav-theme{cursor:pointer;background:transparent;border:none;outline:none;padding-left:4rem}#sideNavigation #nav-list{margin:0;padding:0;list-style:none;display:grid;gap:2rem;padding-block:2rem;display:relative}#sideNavigation #nav-list .navActive{view-transition-name:activeNavTab;margin-left:2rem;padding:1rem 4rem 1rem 2rem;border-radius:100vw 0 0 100vw;background:var(--background);position:relative}#sideNavigation #nav-list .navActive:before,#sideNavigation #nav-list .navActive:after{--border-radius: 1rem;content:"";position:absolute;width:var(--border-radius);height:var(--border-radius);right:0;background:var(--navigation-bar)}#sideNavigation #nav-list .navActive:before{top:calc(var(--border-radius) * -1);border-radius:0 0 100vw;box-shadow:5px 5px 0 5px var(--background)}#sideNavigation #nav-list .navActive:after{bottom:calc(var(--border-radius) * -1);border-radius:0 100vw 0 0;box-shadow:5px -5px 0 5px var(--background)}#sideNavigation #nav-list a{text-decoration:none;color:var(--primary-color);font-weight:700;font-style:normal;padding:1rem 2rem;margin-left:2rem}.mobile-nav-header{position:sticky;top:0;background-color:var(--navigation-bar);z-index:1}.mobile-nav-header h3{padding:1rem;margin-top:0}.mobile-nav-header .nav-btn{visibility:visible;opacity:1;padding:5px;cursor:pointer;background:transparent;border:none;outline:none;color:var(--accent-color);font-size:1.8rem;position:absolute;top:1.5rem;right:1rem}.mobile-nav-header .dark-theme{margin-right:4rem}.mobile-nav-header nav{position:fixed;background:var(--navigation-bar);top:0;left:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;transition:2s;z-index:1}.mobile-nav-header nav ul{margin-top:4rem;font-size:1.5rem;text-align:center}.mobile-nav-header nav ul li{list-style:none;padding:.5rem}.mobile-nav-header nav ul li a{text-decoration:none;color:var(--primary-color)}main .hero-section{background:var(--navigation-bar);padding:1.5rem;margin-right:3rem}main .hero-section .quote-container .quote-text{font-weight:300;font-size:1.3rem;font-style:normal;color:var(--text-color)}main .hero-section .quote-container .quote-author{margin-left:60%;font-size:1rem;font-weight:200;font-style:normal;color:var(--text-color)}main .hero-section .outro-text-container{display:flex;gap:4rem;justify-content:space-between}main .hero-section .outro-text-container .homepage-image{flex:1 1 0px;justify-items:center;display:flex;justify-content:space-around}main .hero-section .outro-text-container .homepage-image img{width:40%;height:auto;object-fit:contain;align-self:center;box-shadow:15px 15px 30px var(--shadow-card-color),-15px -15px 30px var(--background)}main .hero-section .outro-text-container .role-headers{margin-top:5%;font-weight:300;font-style:normal;font-size:1.3rem;color:var(--text-color);flex:1 1 0px}main .hero-section .outro-text-container .role-headers h1{font-weight:600;font-style:normal;font-size:2rem;margin:0;line-height:100%;color:var(--accent-color)}main .hero-section .outro-text-container .role-headers ul{list-style-position:inside}@media (max-width: 600px){main .hero-section{margin-inline:3rem}main .hero-section .outro-text-container{display:block}main .hero-section .outro-text-container .homepage-image{display:block}main .hero-section .outro-text-container .homepage-image img{width:100%;height:auto}main .hero-section .outro-text-container .quote-author{margin-bottom:2rem}}.social-icons-container{padding-top:5rem}.social-icons-container .icons{display:flex;flex-wrap:wrap;justify-content:space-around;position:absolute;width:100%;align-items:center;gap:1rem;transform:scale(.7);bottom:0rem}.about-section-container{margin-bottom:2rem}.about-section-container .about-section{display:flex;gap:2rem}.about-section-container .about-section .about-image{flex-shrink:0;margin-inline:auto}.about-section-container .about-section .about-intro-text{margin-top:2rem;font-size:1.3rem;padding-right:2rem;color:var(--text-color)}.about-section-container .about-detail-text{color:var(--text-color);margin-inline:1rem;font-size:1.2rem;padding-right:2rem}@media (max-width: 800px){.about-section-container{padding-inline:1rem}.about-section-container .about-section{display:block}.about-section-container .about-section .about-image{width:fit-content;margin-inline:auto}.about-section-container .about-section .about-intro-text{margin-top:0rem;padding-right:0}.about-section-container .about-section .about-detail-text{padding-right:0}}main .courses-intro-text{margin-bottom:4rem;font-size:1.3rem;color:var(--text-color)}main .courses-intro-text .course-name{font-weight:500;color:var(--accent-color)}main .card-container{padding-inline:1.5rem}@media (max-width: 800px){.courses-intro-text{padding-inline:1rem}.courses-intro-text .course-name{margin-inline:auto}}.course-card-container{width:300px;height:300px;background:var(--navigation-bar);border-radius:30px;box-shadow:15px 15px 30px var(--shadow-card-color),-15px -15px 30px var(--background);display:inline-block;margin-left:2rem;text-align:center;margin-bottom:2rem}.course-card-container .video-text-content{margin:1rem;display:flex;flex-direction:column;align-items:space-around}.course-card-container video{width:100%;height:50%;border-top-left-radius:30px;border-top-right-radius:30px;display:flex;align-items:top;justify-content:right}.course-card-container h3{font-size:1.2rem;font-weight:500;color:var(--text-color)}.course-card-container p{color:var(--text-color);font-size:.9rem}.course-card-container:hover{box-shadow:0 10px 20px #0000001a}.loader{color:var(--accent-color);font-size:1.2rem;margin-bottom:2rem}@media (max-width: 800px){.loader{padding:1rem}}.project-card-container{width:300px;height:300px;background:var(--navigation-bar);border-radius:30px;box-shadow:15px 15px 30px var(--shadow-card-color),-15px -15px 30px var(--background);display:inline-block;margin-inline:2rem;text-align:center;margin-bottom:2rem}.project-card-container .projects-text-content{margin:1rem;display:flex;flex-direction:column;align-items:space-around}.project-card-container #card-images{width:100%;height:50%;object-fit:cover;border-top-left-radius:30px;border-top-right-radius:30px;display:flex;align-items:top;justify-content:right}.project-card-container h3{font-size:1.1rem;font-weight:500;color:var(--text-color)}.project-card-container p{color:var(--text-color);font-size:1rem;margin:0}.project-card-container a{text-decoration:none;color:var(--text-color)}.project-card-container:hover{box-shadow:0 10px 20px #0000001a}.project-list-container{margin-top:3rem;padding-inline:1.5rem}.projects-intro-text{padding-inline:1rem;color:var(--text-color);font-size:1.3rem}*,*:before,*:after{box-sizing:border-box}html{font-family:Kanit;height:100%}img{max-width:100%}:root{--background: white;--navigation-bar: #FFF5F0;--primary-color: #206A83 ;--accent-color: #AE2E24;--text-color: #121212;--shadow-card-color: #bebebe}[data-theme=dark]{--background: #272727;--navigation-bar: #121212;--text-color: white;--shadow-card-color: rgba(0,0,0,.1) }body{margin:0 auto;transition:all .5s;background-color:var(--background)}