/* From https://joelgrayson.com/styles/ucjg.v2.css */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

* {
    font-family: Lato, Futura, sans-serif;
}

p {
    line-height: 1.7;
}


code { /* light code like notion */
    font-family: monospace;
    padding: .2ch;
    color: #eb5757;
    background-color: #ededeb;
    border-radius: .2ch;
}
code.dark { /* dark code like sublime */
    background-color: #222;
    color: rgb(255, 77, 77);
}



.container {
    /* 5% Horizontal Margin */
    padding: 0 5%;
}

.gradient-text { /* blue/purple gradient text */
    background: -webkit-linear-gradient(45deg, #D956A7 0%, #565DFA 60.42%, #3983FB 100%);
    -webkit-text-fill-color: transparent;
}

.alert {
    padding: 0.9rem 1.3rem;
    background-color: #cce5ff;
    border-radius: 3px;
    border: 1px solid #82b9f4;
    width: fit-content;
}

/* Button.v2.css */
button {
    border: 1.1px solid #000;
    border-radius: 3px;
    padding: 5px 10px;
    background: #e9e9e9;
    position: relative;
    top: 0;
    user-select: none;

    transition: top;
    transition-duration: .1s;
}
button:hover {
    outline: 2.1px solid #111;
    outline-offset: -2px;
    filter: brightness(0.85) saturate(1.4);
}
button:active {
    border-radius: 2px;
	top: 1.1px;
    filter: brightness(0.8) saturate(1.4);
}
button:disabled {
    outline: none;
}
.btn-red   { background-color: #ff8f8f; }
.btn-yellow{ background-color: #ffd472; }
.btn-green { background-color: #90ee90; }
.btn-blue  { background-color: #aed8fc; }