@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
    font-family: "Roboto", sans-serif;
}
body {
    display: flex;
    justify-content: center;
    /* min-height: 2000px; - Just for testing purposes */
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0;
}
header {
    padding: 5px 50px;
    background: linear-gradient(#c4c3ff 0%, #167bff 50%, #086cee 50%, #43e9ff 100%);
    color: white;
    margin-top: 50px;
    text-align: center;
    border-radius: 10px;
    position: sticky;
    top: 20px;
    box-shadow: 0px 0px 10px #000;
    border: 1px solid #167bff;
}
#header-shortTop {
    top: 60px !important;
}
.section-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 100px;
    flex-basis: 100%;
    flex-wrap: wrap;
}
.section {
    background: #cfcfcf;
    box-shadow: inset 0px 0px 20px #000;
    border: 3px solid #909090;
    border-radius: 8px;
    padding: 30px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    text-align: center;
}
.section h1 {
    font-size: 30px;
}
.section p {
    font-size: 20px;
}
.section img {
    width: 150px;
    height: auto;
}
.button {
    text-decoration: none;
    color: white;
    background: 
        radial-gradient(ellipse at center 80%,
            #43e9ff 0%, #43e9ffa4 20%,
            rgba(141, 223, 255, 0.5) 35%,
            rgba(141, 223, 255, 0) 70%) bottom center/100% 60%,
        linear-gradient(#c4c3ff 0%, #167bff 50%, #086cee 50%, #086cee 100%);
        background-repeat: no-repeat;
    padding: 15px 25px;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid #086cee;
    transition: 0.2s;
}
.button:hover {
    background: 
        radial-gradient(ellipse at center 80%,
            #1af0ff 0%,
            rgba(26, 240, 255, 0.5) 30%,
            transparent 70%) bottom center/100% 50%,
        linear-gradient(#bde5ff 0%, #0099ff 50%, #0099e0 50%, #00a2e2 100%);
    background-repeat: no-repeat;
    border: 1px solid #00aeff;
    text-shadow: 0px 0px 5px white, 0px 0px 10px white, 0px 0px 15px white, 0px 0px 20px white;
    transition: 0.2s;
}
.banner {
    background: linear-gradient(#ff9d9d 0%, #ff3a3a 50%, #e90000 50%, #ff7a28 100%);
    color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    margin-top: 0 !important;
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    position: sticky;
    top: 0px;
    box-shadow: 0px 0px 10px #000;
    border-bottom: red solid 1px;
}
.banner h1, .banner p {
    font-size: 20px;
    margin: 0;
}
.article-image-row {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.article-image {
    max-width: 300px;
    height: auto;
}
.article-content {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 15px;
}
.article-content p {
    font-size: 20px;
}
.article-content.section {
    max-width: 800px;
}
.button-disabled {
    text-decoration: none;
    color: white;
    background: linear-gradient(#dedede 0%, gray 50%, #676767 50%, #b8b8b8 100%);
    padding: 15px 25px;
    font-size: 18px;
    border-radius: 5px;
    cursor: not-allowed;
    border: 1px solid #474747;
}
#border {
    border: 3px solid #000000;
    border-radius: 8px;
}