/* Base Styles */
:root {
    --text-color: rgba(6, 15, 0, 0.95);
    --link-color: #2a436f;
    --link-underline: #00b8ff;
}

/* Reset */
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

/* Body Styles */
body {
    min-height: 100vh;
    font-family: Lora, serif;
    font-size: 1em;
    line-height: 1.5;
    color: var(--text-color);
    background-image: 
        linear-gradient(122deg, rgba(228, 226, 205, 0.28), rgba(211, 208, 243, 0.09) 66%), 
        linear-gradient(295deg, rgba(15, 170, 236, 0.21), rgba(217, 191, 205, 0.1) 75%), 
        linear-gradient(25deg, rgba(198, 191, 217, 0.8), rgba(198, 191, 217, 0.1) 75%);
}

/* Layout */
main {
    width: calc(100% - 2em);
    max-width: 40em;
    margin: 0 auto;
    padding-top: 10vw;
}

/* Controls */
.controls {
    margin-bottom: 0.5em;
}

/* Button Styles */
button {
    background: none;
    border: none;
    font-size: 2em;
    padding: 0;
    cursor: pointer;
}

button .hello {
    font-size: .6em;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    margin-bottom: 6px;
    margin-left: .25em;
}

button:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* External Link Styles */
a {
    color: var(--link-color);
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: all 0.125s ease-out;
    margin-left: .25em;
    margin-right: .25em;
    line-height: 2;
}

a::after {
    content: "";
    position: absolute;
    display: block;
    height: 1px;
    bottom: 2px;
    width: 100%;
    left: 0;
    background-color: var(--link-underline);
    transition: all 0.125s ease-out;
}

.links a::after {
    height: 3px;
    bottom: -1px;
}

a:hover {
    transform: none;
}

a:hover::after {
    height: 1.75em;
    bottom: 1px;
    width: calc(100% + .5em);
    transform: translateX(-0.25em);
    opacity: 0.25;
    z-index: -1;
}

.links a:hover::after {
    bottom: 1px;
}

/* Content Styles */
.content {
    margin: 1.5em 0;
}

.links {
    margin-top: 2em;
    font-size: 0.9em;
    margin-left: -0.25em;
}

.links span {
    margin: 0 0.5em;
}

/* Utility Classes */
.hidden {
    display: none;
}