/* HIWEE PAGE DESIGN ELEMENTS */

.background {
    background-image: url('background.png');
    height: 100vh; 
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.navigate {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(0,0,0,0.7);
    width: 100%;
    position: fixed;
    padding: 5px;
    top: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

#logotype img {
    width: 90px;
}

#theme_option {
    display: flex;
    align-items: center;
    opacity: 50%;
    color: white;
}

#theme_option img {
    width: 22px;
    margin-right: 3px;
}

#theme_option span {
    margin-right: 3px;
}

#sun_theme {
    display: inline;
}

#moon_theme {
    display: none;
}

#checkTheme {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid white;
    border-radius: 100%;
    cursor: pointer;
    background: none;
    transition: border 0.1s ease-in-out;
}

#checkTheme:checked {
    background-color: white;
}

#pages {
    width: 150px;
    display: flex;
    align-items: center;
}


#pages a {
    display: flex;
    margin: 3;
    color: white;
    opacity: 50%;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.1s ease-in-out;
}

#pages a:hover {
    opacity: 100%;
}

#pages img {
    width: 20px;
    margin-right: 3px;
}

/* Weclome Banner */

.welcome {
    width: 100%;
    height: 40%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.message {
    width: 300px;
    display: wrap;
    align-items: center;
    text-align: left;
    color: white;
}

.message img {
    width: 400px;
}

.picture img {
    width: 130px;
}

/* CARDS DESIGN */

.listing {
    width: 800px;
    margin: auto;
}

.card {
    width: auto;
    background: rgba(255,255,255,0.9);
    color: black;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    margin-bottom: 5px;
}

.card span {
    width: auto;
}

#card_connect {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#sign img {
    width: 200px;
    margin-bottom: 10px;
}

#sketch img {
    width: 100px;
}

#about_dark, #functions_dark, #authors_dark {
    display: none;
}

#about_light, #functions_light, #authors_light {
    display: inline;
}

#sketch_about_dark, #sketch_functions_dark, #sketch_authors_dark {
    display: none;
}

#sketch_about_light, #sketch_functions_light, #sketch_authors_light {
    display: inline;
}

/* SOCIAL NETWORKS BANNER */

.socials {
    width: auto;
    background: rgba(253, 233, 176, 0.9);
    color: black;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    margin-bottom: 5px;
}

.socials span {
    width: auto;
}

#about img {
    width: 15px;
    margin-right: 5px;
}

#socials_connect {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#socials img {
    width: 200px;
    margin-bottom: 10px;
}

.socials a {
    transition: filter 0.1s ease-in-out;
}

.socials a:hover {
    color: cornflowerblue;
    filter: brightness(80%);
}

#sketch img {
    width: 100px;
}

#socials_dark {
    display: none;
}

#about_light {
    display: inline;
}

#sketch_socials_dark {
    display: none;
}

#sketch_socials_light {
    display: inline;
}

/* STICKERS BANNER */

.stickers {
    width: auto;
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    margin-bottom: 5px;
}

.stickers b {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.stickers span {
    width: auto;
}

#stickers_field {
    display: flex;
    align-items: center;
    justify-content: center;
}

#stickers_field img {
    width: 80px;
    transition: width 0.2s ease-in-out;
}

#stickers_field img:hover {
    width: 100px;
}

#stickers_button {
    display: flex;
    align-items: center;
    justify-content: center;
}

#stickers_button button {
    margin: 5;
}

#telegram_button {
    display: flex;
    align-items: center;
    color: white;
    background: cornflowerblue;
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.1s ease-in-out;
    margin-right: 5px;
}

#telegram_button:hover {
    background-color: rgba(69,107,177);
}

#telegram_button img {
    width: 20px;
    margin-right: 5px;
}

#download_button {
    display: flex;
    align-items: center;
    color: white;
    transition: opacity 0.1s ease-in-out;
}

#download_button:hover {
    opacity: 50%;
}

#download_button img {
    width: 20px;
    margin-right: 5px;
}

/* FOOTER */

.footer {
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 20px;
}

.footer span {
    opacity: 50%;
}

.footer a {
    transition: opacity 0.1s ease-in-out;
}

.footer a:hover {
    opacity: 100%;
}

#footer_up {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#footer_up img {
    width: 90px;
    opacity: 50%;
}