html {
    transition: background-image 5s ease-out;
    background: linear-gradient(0.25turn, #F369E2, #5AA3EA);
    background-image: url('https://adhemara.neocities.org/images/background.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100%;
    color: #ffffffdd;
    font-family: 'Caviar Dreams', sans-serif;
}
html::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #00000020;
}

#main-content {
    padding-top: 2rem;
    margin: 0 auto;
    width: 70rem;
    display: flex;
}

#left-column {
    width: 16rem;
    margin-right: 1rem;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}

#presentation > h1 {
    font-size: 1.5rem; 
    margin-top: 0; 
    margin-bottom: 0;
}

#presentation > hr {
    border-bottom: 1px solid white; 
    margin: 1rem 0 1.4rem 0;
}

img {
    max-width: 100%;
}

h1 {
    font-family: 'Bruno Ace SC', sans-serif;
}

h2, h3, h4, h5 {
    font-family: 'Bruno Ace', sans-serif;
    margin-top: 0;
}

p {
    line-height: 1.6;
    font-size: 1.2rem;
}

p:first-of-type {
    margin-top: 0;
}

p:last-of-type {
    margin-bottom: 0;
}

.card {
    position: relative;
    padding: 1rem 1.3rem 1rem 1.3rem;
    border: 0.15rem solid #0000;
    border-radius: 0px;
    background: 
        linear-gradient(#131219, #131219) padding-box, 
        linear-gradient(var(--angle), #5AA3EA, #F369E2) border-box;
    animation: 12s rotate linear infinite;
    
    box-shadow: 
        inset 0 0px 8px 3px rgba(90, 163, 234, 0.3),
        0 0px 8px 3px rgba(243, 105, 226, 0.3)
    ;
    
    margin-bottom: 1rem;
}

.card:last-of-type {
    margin-bottom: 0;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}