/****************************************/
/*                Fonts                 */
/****************************************/

/* inter-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* inter-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* inter-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
/****************************************/
/*              Variables               */
/****************************************/

:root {
    --content-max-width: 640px;
    --ease-in-out: cubic-bezier(.4,0,.2,1);
    --transition-time: 0.15s;
    --rounded-rect: .375rem;

    /* Default dark mode */
    --primary-color: 240, 237, 204;
    --primary-color-heading: 255, 255, 255;
    --background-color: 2, 52, 63;
    --accent-color: 204, 240, 237;
}

.light-mode {
    --primary-color: 2, 52, 63;
    --primary-color-heading: 0, 0, 0;
    --background-color: 240, 237, 204;
    --accent-color: 63, 2, 52;
}

/****************************************/
/*       General element styling        */
/****************************************/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    line-height: 1.625;
}

body {
    color: rgb(var(--primary-color));
    background-color: rgb(var(--background-color));
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

main {
    padding: 2rem 0;
}

section:first-child {
    margin-top: 0;
}

section, footer {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    margin-top: 6rem;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

section h1 {
    font-weight: 600;
    font-size: 1em;
    color: rgb(var(--primary-color-heading));
    margin-bottom: 2rem;
}

section article p {
    margin: 1.25em auto;
}

/****************************************/
/*              Hover cards             */
/****************************************/

.card-container, .card-container ul {
    list-style: none;
    padding: 0;
}

.card-link h2 svg {
    width: 1em;
    height: 1em;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--transition-time);
    margin-left: 0.25em;
    color: rgba(var(--accent-color), 0.6);
    vertical-align: middle;
}

.card.card-link a:hover h2 svg {
    transform: translate(25%, -25%);
}

.card {
    position: relative;
    display: grid;
    gap: 1rem;
    margin-bottom: 3rem;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--transition-time);
}

.card-bg {
    border-radius: var(--rounded-rect);
    position: absolute;
    top: -1.5rem;
    bottom: -1.5rem;
    left: -1.5rem;
    right: -1.5rem;
    pointer-events: none;
}

.card-link .card-bg {
    pointer-events: auto;
}

.card:hover .card-bg {
    background-color: rgba(var(--primary-color), 0.1);
}

.card h2 {
    font-size: 1em;
    font-weight: 600;
    margin-top: 0;
    color: rgb(var(--primary-color-heading));
    transition-duration: var(--transition-time);
    transition-timing-function: var(--ease-in-out);
}

.card a:hover h2, .card .links li a:hover {
    color: rgb(var(--accent-color));
}

.card p {
    font-size: 0.875em;
    margin-top: 0.5rem;
}

.card .links li {
    margin-right: 1em;
    font-size: .875rem;
    font-weight: 600;
    margin-right: 1em;
    z-index: 1
}

.card .links li a {
    color: rgb(var(--primary-color));
    fill: rgb(var(--primary-color));
    transition-duration: var(--transition-time);
    transition-timing-function: var(--ease-in-out);
}

.card .links svg {
    width: 0.75em;
    height: 0.75em;
}

.card .skills, .card .links {
    display: flex;
    flex-flow: row wrap;
    margin-top: 0.825rem;
    list-style: none;
}

.card .skills li {
    border-radius: 999px;
    background-color: rgba(var(--accent-color), 0.1);
    color: rgb(var(--accent-color));
    margin-right: 0.375rem;
    margin-top: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.card a {
    text-decoration: none;
}

@media (hover: hover) {
    section ol:hover .card {
        opacity: 0.5;
    }

    .card:hover {
        opacity: 1 !important;
    }
}

@media screen and (max-width: 640px) {
    .card-bg {
        display: none;
    }
}

@media screen and (min-width: 640px) {
    .card {
        grid-template-columns: repeat(8, 1fr);
    }

    .card aside {
        grid-column: span 2/span 2;
    }

    .card article {
        grid-column: span 6/span 6;
    }
}


/****************************************/
/*            Navigation                */
/****************************************/
  
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .page-nav {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background-color: transparent !important;
    }
}

.page-nav {
    position: sticky;
    position: -webkit-sticky; /* Safari */
    top: 0;
    z-index: 4;
    background-image: linear-gradient(to bottom,
        rgba(var(--background-color)),
        rgba(var(--background-color), 0.35),
        rgba(var(--background-color), 0.05)
    );

    /* Fallback if backdrop-filter isn't available */
    background-color: rgba(var(--background-color), 0.9); 

    transition-duration: var(--transition-time);
    transition-timing-function: var(--ease-in-out);
}

.page-nav nav {
    margin: 0 auto;
    max-width: var(--content-max-width);
}

.page-nav nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.page-nav ul {
    list-style: none;
    text-align: center;
    overflow: hidden;
}

.page-nav li {
    display: inline-block;
}

.page-nav a, .page-nav input {
    display: block;
    padding: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--rounded-rect);
    transition-duration: var(--transition-time);
    transition-timing-function: var(--ease-in-out);
    color: rgb(var(--primary-color));
    text-transform: lowercase;
}

.page-nav a:hover, .page-nav input:hover {
    background-color: rgba(var(--primary-color), 0.15) !important;
}

.logo {
    margin-right: auto;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--transition-time);
}

.logo svg {
    fill: rgb(var(--primary-color));
}

.theme-button {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-content: center;
}

.theme-button svg {
    fill: rgb(var(--primary-color));
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 75%;
    opacity: 0;
}

#svg-sun {
    transform: translate(-50%, 75%);
}
#svg-moon {
    transform: translate(-50%, -125%);
}

.theme-button input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: transparent;
    /* Not removed via appearance */
    margin: 0;
    
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Dark mode */
.theme-button input[type="checkbox"]:not(:checked) ~ #svg-moon {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: 0.25s;
    transition-timing-function: var(--ease-in-out);
}

/* Light mode */
.theme-button input[type="checkbox"]:checked ~ #svg-sun {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-duration: 0.25s;
    transition-timing-function: var(--ease-in-out);
}


/****************************************/
/*             Header                   */
/****************************************/

.header {
    width: 100%;
    padding: 40px 0 0;
    display: initial;
    background-color: rgb(var(--primary-color));
}

#name {
    margin-top: 40px;
    text-align: center;
    width: 100%;
}


/****************************************/
/*              Work section            */
/****************************************/

.work-years {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75em;
    color: rgba(var(--primary-color), 0.8);
}


/****************************************/
/*          Projects section            */
/****************************************/
.project-image {
    padding-top: 0.25rem;
}

.project-image img {
    border: 2px solid rgba(var(--primary-color), 0.3);
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

/****************************************/
/*            Socials Section           */
/****************************************/

.socials {
    display: flex;
    align-items: center;
    fill: rgb(var(--primary-color));
    list-style: none;
    padding: 0;
}

.socials a {
    color: rgb(var(--primary-color));
}

.socials li {
    margin-right: 1.25rem;
    opacity: 0.7;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--transition-time);
}

.socials li:hover {
    opacity: 1;
}

.socials svg {
    width: 1.5rem;
    height: 1.5rem;
}


/****************************************/
/*            Accessibility             */
/****************************************/


/* Smaller text for smaller screens */
/************************************/

@media screen and (max-width: 640px) {
    
}

@media screen and (max-width: 530px) {
    
}

@media screen and (max-width: 430px) {
    

}