@import url("animations.css");
@import url("media.css");

article {
    padding: 3em 2em;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0em;
}

p {
    font-size: 22px;
}

a {
    color: black;
}

.colorBackground {
    position: relative;
}

.colorBackground>* {
    z-index: 1;
}

.colorBackground:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 0;

    background-repeat: no-repeat !important;

    content: "";
}

/* --- a1 --- */

#a1 {
    display: flex;
    align-items: center;
}

#a1::before {
    background: radial-gradient(ellipse at right bottom, #ff6b6b, transparent 80%);

    animation: article1 20s linear infinite;
}

#a1>img {
    width: 10em;
    min-width: 7.5em;
}

/* --- a2 --- */

#a2 {
    padding-top: 0em;
    padding-bottom: 0em;

    display: flex;
    align-items: center;
}

#a2>img {
    margin-top: 3em;

    width: 30em;
    min-width: 12em;
    margin-right: 1em;

    border: solid rgb(177, 177, 177);
    border-width: 1px 1px 0px 1px;
}

#a2::before {
    background: radial-gradient(ellipse at right bottom, #02ff20, transparent 50%);
    background-position: right bottom;

    animation: article2 5s linear infinite;
}

#a2::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: radial-gradient(ellipse at left bottom, #00eeff, transparent 40%);
    z-index: -1;

    content: "";
}

/* --- a3 --- */

#a3 {
    padding-top: 0em;
    padding-bottom: 0em;

    display: flex;
    align-items: center;
}

#a3::before {
    background: radial-gradient(ellipse at bottom center,#ffed89, transparent 80%);
    animation: article3 10s linear infinite;
}

#a3>div {
    margin-right: 1em;
    max-width: 44.5em;
    flex-basis: 60%;
}

#a3>img {
    margin-right: 4em;
    margin-top: 3em;

    width: 30em;
    min-width: 13em;

    border: solid rgb(177, 177, 177);
    border-width: 1px 1px 0px 1px;
}

/* --- a4 --- */

#a4 {
    padding-top: 0em;
    padding-bottom: 0em;

    transition: background-color 1s, color 1s;

    display: flex;
    align-items: center;
}

#a4::before {
    background: radial-gradient(ellipse at top right,#00e1ff, transparent 80%);

    animation: article4 10s linear infinite;
}

#a4>.image {
    position: relative;

    width: 30em;
    min-width: 13em;

    margin-right: 1em;
    margin-top: 3em;

    border: solid rgb(177, 177, 177);
    border-width: 1px 1px 0px 1px;
}

.image>img {
    width: 100%;
    visibility: hidden;
}

#a4>.image>div {
    max-width: 100%;

    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;

    transition: height 5ms;
}

#a4>.image>div>img {
    max-width: 101%;
}

#lightModeImage>img {
    
}

/* --- a5 --- */

#a5 {
    background: radial-gradient(ellipse at bottom left,#7fba00, transparent 50%),
                radial-gradient(ellipse at bottom right,#ffb900, transparent 40%);
}

#a5>div {
    margin-top: 1em;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

#a5>div>a {
    display: inline-block;
}

#a5>div>a:first-child {
    width: 14em;
    margin-right: 1.8em;
}

#a5>div>a:last-child {
    width: 15em;
}

#a5>div>a>img {
    max-width: 100%;
}

/* --- a6 --- */

#a6 {
    background: radial-gradient(ellipse at bottom left,#f25022, transparent 60%);
}