@import url('https://fonts.googleapis.com/css2?family=Delius&family=Delius+Swash+Caps&family=Hachi+Maru+Pop&display=swap');

*{
    margin: 0;
    padding: 0;
    /*This makes sure that margins and padding don't mess up box size.*/
    box-sizing: border-box;
}

:root {
  --primary: oklch(60% 0.18 145);
  --secondary: oklch(55% 0.18 310);
  --bg: oklch(from var(--primary) calc(l + 1) c h);
  --bgbox: oklch(from var(--bg) l calc(c - .075) h);
  --text: oklch(0.12 0.181 145);
  --text-muted: oklch(0.2 0.181 145);
  --box-shadow: oklch(20% 0 0 / 0.2);
}

.darkmode {
  --primary: oklch(30% 0.18 310);
  --secondary: oklch(60% 0.18 145);
  --bg: oklch(from var(--primary) calc(l - 1) c h);
  --bgbox: oklch(from var(--bg) l calc(c + .1) h);
  --text: oklch(95% 0.05 310);
  --text-muted: oklch(80% 0.05 310);
  --box-shadow: oklch(90.06% 0.0001 271.152 / 0.15);

}

html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-muted);
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-muted);
    /*background-image:
    url(/resources/images/background_triangles.svg);*/
    background-size: cover;
    background-repeat: no-repeat;
/*Select right instead of center so I can make custom backgrounds and know what smaller screens will see.*/
    background-position: center;
}

h1 {
    color: var(--text);
    /*clamp(min, preffered, max)*/
    font-size: min(2rem, 10vw + .5rem);
    text-align: center;
    font-family: Hachi Maru Pop;
}
h2 {
    text-align: center;
    margin-bottom: .5em;
    font-size: 1.75rem;
    font-family: Hachi Maru Pop;
}
p {
    font-size: 1.15rem;
}

.footer {
  text-align: center;
  background-color: var(--primary);
  padding: 10px 30px;
}

nav {
    background-color: var(--primary);
    font-family: Hachi Maru Pop;
    box-shadow: 3px 3px 10px 2px var(--box-shadow);
}
/*This changes the menu and close svg icon color.*/
nav svg {
    fill: var(--text-muted);
}
/*ul, unordered list. This affects the content in the navbar.*/
nav ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/*li, list. This gives the ul content a height past their text size.*/
nav li {
    height: 50px;
}
/*a, anchor. This styles the entire clickable area.*/
nav a {
    height: 100%;
    padding: 0 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: var(--text-muted);
}
/* the : adds a pseduo-class. It adds a class when a condition has been met.*/
nav a:hover {
    background-color: oklch(from var(--primary) calc(l - .1) c h);
}
/*the : can also target specific children :nth-child(even)*/
nav li:first-child {
    margin-right: auto;
}

.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 200px;
    z-index: 999;
    background-color: var(--bgbox);
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px var(--box-shadow);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
/*This makes the list content fill the entire width so hover looks better.*/
.sidebar li {
    width: 100%;
}
.sidebar a {
    width: 100;
}

/*Content styleing starts here.*/

/*Had to make this fix-it div to get all my items centered.*/
.fix-it {
    display: grid;
    align-items: center;
    justify-content: center;
}
.flex {
    display: flex;
    gap: 1em;
    margin: 1em;
    padding: 1em;
    flex-wrap: wrap;
    max-width: 1080px;
    min-width: 400px;
    background-color: var(--bgbox);
    box-shadow: 3px 3px 10px 2px var(--box-shadow);
    border-radius: 1em;
}

.flex * {
    flex: 1;
    min-width: 400px;
}

.reverse {
    flex-direction: row-reverse;
}

.picture img{
    border-radius: 1em;
    width: 100%;
    max-width: 1fr;
    height: auto;
}

/*This hides the nav bar links when on smaller screens.*/
@media (max-width:800px) {
    .hideOnMobile{
        display: none;
    }
}

.res-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}

.res-logo img {
    width: min(600px, 90%);
}

/*This is the code for the sun/moon theme switch button*/
#theme-switch {
    height: 50px;
    width: 50px;
    padding: 0px;
    margin: 15px;
    border-radius: 50%;
    background-color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
}
/*this changes the svg icon color*/
#theme-switch svg {
   fill: var(--text);
}
/*The next three lines flip the visable icons when changing color modes*/
#theme-switch svg:last-child {
    display: none;
}
.darkmode #theme-switch svg:first-child {
    display: none;
}
.darkmode #theme-switch svg:last-child {
    display: block;
}