@import url('https://rsms.me/inter/inter.css');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a,
a:active,
a:focus{
    outline: none;
    text-decoration: none;
    color: var(--text-primary);
}

::selection {
    background-color: #B554E3;
    color: whitesmoke;
}

:root{
    --dark-bg: #171722;
    --dark-text: #c5c5c5;
    --dark-text-primary: white;
    --dark-card-bg: #0F0E17;
    --dark-card-head: white;
    --dark-card-text: #d8d8d8;
    --dark-logo-top: white;
    --dark-logo-bottom: #eeeeee;
    --dark-pre-bg: #0000003d;
    --dark-pre-border-color: #ffffff1c;

    --light-bg: #f3f3f3;
    --light-text: #666666;
    --light-text-primary: black;
    --light-card-bg: white;
    --light-card-head: #333333;
    --light-card-text: #292929;
    --light-logo-top: #1a1a1a;
    --light-logo-bottom: #4d4d4d;
    --light-pre-bg: #0000003d;
    --light-pre-border-color: #ffffff1c;
}

body.theme-light, body.theme-auto{
    --bg: var(--light-bg);
    --text: var(--light-text);
    --text-primary: var(--light-text-primary);
    --text-secondary: #4e4e4e;
    --quote-bar: #00000030;
    --card-bg: var(--light-card-bg);
    --card-head: var(--light-card-head);
    --card-text: var(--light-card-text);
    --logo-top: var(--light-logo-top);
    --logo-bottom: var(--light-logo-bottom);
    --pre-bg: #0000000f;
    --pre-border-color: var(--light-pre-border);
}

@media (prefers-color-scheme: dark) {
    body.theme-auto{
        --bg: var(--dark-bg);
        --text: var(--dark-text);
        --text-secondary: var(--dark-text);
        --text-primary: #ffffffcc;
        --quote-bar: #ffffff61;
        --card-bg: var(--dark-card-bg);
        --card-head: var(--dark-card-head);
        --card-text: var(--dark-card-text);
        --logo-top: var(--dark-logo-top);
        --logo-bottom: var(--dark-logo-bottom);
        --pre-bg: var(--dark-pre-bg);
        --pre-border-color: var(--dark-pre-border);
        --scrollbar: #ffffff11;
    }
}

body.theme-dark{
    --bg: var(--dark-bg);
    --text: var(--dark-text);
    --text-secondary: var(--dark-text);
    --text-primary: #ffffffcc;
    --quote-bar: #ffffff61;
    --card-bg: var(--dark-card-bg);
    --card-head: var(--dark-card-head);
    --card-text: var(--dark-card-text);
    --logo-top: var(--dark-logo-top);
    --logo-bottom: var(--dark-logo-bottom);
    --pre-bg: var(--dark-pre-bg);
    --pre-border-color: var(--dark-pre-border);
    --scrollbar: #ffffff11;
}


html{
    font-family: "Roboto Mono", "Lucida Console", Monaco, monospace;
}

body{
    background-color: var(--bg);
}

nav {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav > *:first-child{
    margin-left: 10%;
}

nav > *:last-child{
    margin-right: 10%;
}

.nav-group {
    display: flex;
    align-items: center;
}

.nav-group > *:not(:first-child) {
    margin-left: 4rem;
}

nav select {
    align-self: flex-end;
    text-decoration: none;
    text-transform: uppercase;
    background: none;
    color: var(--text-primary);
    font-family: "Roboto Mono";
    font-size: inherit;
    font-weight: 700;
    border: none;
}

nav select:active,
nav select:focus {
    outline: none;
}

nav option {
    color: var(--text-primary);
    background: var(--bg);
    outline: none;
}

nav option:active,
nav option:focus {
    outline: none;
    border: none;
}


#pg {
    height: 30px ;
    margin-bottom: -6px;
}

#pg #top{
    fill: var(--logo-top);
}

#pg #bottom{
    fill: var(--logo-bottom);
}

#pg:hover path {
    fill: #B554E3;
}

nav a{
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-primary);
}

footer {
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer p{
    font-family: Inter;
    font-size: 14px;
    color: var(--text);
}

footer svg{
    width:18px;
    transform:translateY(4px);
    margin-right:4px;
    fill: var(--text);
}

footer p a{
    color: inherit;
}

@media only screen and (max-width: 767px){
    nav {
        justify-content: center;
    }

    nav > *:first-child {
        margin-left: 0;
        width: 80%;
    }

    /* just keep one nav child for smaller screens */
    nav > *:not(:first-child) {
        display: none;
    }

    .nav-group {
        justify-content: space-between;
    }

    .nav-group > *:not(:first-child) {
        margin-left: 0;
    }
}

#intro{
    margin-top: 4rem;
}

#intro a{
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
}

.container{
    width: 65%;
    margin: 0 auto;
    position: relative;
    max-width: 664px;
}

.shadow-box{
    background-color: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 10px 30px 3px rgba(0,0,0,0.15);
    margin: 0 auto;
    position: relative;
    max-width: 640px
}

#sec-404 {
    margin-top: 5rem;
    margin-bottom: 0rem;
    min-height: calc(100vh - 10rem - 7rem);
}

#sec-404 h2{
    padding: 6rem;
    text-align: center;
    color: rgba(0,0,0,0.4);
    font-size: 6rem;
}


#sec-404 h1{
    top: -2rem;
    left: -4rem;
    font-size: 3rem;
}

@media only screen and (max-width: 768px){
    #sec-404 h1 {
        display: none;
    }
}


#intro h1 {
    position: absolute;
    top: -40px;
    right: -130px;
    color: var(--card-head);
    line-height: 1;
    font-size: 4rem;
    font-weight: 700;
    text-shadow: 0 4px 7px rgba(0,0,0,0.2);
}

#intro-text{
    color: var(--card-text);
    padding: 6rem;
    font-weight: 300;
    font-size: 1.1rem;
    text-align: justify;
}

#profile-pic {
    width: 190px;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: -130px;
    box-shadow: 0 7px 10px rgba(0,0,0,0.25);
}

#triangle {
    fill: #B554E3;
    width: 128px;
    position: absolute;
    right: -80px;
    bottom: 200px;
    filter: drop-shadow(0px 7px 7px rgba(0,0,0,0.15));
}

#circle {
    fill:#8BEF89;
    width: 74px;
    position: absolute;
    left: 100px;
    bottom: -40px;
    filter: drop-shadow(0px -7px 7px rgba(0,0,0,0.15));
}

#stripes-green{
    width: 190px;
    position: absolute;
    top: -3.4rem;
    right: -6.2rem;
    z-index: -1;
}

#stripes-purp{
    width: 160px;
    position: absolute;
    bottom: -5rem;
    left: -4.5rem;
    z-index: -1;
}


#socials{
    display: flex;
    align-items: center;
    position: absolute;
    right: -100px;
    bottom: 30px;
}

#socials a{
    margin-left: 10px
}

#socials-2{
    display: none;
    justify-content: space-between;
    width: 80%;
    max-width: 380px;
    margin-top: 6rem;
}

.sb{
    padding: 15px;
    display: flex;
    transition: all 150ms ease;
    box-shadow: 0px 7px 10px rgba(0,0,0,0.20);
    border-radius: 6px;
}

.sb img{
    width: 30px;
    height: 30px;
}

.mail{
    background: #4ED44C ;
}

.github{
    background: #333
}

.sb:hover{
  color: #7795f8;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(50, 50, 93, 0.3), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.sb:active{
  transform: translateY(1px);
  box-shadow: 0 4px 7px rgba(50, 50, 93, 0.2), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.dribbble{
    background: #ea4c89 
}

.twitter{
    background: #1da1f2 
}

.joke {
    font-size: 10px;
    color: rgba(0,0,0,0.2);
    text-shadow: none;
}

.page-section{
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    margin-bottom: 10rem;
}

.page-section h1 {
    position: absolute;
    color: var(--card-head);
    font-size: 2.4rem;
    text-shadow: 0 4px 7px rgba(0,0,0,0.2);
    z-index: 1;
}

#projects h1 {
    top: -1.8rem;
    left: -5rem;
}

#writeups h1 {
    top: -1.8rem;
    right: -7rem;
}

.section-text{
    padding: 0rem 2rem;
    padding-top: 3.5rem;
    padding-bottom: 5rem;
}

.page-section h2 {
    font-family: Inter;
    font-size: 1.4rem;
}

#projects h2 {
    color: #B554E3;
}

#writeups h2 {
    color: #4ED44C;
}

.page-section .section-sub-text{
    margin-left: 0.6rem;
    margin-top: 0.3rem;
    margin-bottom: 1rem;
    color: var(--card-text);
}

.section-item {
    border-radius: 0.4rem;
    padding: 0.2rem 0.8rem;
}

.section-item a:hover {
    text-decoration: underline;
}

.section-item a {
    color: inherit;
}


.btn {
    margin: none;
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 6px;
    box-shadow: 0px 7px 7px rgba(0,0,0,0.15);
    transition: all 150ms ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 7px 7px rgba(0,0,0,0.15);
    box-shadow: 0 10px 18px rgba(50, 50, 93, 0.25), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.btn:active{
    transform: translateY(1px);
    box-shadow: 0 4px 7px rgba(50, 50, 93, 0.2), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.btn:focus{
    outline: none;
}

#project-cta{
    position: absolute;
    bottom: 2rem;
    right: -2rem;
    background: #B554E3;
    color: white;
}

#writeup-cta{
    position: absolute;
    bottom: 2rem;
    right: -2rem;
    background: #4ED44C;
    color: white;
}

@media only screen and (max-width: 767px){
    #intro{
        margin-top: 5rem;
        display: flex;
        flex-flow: column;
        align-items: center ;
    }

    #intro h1 {
        display: none;
    }
    
    .container{
        width: 90%;
    }

    #socials{
        display: none;
    }

    #socials-2{
        display: flex;
    }

    #profile-pic {
        width: 120px;
        border-radius: 50%;
        position: absolute;
        top: -60px;
        left: calc(50% - 60px);
        box-shadow: 0 7px 10px rgba(0,0,0,0.25);
    }

    #intro-text{
        padding: 0 3rem;
        padding-top: 5rem;
        padding-bottom: 4rem;
        font-weight: 300;
        font-size: 1.1rem;
        text-align: justify;
    }

    #triangle{
        display: none;
        width: 80px;
        right: -50px;
    }

    #circle {
        width: 50px;
        bottom: -25px;
    }

    #stripes-green {
        width: 150px;
        position: absolute;
        top: -4rem;
        right: -4%;
    }

    #stripes-purp {
        width: 140px;
        position: absolute;
        bottom: -4rem;
        left: -7%;
    }

    #projects h2 {
        font-size: 1.4rem;
        color: #B554E3;
    }
    
    .page-section{
        margin-bottom: 5rem;
    }

    #projects {
        margin-bottom: 8rem;
    }

    .section-text{
        padding-bottom: 0rem;
    }

    #projects h1 {
        position: static;
        font-size: 2rem;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 0.4rem;
        width: 85%;
    }

    #writeups h1 {
        position: static;
        font-size: 2rem;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 0.4rem;
        width: 85%;
    }

    #project-cta{
        position: relative;
        left: calc(70% - 70px);
        top: 1.5rem;
    }

    #writeup-cta{
        position: relative;
        left: calc(70% - 70px);
        top: 1.5rem;
    }

}