/* debug */
/* *{border: solid red calc(var(--number) * 1px)} */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

:root {
    --primary: #2684ba;
    --secondary: #f9bd24;
    --black: #151418;
    --dark-græy: #4f4d50;
    --græy: #898688;
    --light-græy: #c3c0c1;
    --white: #fcf7f8;

    /* random variables; defaults set here */
    /* script.js sets these all to Math.random() * unit */
    --random-time: 0.4s;
    --random-rotation: 0.87deg;
    --random-length: 0.3em;
    --random-number: 0.5;

    /* --header-height: 30vh; */
    /* css does not like this being used as a constant, not sure why */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

body {
    color: var(--black);
    background-color: var(--white);
    margin: 0;
    font-family:
        Inter Tight,
        sans-serif;
}

* {
    transition: 0.2s;
}

main p {
    margin: 0.0625in 0;
}

main a {
    color: var(--primary);
}

header {
    background-color: var(--primary);
    width: 100%;
    height: calc(100vh / 3);
}

main {
    /* font-size: 10/13pt; */
    font-size: 10pt;
    line-height: 13pt;
    margin: 0 0.15in;
}

footer {
    display: flex;
    margin: 0 0.15in;
    height: 80vh;
    align-items: center;
    justify-content: space-evenly;
    .notice {
        color: var(--light-græy);
    }
}

.header-flex-container {
    height: calc(100vh / 3);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

@media screen and (max-width: 500px) {
    .header-flex-container {
        flex-direction: column;
        align-items: center;
        /* justify-content: flex-start !important; */
        height: 100vh;
    }

    header {
        height: 100vh;
    }

    .header-flex-container > hr {
        display: block !important;
        color: var(--white) !important;
        width: 80vw;
        margin-top: 1em !important;
        margin-bottom: 1em !important;
    }

    div.vr {
        display: none;
    }

    div.contact {
        margin-left: auto !important;
    }

    div.mode-container {
        margin-right: auto !important;
    }

    div.scroll-down {
        display: flex !important;
    }
}

div.me-container {
    margin: calc(100vw / 18);
}

div.me-img-container {
    height: calc((2 / 3) * (100vh / 3));
    width: calc((2 / 3) * (100vh / 3));
    margin: auto;
    border-radius: 100%;
    border: 3pt solid var(--black);
}

div.me-img-container > img {
    height: calc((2 / 3) * (100vh / 3)) !important;
    width: calc((2 / 3) * (100vh / 3)) !important;
    /* float: center; */
    /* height: inherit; */
    border-radius: inherit;
}

div.me-container > .name-container {
    transform: translate(0, -1.5em);

    /* height: calc((100vh/3)/9); */
    font-size: calc((100vh / 3) / 18);

    border-radius: 27pt;
    background-color: var(--secondary);
    border: 3pt solid var(--black);
    text-align: center;
}

div.name-container > h1 {
    margin: 3pt 10pt;
}

.header-flex-container > hr {
    margin: 0;
    display: none;
}

div.vr {
    height: calc((2 / 3) * (100vh / 3));
    width: 0;
    border: 2px solid var(--white);
}

div.contact {
    margin: auto;
    margin-left: 0;
    padding-left: calc(100vw / 36);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.contact > div {
    display: flex;
    align-items: center;
    margin: calc((1 / 36) * (100vh / 3)) 0;
    div.phone-icons,
    img {
        /* border: 1px solid red; */
        width: calc((100vh / 3) / 9);
        height: calc((100vh / 3) / 9);
    }
}

div.dr {
    position: relative;
    height: calc((100vh / 3) / 9);
    /* width: 0; */
    border: 0.5pt solid var(--white);
    transform: rotate(45deg);
}

.phone-icons {
    display: flex;
}

.phone-icons > img {
    height: calc((100vh / 3) / 18) !important;
}

.phone-icons > img[alt="sms icon"] {
    align-self: flex-start;
    /* transform: translate(0, 0.5pt); */
}

.phone-icons > img[alt="call icon"] {
    align-self: flex-end;
    /* transform: translate(0, -0.5pt); */
}

.contact a {
    font-size: calc(2 * ((100vh / 3) / 9) / 3);
    color: var(--white);
    text-decoration: none;
    margin-left: calc(2 * (1 / 36) * (100vh / 3));
}

/* toggle switch thingies */
div.mode-container {
    display: flex;
    flex-direction: column;

    margin: auto;
    margin-right: 1em;

    font-size: calc(2 * ((100vh / 3) / 9) / 3);
    color: var(--white);
}

div.mode {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

div.mode p {
    margin: 1ex;
    text-align: right;
}

div.switch {
    height: calc((100vh / 3) / 9);
    width: calc(2 * (100vh / 3) / 9);

    display: flex;
    align-items: center;

    /* this works perfectly and I don't care about changing it lol */
    border-radius: 1em;

    border: 2pt solid var(--dark-græy);
}

div.switch.off {
    background-color: var(--light-græy);
    justify-content: flex-start;
    transition: 0s;
}

div.switch.on {
    background-color: var(--secondary);
    justify-content: flex-end;
    transition: 0s;
}

div.head {
    height: inherit;
    width: calc((100vh / 3) / 9);

    background-color: var(--white);
    /* border: 3pt solid var(--light-græy); */
    border-radius: 100%;
}

/* scroll to content */
div.scroll-down {
    display: none;
    background-color: var(--primary);
    border-radius: 100%;
    box-shadow: 0 4px 10px var(--dark-græy);

    margin-bottom: 1ex;

    width: 15vw;
    height: 15vw;
    justify-content: center;
    align-items: center;

    img {
        margin: 1ex;
    }

    button {
        background-color: var(--primary);
        border: none;
        border-radius: 100%;
    }
}

/* fun animations */

body.fun .contact > div,
body.fun .contact a,
body.fun div.name-container > h1 {
    transition: calc(0.5 * var(--random-time) + 0.5s);
}

body.fun div.name-container > h1:hover {
    letter-spacing: 2.5pt;
    font-weight: 100;
}

body.fun .contact > div:hover:nth-child(even) {
    transform: rotate(calc(var(--static-random-number) * 100deg - 50deg));

    a {
        transform: scale(calc(var(--static-random-number) * 0.5 + 1.3), 1);
    }
    img {
        transform: scale(1, calc(var(--static-random-number) * 1 + 1.3));
    }
}

body.fun .contact > div:hover:nth-child(odd) {
    transform: rotate(calc(var(--static-random-number) * 90deg - 45deg));

    a {
        transform: scale(1, calc(var(--static-random-number) + 1.3));
    }
    img {
        transform: scale(calc(var(--static-random-number) * 1 + 1.3), 1);
    }
}

body.fun .me-img-container > img:hover {
    /* animation: rotate calc(1s) linear infinite; */
    rotate: calc(360deg * 420);
    transition: calc(1s * 69);
}

body.fun .me-img-container > img:not(:hover) {
    transition: 0s;
    /* nothing happened hehe */
}

body.fun .vr:hover {
    width: calc((2 / 3) * (100vh / 3));
    transition: calc(var(--random-time) + 1s);
}

.vr > img {
    height: calc((2 / 3) * (100vh / 3));
    width: inherit;
    transition: 0s;
}

/* --- */

body.nerd {
    font-family: "Roboto Mono", cursive;
    header {
        height: auto;
    }
    .header-flex-container {
        height: auto;
    }
}