:root {
    height: 100%;

    --bg: #1a1a2e;
    --text: #111;
    --accent: white;

    scroll-behavior: smooth;
}

@font-face {
    font-family: jetbrains;
    src: url(JetBrainsMono-Regular.woff2);
}

* {
    margin: 0;
    padding: 0.5%;
    box-sizing: border-box;

    font-family: jetbrains;

    transition: all 0.5s ease-in;
}

body {
    padding: 20px;
    height: 100%;

    background-color: #1a1a2e;

    font-family: Arial, sans-serif;
}

section {
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 1%;

    border-radius: 8px;
    min-height: 25em;

    background-color: white;
}

p {
    padding: 1%;
    padding: 0;
    font-size: 1.5em;
}

a {
    padding: 0;

    color: #111;

    font-size: 1.5em;
}

h2 {
    margin-bottom: 10px;
    padding: 0.2em;

    color: #1a1a2e;
    
    font-size: 2em;
}

button {
    padding: 10px 20px;

    background-color: #c94f45;
    color: white;

    border: none;
    border-radius: 6px;

    cursor: pointer;
}

hr {
    padding:0;

    border:0.2em solid black;
}

#content {
    position: relative;
    width: 70%;
    left: 5%;
}

#bar {
    margin:0;
    position: fixed;
    height: 100%;
    width: 20%;
    top: 0;
    right: 0;

    text-align: center;
}

#interests {
    display: flex;
    gap: 2em;

    flex-wrap: wrap;
}

.hobbies{
    flex-grow: 1;
    flex-shrink: 0;

    min-width: 15em;
    width: 10%;
}

#footer {
    background-color: white;
    text-align: center;
    min-height: auto;
    width: 80%;
}

#pfp {
    max-width: 80%;
    border-radius: 8px;
}

#easteregg {
    opacity: 0;
    position:fixed;
    bottom: 20px;
    right: 0;
    transition-duration: 3s;
}

#factButton{
    font-size: 2em;
}

#factText{
    font-size: 4em;
    opacity: 0;
}

#factText.reveal{
    font-size: 4em;
    opacity: 100;
}

#secrets {
    color:white;
    background-color: white;
}

body.dark #secrets {
    color: #16213e;
}

button:hover {
    background-color: #ff6f00;
}

body.dark {
    background-color: #11111e;
    color:#fff;
}

body.dark section {
    background-color: #16213e;
}

#easteregg.shown {
    opacity: 0.66;
    transition-duration: 3s;
}

body.dark h2 {
    color: #fff;
}

body.dark .hobbies{
    border-color: #fff;
}

body.dark #footer {
    background-color: #16213e;
}

body.dark a {
    color: #fff
}

body.dark hr {
    border-color: #fff
}