/*

 welcome.css: first-run page CSS for Epichrome apps

 Copyright (C) 2022 David Marmor.

 https://github.com/dmarmor/epichrome

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.

*/


/* BASIC SETUP */

.hide {
    display: none;
}
span {
    display: inline;
}
div {
    display: flex;
    flex-direction: column;
}
li {
    display: list-item;
}

body {
    font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif;
    padding: 0;
    margin: 0;
    background-color: #d3d3d3;

}

h1 {
    font-size: 125%;
    font-weight: bold;
}
h2 {
    /* color: black; */
    font-size: 110%;
    font-weight: bold;
    text-decoration: underline;
    /* margin-bottom: 0.8em; */
}
h3 {
    font-size: 100%;
    font-weight: bold;
    text-decoration: underline;
}
/* h1, h2, h3 { */
/*     -webkit-user-select: none; */
/*     font-weight: normal; */
/*     line-height: 1; */
/* } */
p {
    margin-top: 0;
    margin-bottom: 1em;
}
a {
    font-weight: bold;
}
a:link {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    color: blue;
}


/* LOOK AT ME DAMMIT */

.bounce_box {
    animation: bounce_box 16s ease-in-out;
    /* -webkit-animation-iteration-count: 1; */
}
@keyframes bounce_box {
    0% {
        background-color: #dfb81c;
    }
    2.5% {
        background-color: #c4a21a;
    }
    7.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    12.5% {
        background-color: #c4a21a;
    }
    17.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    22.5% {
        background-color: #c4a21a;
    }
    27.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    32.5% {
        background-color: #c4a21a;
    }
    37.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    42.5% {
        background-color: #c4a21a;
    }
    47.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    52.5% {
        background-color: #c4a21a;
    }
    57.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    62.5% {
        background-color: #c4a21a;
    }
    67.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    72.5% {
        background-color: #c4a21a;
    }
    77.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    82.5% {
        background-color: #c4a21a;
    }
    87.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    92.5% {
        background-color: #c4a21a;
    }
    97.5% {
        background-color: #f7cc20; /* #ffd321; */
    }
    100% {
        background-color: #dfb81c;
    }
}

.alert {
    width: 25em;
    flex-direction: row;
    align-items: flex-start;
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: 1em;
    margin-left: -12.5em;
    text-align: center;
    background-color: #dfb81c;
    transition-property: all;
    transition-delay: 1s;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    border-radius: .5em;
    /* border-bottom-right-radius: 1em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em; */
    color: white;
    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.2);
    font-size: 130%;
}
.alert.hide {
    display: flex;
    opacity: 0;
    transform: translateY(-100%);
    box-shadow: none;
    margin-top: 0;
}
.alert_message {
    margin: 1em;
    margin-right: 0;
    /* color: inherit; */
}
.alert_message p {
    margin: 0;
}
.alert_message .important {
    font-weight: 500;
    text-decoration: underline;
}
.alert_message .emphasis {
    font-weight: 500;
    font-style: italic;
}
.alert_message .alert_extra {
    margin-top: 1em;
}
.alert_close {
    margin-right: .5em;
    margin-top: .5em;
    margin-left: .75em;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: .3em;
    padding-right: .3em;
    border-radius: 100%;
    color: #dfb81c;
    font-weight: bold;
    font-size: 75%;
    background-color: white;
    cursor: pointer;
    border: 0;
}
.alert_close:hover {
    color: white;
    background: none;
}
.alert_close>span {
    position: relative;
    top: -.1em;
}


.error {
    font-style: italic;
    color: #600000;
}

.titlebar, .titlebar .contents {
    width: 100%;
    background-color: #d3d3d3;
    height: 84px;
}
/* .main_title {
    position: relative;
    z-index: 2;
} */
.main_title .contents {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
}
.main_title_text {
    align-items: center;
}
.main_title img {
    width: 64px;
    height: 64px;
    margin-top: 10px;
    margin-right: 16px;
    margin-bottom: 10px;
    margin-left: 0;
}
.main_title h1 {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: .15em;
    padding-bottom: .15em;
    line-height: .95;
    text-align: center;
}
.main_title .title_info {
    flex-basis: 50%;
    flex-shrink: 1;
}
.main_title .version {
    font-size: 85%;
    margin: 0;
    text-align: center;
    color: #404040;
}
.main_title .version.above {
    margin-top: 0;
    margin-bottom: .5em;
}
.main_title .version.below {
    margin-top: .5em;
    margin-bottom: 0;
}
.container {
    flex-direction: row;
    background-color: #d3d3d3;
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #d3d3d3 800px);
    height: 800px;
    /* background-image: linear-gradient(#ffffff, #d3d3d3); */
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    border: 0;
}

.main_column {
    margin: 0 auto;
    flex-basis: 35em;
    flex-shrink: 0;
    flex-grow: 0;
}
.main_content {
    text-align: left;
    background: none;
    font-size: 100%;
    /* padding-top: 1em; */
}

#farewell {
    padding: 1em;
    padding-bottom: 0;
    margin-top: 1em;
    border: 2px solid #000000;
    background: #ffa0a0;
}
#farewell .important {
    font-weight: bold;
    text-decoration: underline;
}

.footnote {
    text-align: center;
    font-size: 85%;
}

.changes_msg {
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #a0a0a0;
    margin-top: 1em;
    margin-bottom: .5em;
    padding: 1em;
    padding-bottom: 0;
}
.change_list {
    width: 100%;
}
.change_list h3 {
    margin: 0;
    padding: 0;
}
.change_list ul {
    margin: 0;
}
.change_list li {
    margin-top: .5em;
    margin-bottom: 0;
}
.changes_user {
    flex-direction: column;
    margin-bottom: 1em;
    flex-basis: 100%;
    flex-shrink: 0;
}
.change_headline {
    font-weight: bold;
}

h2#major_update_title {
    text-align: center;
    text-decoration: none;
}
.changes_update {
    flex-basis: 100%;
    min-width: 20em;
    justify-content: flex-start;
    margin-bottom: 1em;
}
.changes_update_lists {
    flex-direction: column;
    font-size: 95%;
}
.changes_update_lists .change_list {
    margin-bottom: 1.5em;
}
.changes_changelog {
    margin: 0;
}

#main_margin {
    height: 1em;
}

.actions_header {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

.actions_list {
    margin: 0 auto;
    padding-bottom: .5em;
    width: 85%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.actions_list>.item {
    justify-content: inherit;
    flex-direction: row;
    /* flex-basis: 67%; */
    /* flex-shrink: 1; */
    padding-top: 1em;
    padding-bottom: 0;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-bottom: 1em;
    border: 1px solid #a0a0a0;
    vertical-align: top;
    background: #f0f0f0;
    /* font-size: 85%; */
}

.actions_list>.item.flash {
    animation-name: first_action;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes first_action {
    0% {
        background-color: #b8dfff;
    }
    50% {
        background-color: #dde7f0;
    }
    100% {
        background-color: #b8dfff;
    }
}

.itemnum {
    padding: 0;
    padding-right: .25em;
    position: relative;
    top: -.2em;
    left: -.2em;
    font-size: 200%;
    font-weight: 500;
}
.action_container {
    flex-direction: column;
    flex-basis: 100%;
    justify-content: center;
    /* align-items: center; */
}
.action_container img {
    margin: 0 auto;
    margin-bottom: 8px;
}
.action_container h3 {
    padding: 0;
    margin: 0;
    margin-bottom: 1em;
}

.loginscan_text {
    flex-direction: row;
    align-items: center;
}
img.loginscan_icon {
    width: 56px;
    height: 56px;
    margin-right: 1em;
}

.epichromeruntimestatus.runtime_status_off {
    background: #ffe0e0;
}
.epichromeruntimestatus.runtime_status_nonmh {
    background: #ffffc0;
}
.epichromeruntimestatus.runtime_status_ok {
    background: #e0ffe0;
}
.runtime_button_message {
    flex-direction: row;
    align-items: center;
}
.runtime_button {
    margin-left: 1em;
}

/* .epichromeruntimestatus .action_container p {
    display: flex;
    margin-bottom: 1em;
} */
/* .epichromeruntimestatus .action_container p.hide {
    display: none;
} */

.runtime_button {
    flex-direction: column;
    margin-bottom: 1em;
}

.cmd_shortcut {
    font-weight: bold;
}
.cmd_header {
    font-weight: 500;
}
.cmd_name, .folder_name {
    font-style: italic;
    font-weight: 500;
}
.password_instructions {
    line-height: 1.5em;
}
img.passwords_button {
    display: inline-block;
    padding: 0;
    padding-left: .25em;
    padding-right: .25em;
    margin: 0;
    height: 1.1em;
    position: relative;
    top: .12em;
}
.bookmark_img {
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
}
.bookmark_img img {
    width: 100%;
}

div.extlist {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-basis: 0;
    flex-grow: 1;
    width: 100%;
}
div.extlist h3 {
    margin-top: 1em;
    width: 85%;
}

div.extension {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 1em;
    width: 85%;
}
div.extension img.extension_icon {
    flex-basis: 56px;
    flex-shrink: 0;
    flex-grow: 0;
}
div.extension .extension_name {
    flex-basis: 100%;
    flex-shrink: 1;
    flex-grow: 0;
    padding-left: .5em;
    padding-right: .5em;
    font-weight: bold;
    text-align: center;
}
div.extension .install {
    flex-basis: 80px;
    flex-shrink: 0;
    flex-grow: 0;
}

img.extension_icon {
    width: 56px;
    height: 56px;
}

a.install, a.options {
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    box-sizing: border-box;
    color:rgb(255, 255, 255);
    cursor:pointer;
    display:block;
    font-family:system-ui, -apple-system, system-ui, "segoe ui", Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol";
    font-size:13px;
    font-weight:600;
    width:80px;
    height:29px;
    max-width:300px;
    min-width:80px;
    margin: 0 auto;
    padding-bottom:8px;
    padding-left:4px;
    padding-right:4px;
    padding-top:6px;
    text-align:center;
    /* text-decoration-color:rgb(255, 255, 255);
    text-decoration-line:none;
    text-decoration-style:solid; */
    text-rendering: optimizelegibility;
    /* vertical-align: baseline; */
    -webkit-font-smoothing: antialiased;
}
a.install {
    background-color:rgb(26, 140, 255);
}
a.options {
    background-color:rgb(26, 192, 105);
}

a.install:active, a.install:hover,
a.options:active, a.options:hover {
/* box-shadow:rgba(0, 0, 0, 0.3) 0px 8px 34px 0px; */
transform:matrix(1.03, 0, 0, 1.03, 0, 0);
transition-delay:0s;
transition-duration:0.1s;
transition-property:transform;
transition-timing-function:ease-in-out;
text-decoration: none;
}

#epilogue {
    margin-top: .5em;
}

.sidebar {
    flex-direction: column;
    align-items: center;
    flex-basis: 100%;
}
.left_column {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    /* padding: 3em 5em; */
    /* font-size: 85%; */
}
.left_column>div {
    padding-left: 5em;
}
.right.sidebar {
    flex-basis: 0;
    flex-grow: 0;
}
.sidebar>.contents {
    padding: 3em 5em;
    font-size: 85%;
}

.patreon {
    align-items: center;
}
.patreon_header {
    width: 208px;
    margin-left: 2em;
    margin-right: 2em;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-bottom: 1em;

}
.patreon_header .patreon_epichrome {
    width: 48px;
    height: 48px;
    padding-left: 10px;
}
.patreon_logo {
    width: 150px;
    height: auto;
}
.patreon_logo st0 {
    fill: #052E49;
}

.patreon_msg {
    padding-bottom: .5em;
}

a.patreon_button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    color:rgb(255, 255, 255);
    font-family:aktiv-grotesk, sans-serif;
    font-size:14px;
    font-weight:500;
    height:34px;
    width:176px;
    background-color:rgb(232, 91, 70);
    border-bottom-left-radius:9999px;
    border-bottom-right-radius:9999px;
    border-top-left-radius:9999px;
    border-top-right-radius:9999px;
    box-sizing:border-box;
    cursor:pointer;
}

a.patreon_button:active, a.patreon_button:hover {
    text-decoration: none;
    transform:matrix(1.03, 0, 0, 1.03, 0, 0);
    transition-delay:0s;
    transition-duration:0.1s;
    transition-property:transform;
    transition-timing-function:ease-in-out;
}

a.patreon_button svg {
    width: 16px;
    height: 16px;
    padding-right: 8px;
}

.patreon_rockstars {
    padding-left: 2em;
    padding-right: 2em;
}
.patreon_rockstars h2 {
    padding-top: 1em;
}
.patreon_rockstars ul {
    font-size: 105%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.patreon_rockstars li {
    padding-bottom: .5em;
}
