/* Licensed under the MIT/X11 License (http://opensource.org/licenses/MIT) */

/*Variables*/

:root {

    /*Layout*/
    --history-section-border: #efefef;
    --header-border: #efefef;
    --container-width: 70%;
    --container-width-mobile: 90%;

    /*Type colors*/
    --type-new-background: #4fc3f7;
    --type-update-background: #303030;
    --type-bug-background: #66bb6a;

    --type-new-text: #ffffff;
    --type-update-text: #ffffff;
    --type-bug-text: #ffffff;

    /*Typography*/
    --font-stack: Geneva, Arial, Tahoma, sans-serif;
    --font-size: 1em;
    --type-font-size: 0.68em;

}

/*Reset*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

html:focus-within, html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    min-height: 100vh;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

img,
picture {
    max-width: 100%;
    display: block;
}

input,
button,
textarea,
select {
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*Layout*/

header {
    margin-bottom: 50px;
    padding: 20px 0 20px;
    border-bottom: 1px solid var(--header-border);
    box-shadow: 0px 0px 30px -15px rgba(48,48,48,0.65);
}

.container {
    width: var(--container-width);
    overflow: hidden;
    margin: 0 auto;
}

.history-section {
    width: 100%;
    float: left;
    clear: both;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--history-section-border);
    margin-bottom: 50px;
}

.history-section__version-date {
    width: 100%;
    float: left;
    clear: both;
    font-weight: 600;
    margin-bottom: 10px;
}

.history-section__type-description-wrapper {
    width: 100%;
    float: left;
    clear: both;
    margin-bottom: 10px;
}

.history-section__type {
    float: left;
    width: 15%;
    text-transform: uppercase;
}

.history-section__description {
    float: left;
    width: 85%;
}

/*Version Types*/

.type-style {
    display: block;
    font-size: var(--type-font-size);
    padding: 4px 8px;
    border-radius: 4px;
    float: left;
}

.type-new {
    background-color: var(--type-new-background);
    color: var(--type-new-text);
}

.type-update {
    background-color: var(--type-update-background);
    color: var(--type-update-text);
}

.type-bug {
    background-color: var(--type-bug-background);
    color: var(--type-bug-text);
}

/*Typography*/

body {
    font-family: var(--font-stack);
    font-size: var(--font-size);
}

@media (max-width: 45em) {
    .container {
        width: var(--container-width-mobile);
    }

    .history-section__type {
        width: 100%;
        margin-bottom: 10px;
    }

    .history-section__description {
        width: 100%;
    }

    h1 {
        font-size: calc(var(--font-size) * 1.5);
    }

}

/*To top button*/

.to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: #ffffff;
    text-decoration: none;
    width: 40px;
    height: 40px;
    background-color: #303030;
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
}

.to-top div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-40%);
}