:root {
    --accent-color:                                          #ee5885ff;

    --border-radius-round:                                   9999px;

    --page-minimum-width:                                    360px;
    --page-padding:                                          8rem 0;
    --page-spacing:                                          2rem;
    --page-font-family:                                      'Albert Sans', sans-serif;
    --page-font-size:                                        1rem;
    --page-font-size-tiny:                                   18px;
    --page-font-size-small:                                  20px;
    --page-font-size-medium:                                 22px;
    --page-font-size-large:                                  24px;
    --page-font-size-extra-large:                            26px;
    --page-font-letter-spacing:                              -0.025rem;
    --page-transition:                                       all 0.5s ease-out 0s;

    --header-padding:                                        0;

    --main-padding:                                          0 1.5rem;
    --main-spacing:                                          2rem;
    --main-width:                                            33vw;

    --footer-padding:                                        0 0.5rem;
    --footer-font-weight:                                    400;

    --section-head-font-size:                                1.25rem;
    --section-head-font-weight:                              500;
    --section-head-line-height:                              1;

    --section-head-heading-1-font-size:                      1.5rem;
    --section-head-heading-1-font-weight:                    800;
    --section-head-heading-1-letter-spacing:                 0.0125rem;

    --section-head-heading-2-font-size:                      1.25rem;
    --section-head-heading-2-font-weight:                    600;

    --section-body-font-weight:                              200;

    --section-foot-font-weight:                              200;

    --text-font-size:                                        1rem;
    --text-font-weight:                                      18px;
    --text-line-height:                                      1.5;

    --icon-font-family:                                      'Icons';

    --section-padding:                                       0.5rem;
    --section-spacing:                                       0.5rem;

    --portrait-image-maximum-width:                          14rem;

    --link-padding-x:                                        0.5rem;
    --link-padding-y:                                        0.25rem;
    --link-position-x:                                       -0.125rem;
    --link-position-y:                                       -0.375rem;
    --link-transition:                                       all 0.27s cubic-bezier(0.25, 0.1, 0, 1);
    --link-border-radius:                                    0.25rem;
    --link-decoratior-height:                                2px;

    --i-love-math-text-color:                                var(--accent-color);
    --i-love-math-scaling-factor:                            1.5;
    --i-love-math-transition:                                all 0.25s cubic-bezier(0.5, 0, 0.5, 1);
    --i-love-math-z-index:                                   5000;

    --outline-padding-x:                                     -0.375rem;
    --outline-padding-y:                                     -0.25rem;
    --outline-border:                                        1px solid var(--accent-color);
    --outline-border-radius:                                 0.25rem;

    --theme-mode-toggle-button-spacing:                      2rem;
    --theme-mode-toggle-button-size:                         2.5rem;
    --theme-mode-toggle-button-font-size:                    1.125rem;
    --theme-mode-toggle-button-transition:                   color, background-color 0.25s ease-out 0s;

    --light-theme-page-text-color:                           #121310ff;
    --light-theme-page-background-color:                     #ffffffff;

    --light-theme-link-text-color:                           #121310ff;
    --light-theme-link-background-color:                     #e1e1e1ff;

    --light-theme-mode-toggle-button-text-color:             #aaaaaaff;
    --light-theme-mode-toggle-button-text-color-hover:       #a2a3aaff;
    --light-theme-mode-toggle-button-background-color:       #f3f3f3ff;
    --light-theme-mode-toggle-button-background-color-hover: #121310ff;

    --dark-theme-page-text-color:                            #a2a3aaff;
    --dark-theme-page-background-color:                      #020300ff;

    --dark-theme-link-text-color:                            #b7b7b7ff;
    --dark-theme-link-background-color:                      #5f656b7f;

    --dark-theme-mode-toggle-button-text-color:              #414240ff;
    --dark-theme-mode-toggle-button-text-color-hover:        #a2a3aaff;
    --dark-theme-mode-toggle-button-background-color:        #151613ff;
    --dark-theme-mode-toggle-button-background-color-hover:  #f3f3f3ff;
}


@font-face {
    font-family:   'Albert Sans';
    font-style:    normal;
    font-weight:   100 900;
    font-display:  swap;
    src:           url(../web-fonts/albert-sans/latin-extended.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family:   'Albert Sans';
    font-style:    italic;
    font-weight:   100 900;
    font-display:  swap;
    src:           url(../web-fonts/albert-sans/latin-extended_italic.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family:   'Albert Sans';
    font-style:    normal;
    font-weight:   100 900;
    font-display:  swap;
    src:           url(../web-fonts/albert-sans/latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family:   'Albert Sans';
    font-style:    italic;
    font-weight:   100 900;
    font-display:  swap;
    src:           url(../web-fonts/albert-sans/latin_italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family:  'Icons';
    font-weight:  normal;
    font-style:   normal;
    font-display: swap;
    src:          url('../web-fonts/icons.woff2') format('woff2');
}


* {
    box-sizing: border-box;
}


* {
    outline:        0;
    outline-offset: 0;
}

*:focus {
    position: relative;
}

*:focus::after {
    position:      absolute;
    top:           var(--outline-padding-y);
    bottom:        var(--outline-padding-y);
    left:          var(--outline-padding-x);
    right:         var(--outline-padding-x);
    border:        var(--outline-border);
    border-radius: var(--outline-border-radius);
    content:       '';
}


.html,
.body {
    width:  100%;
    height: 100%;
}

@media screen and (min-width: 480px) {
    .html {
        font-size: var(--page-font-size-tiny);
    }
}

@media screen and (min-width: 640px) {
    .html {
        font-size: var(--page-font-size-small);
    }
}

@media screen and (min-width: 960px) {
    .html {
        font-size: var(--page-font-size-medium);
    }
}

@media screen and (min-width: 1280px) {
    .html {
        font-size: var(--page-font-size-large);
    }
}

@media screen and (min-width: 1600px) {
    .html {
        font-size: var(--page-font-size-extra-large);
    }
}


.body {
    font-family:         var(--page-font-family);
    font-optical-sizing: auto;
    font-weight:         var(--text-font-weight);
    font-style:          normal;
    font-size:           var(--text-font-weight);
    letter-spacing:      var(--page-font-letter-spacing);
    line-height:         var(--text-line-height);
    transition:          var(--page-transition);
}

.body.light-theme {
    color:            var(--light-theme-page-text-color);
    background-color: var(--light-theme-page-background-color);
}

.body.dark-theme {
    color:            var(--dark-theme-page-text-color);
    background-color: var(--dark-theme-page-background-color);
}


.page {
    padding:         var(--page-padding);
    display:         flex;
    flex-direction:  column;
    flex-wrap:       nowrap;
    align-items:     center;
    justify-content: center;
    gap:             var(--page-spacing);
    min-width:       var(--page-minimum-width);
    font-size:       var(--page-font-size);
}


.header {
    padding: var(--header-padding);
    width:   100%;
}


.main {
    padding:         var(--main-padding);
    display:         flex;
    flex-direction:  column;
    gap:             var(--main-spacing);
    align-items:     center;
    justify-content: center;
    width:           100%;
}


@media screen and (min-width: 480px) {
    .main {
        width:     var(--main-width);
        min-width: 480px;
    }
}


.footer {
    padding:     var(--footer-padding);
    width:       100%;
    font-weight: var(--footer-font-weight);
    text-align:  center;
}


.section {
    padding:        var(--section-padding);
    display:        flex;
    flex-direction: column;
    gap:            var(--section-spacing);
    width:          100%;
    text-align:     center;
}

.section-head {
    font-size:   var(--section-head-font-size);
    font-weight: var(--section-head-font-weight);
    line-height: var(--section-head-line-height);
}

.section-head.heading-1 {
    font-size:      var(--section-head-heading-1-font-size);
    font-weight:    var(--section-head-heading-1-font-weight);
    letter-spacing: var(--section-head-heading-1-letter-spacing);
}

.section-head.heading-2 {
    font-weight: var(--section-head-heading-2-font-weight);
}

.section-body {
    font-weight: var(--section-body-font-weight);
}

.section-foot {
    font-weight: var(--section-foot-font-weight);
}


.link {
    display:         inline-block;
    position:        relative;
    z-index:         0;
    text-decoration: none
}

.light-theme .link {
    color: var(--light-theme-link-text-color);
}

.dark-theme .link {
    color: var(--dark-theme-link-text-color);
}

.link::before {
    position:         absolute;
    left:             0;
    bottom:           var(--link-position-y);
    width:            100%;
    height:           var(--link-decoratior-height);
    z-index:          -1;
    transition:       var(--link-transition);
    content:          '';
}

.light-theme .link::before {
    background-color: var(--light-theme-link-background-color);
}

.dark-theme .link::before {
    background-color: var(--dark-theme-link-background-color);
}

.light-theme .link:hover {
    color: var(--light-theme-link-text-color);
}

.dark-theme .link:hover {
    color: var(--dark-theme-link-text-color);
}

.link:hover::before {
    padding:          var(--link-padding-y) var(--link-padding-x);
    left:             calc(-1 * var(--link-padding-x));
    bottom:           var(--link-position-y);
    z-index:          -1;
    width:            100%;
    height:           100%;
    border-radius:    var(--link-border-radius);
}

.light-theme .link:hover::before {
    background-color: var(--light-theme-link-background-color);
}

.dark-theme .link:hover::before {
    background-color: var(--dark-theme-link-background-color);
}

.link:focus::after {
    top:    var(--link-position-x);
    bottom: var(--link-position-y);
    left:   calc(-1 * var(--link-padding-x));
    right:  calc(-1 * var(--link-padding-x));
}


.portrait-image {
    margin:        0 auto;
    display:       block;
    width:         100%;
    max-width:     var(--portrait-image-maximum-width);
    height:        auto;
    aspect-ratio:  1 / 1;
    border-radius: var(--border-radius-round);
}


.theme-mode-floating-toggle-button {
    position:      fixed;
    right:         var(--theme-mode-toggle-button-spacing);
    bottom:        var(--theme-mode-toggle-button-spacing);
    width:         var(--theme-mode-toggle-button-size);
    height:        var(--theme-mode-toggle-button-size);
    aspect-ratio:  1 / 1;
    border:        none;
    border-radius: var(--border-radius-round);
    cursor:        pointer;
    font-size:     var(--theme-mode-toggle-button-font-size);
    transition:    var(--theme-mode-toggle-button-transition);
}

.theme-mode-floating-toggle-button:focus::after {
    border-radius: var(--border-radius-round);
    top:           0;
    bottom:        0;
    left:          0;
    right:         0;
}

.light-theme .theme-mode-floating-toggle-button {
    color:            var(--light-theme-mode-toggle-button-text-color);
    background-color: var(--light-theme-mode-toggle-button-background-color);
}

.light-theme .theme-mode-floating-toggle-button:hover {
    color:            var(--light-theme-mode-toggle-button-text-color-hover);
    background-color: var(--light-theme-mode-toggle-button-background-color-hover);
}

.dark-theme .theme-mode-floating-toggle-button {
    color:            var(--dark-theme-mode-toggle-button-text-color);
    background-color: var(--dark-theme-mode-toggle-button-background-color);
}

.dark-theme .theme-mode-floating-toggle-button:hover {
    color:            var(--dark-theme-mode-toggle-button-text-color-hover);
    background-color: var(--dark-theme-mode-toggle-button-background-color-hover);
}


[class^='icon-']::before,
[class*=' icon-']::before {
  display:                 inline-block;
  font-family:             var(--icon-font-family);
  font-style:              normal;
  font-weight:             normal;
  font-variant:            normal;
  text-decoration:         inherit;
  text-transform:          none;
  speak:                   never;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-heart::before {
    content: '\e800';
}

.icon-theme-mode-light::before {
    content: '\e801';
}

.icon-theme-mode-dark::before {
    content: '\e802';
}


.i-love-math {
    position: relative;
}

.i-love-math::before {
    color:      var(--i-love-math-text-color);
    transition: var(--i-love-math-transition);
}

.i-love-math:hover::before {
    transition:       var(--i-love-math-transition);
    transform-origin: 50% 50%;
    transform:        scale(var(--i-love-math-scaling-factor));
}


.particle {
    position:       absolute;
    left:           0;
    top:            0;
    z-index:        var(--i-love-math-z-index);
    color:          var(--i-love-math-text-color);
    opacity:        0;
    pointer-events: none;
}