/* reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto;
}

:root {
    --one: #c6ae2e;
    --two: #a57941;
    --three: #834453;
    --dark-text: #47252d;
}

body {
    background-color: var(--three);
    overflow-x: hidden;
}

p {
    margin-bottom: 1%;
}


/* specific fonts */

.intro {
    font-weight: 400;
    color: var(--one);
    font-family: 'Roboto Mono';
    margin: 0;
    font-size: 300%;
}

.big1,
.big2 {
    font-weight: 100;
    font-size: 600%;
}

.big1 {
    color: #fff;
    font-weight: 600;
    margin-bottom: -2%;
    text-shadow: 6px 6px var(--two);
}

.big2 {
    font-weight: 400;
    color: var(--one);
    font-family: 'Roboto Mono';
}

#cursor {
    color: var(--one);
    font-size: 120%;
}


/* nav */

nav {
    display: flex;
    justify-content: space-between;
    margin: 2vh auto 0;
}

.nav-right {
    display: flex;
    justify-content: right;
}

.nav-right a {
    display: block;
    padding: 10%;
    transition: padding 0.2s, color 0.2s;
    font-size: 120%;
    font-family: 'Roboto Mono', monospace;
}

.nav-right a:hover {
    padding-bottom: 12%;
    padding-top: 8%;
    color: #fff;
}

nav a {
    color: var(--one);
    text-decoration: none;
}

.hash {
    color: var(--two);
}

#k {
    font-size: 200%;
    color: var(--two);
    padding: 10%;
    display: block;
    transition: letter-spacing 0.2s, color 0.2s;
    font-family: 'Roboto Mono';
    font-weight: 100;
}

#k:hover {
    letter-spacing: 3px;
    color: #fff;
}

.kc {
    color: var(--one);
    font-weight: 500;
    font-family: 'Roboto Mono', monospace;
}


/* main */

main {
    margin: 20vh auto 10vh;
}

@media only screen and (min-width:802px) {
    main,
    nav {
        width: 75%
    }
    ;
}


/* headings */

h1 {
    font-size: 400%;
    margin-top: 30vh;
    color: var(--one);
    font-family: 'Roboto Mono';
    font-weight: 400;
}

h1 span {
    color: var(--two);
    font-weight: 300;
}


/* box */

.box {
    background-color: var(--two);
    padding: 3%;
    font-size: 120%;
    line-height: 140%;
    color: var(--dark-text);
}


/* project */

.projectContainer {
    display: flex;
    margin: 1rem 0 0;
    align-items: center;
}

.projectBox {
    flex-grow: 1;
    flex-basis: 35%;
    left: -3rem;
    position: relative;
}

.projectTitle {
    font-size: 400%;
    font-family: 'Roboto Mono', monospace;
    line-height: 100%;
    margin-bottom: 1rem;
    text-align: right;
    color: #fff;
    text-shadow: 4px 4px var(--two);
}

.projectDesc {
    background-color: var(--two);
    color: var(--dark-text);
    padding: 3%;
    line-height: 150%;
    box-shadow: 10px 10px var(--one);
}

.projectImg {
    box-shadow: 10px 10px var(--two);
    flex-grow: 2;
    flex-basis: 65%;
    height: 60vh;
}

.img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: sepia(100%);
    transition: filter 0.2s;
}

.img:hover {
    filter: none;
}

.projectIcons {
    margin-top: 1rem;
    display: flex;
    justify-content: right;
    gap: 5px;
}

.iconButton {
    display: flex;
    background-color: var(--one);
    padding: 5px 15px;
    align-items: center;
    color: var(--three);
    text-decoration: none;
    transition: background-color 0.2s;
}

.iconButton:hover {
    background-color: #fff;
}

.iconButton span {
    margin-left: 5px;
    font-family: 'Roboto Mono', monospace;
}

.tag {
    background-color: var(--one);
    color: var(--three);
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    padding: 0 0.2rem;
    margin-right: 0.2rem;
}


/* project reverse */

.projectBox-reverse {
    left: 3rem;
    z-index: 100;
}

.projectTitle-reverse {
    text-align: left;
}

.projectIcons-reverse {
    justify-content: left;
}


/* form */

input,
textarea {
    width: 100%;
    display: block;
    border: 0;
    background-color: var(--two);
    color: var(--dark-text);
    padding: 10px;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    font-size: 150%;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--one);
}

label {
    display: block;
    margin: 1.5rem 0 0.5rem;
    font-size: 200%;
    color: var(--two)
}

button {
    display: block;
    width: 10vw;
    background-color: var(--one);
    border: 0;
    margin: 1rem auto 0;
    padding: 10px;
    font-size: 150%;
    color: var(--dark-text);
    transition: background-color 0.2s;
}

button:hover {
    cursor: pointer;
    background-color: #fff;
}


/* footer */

footer {
    height: 30vh;
}


/* utility */

.mt-3 {
    margin-top: 3rem;
}


/* social */

aside {
    position: fixed;
    left: 2vw;
    bottom: 2vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    align-items: left;
}

a.expand {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 8px;
    transition: 0.2s;
    font-size: 200%;
    color: var(--one);
    text-decoration: none;
    font-family: 'Roboto Mono', monospace;
}

a.expand .label {
    max-width: 0;
    opacity: 0;
    max-height: 1em;
    white-space: nowrap;
    transition: 0.2s;
    font-size: 70%;
    color: #fff;
}

a.expand:hover .label {
    max-width: 200px;
    margin-left: 8px;
    opacity: 1;
}


/* mobile adjustments */

@media only screen and (max-width:800px) {
    aside {
        display: none !important;
        background-color: blue;
    }
    main,
    nav {
        width: 100%
    }
    main {
        padding: 1rem !important
    }
    .projectBox {
        left: 0;
        position: relative;
    }
    .projectContainer {
        margin: 3rem 0 0;
        flex-direction: column;
    }
    .mobile-reverse {
        flex-direction: column-reverse
    }
    .projectTitle {
        font-size: 200%;
        line-height: 100%;
        margin: 2rem 0 0.5rem;
        text-align: left;
    }
    h1 {
        margin-top: 10vh;
    }
    button {
        width: 50%;
    }
    .nav-right a,
    .nav-right a:hover,
    #k {
        padding: 5px;
        font-size: 100%;
    }
    .big1,
    .big2 {
        font-size: 350%;
    }
    .intro {
        font-size: 200%;
    }
    html,
    body {
        overflow-x: hidden;
    }
    body {
        position: relative
    }
}