@import url('./sheanWindow.css');
@import url('./icons.css');
@import url('../spectre/spectre.min.css');
@import url('../spectre/spectre-exp.min.css');
@import url('../spectre/spectre-icon.min.css');
@import url('./animated.css');
@import url('./typecho.css');

:ROOT {
    --rads: 3.5ex;
    --blur: blur(30px);
    --darkText: darkgray;
    --lightText: #193d4e;
    --lightTextGray: #999;
    --darkTextGray: darkgray;
    --darkGlass: rgba(0, 0, 0, .7);
    --lightGlass: rgba(255, 255, 255, .6);
    --darkBorder: solid 2px rgba(255, 255, 255, .1);
    --lightBorder: solid 2px rgba(255, 255, 255, .3);
    --darkShadow: 0 0 2px 1px rgba(0, 0, 0, .5);
    --lightShadow: 0 0 2px 1px rgba(0, 0, 0, .3);
    --darkTextHover: #666;
    --lightTextHover: #08467f;
    --lightLine: rgba(255, 255, 255, .4);
    --darkLine: rgba(255, 255, 255, .05);
}

body,
html {
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
    overflow: hidden;
    user-select: none;
    height: 100vh;
    width: 100vw;
}

body.bg-tran {
    background: transparent;
    overflow-y: scroll !important;
}

a {
    font-style: italic;
    text-decoration: underline;
}

.noImgs{
    padding:20px;
}
.noImgs img,
.noImgs br{
    display: none;
}

/**
text-gray
 */
body[data-theme="dark"] .theme-text-gray {
    color: var(--darkTextGray);
}

body[data-theme="light"] .theme-text-gray {
    color: var(--lightTextGray);
}

/**
bg-gray
 */
.flag {
    backdrop-filter: blur(5px);
    position: relative;
    padding: 3px 8px;
    border-radius: 100px;
    display: inline;
}

body[data-theme="dark"] .flag {
    background-color: var(--darkGlass);
}

body[data-theme="light"] .flag {
    background-color: var(--lightGlass);
}

body[data-theme="dark"],
body[data-theme="dark"] a {
    color: var(--darkText);
}

body[data-theme="dark"] a:hover {
    color: var(--darkTextHover);
}

body[data-theme="light"],
body[data-theme="light"] a {
    color: var(--lightText);
}

body[data-theme="light"] a:hover {
    color: var(--lightTextHover);
}

/* Default light theme */
/* body[data-theme="light"] {} */

/* Dark theme */
/* body[data-theme="dark"] {} */


iframe#sw,
iframe#pw {
    background: transparent;
    border: none;
    display: block;
    width: 100%;
    height: 100%;
    /*border-radius: var(--rads);*/
    /* padding: 10px 0; */
}

.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.f1 {
    flex: 1;
}

.full-height {
    min-height: 100vh;
}

.bg-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}



/**
travel
 */
.travel-item {
    padding: 10px;
    border-radius: var(--rads);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 300ms;
    margin: 20px 10px;
}

.travel-item>* {
    margin: 10px;
}

.travel-item .title {
    padding: 10px;
    border-radius: var(--rads);
    position: relative;
    backdrop-filter: blur(5px);
    font-weight: bold;
}

body[data-theme="light"] .travel-item {
    background-color: var(--lightGlass);
    box-shadow: var(--lightShadow);
}

body[data-theme="light"] .travel-item .title {
    background-color: var(--lightGlass);
}

body[data-theme="dark"] .travel-item {
    background-color: var(--darkGlass);
    box-shadow: var(--darkShadow);
}

body[data-theme="dark"] .travel-item .title {
    background-color: var(--darkGlass);
}

/**
bing item
 */
.bing-data-img {
    height: 50vh;
    border-radius: var(--rads);
    margin-bottom: 10px;
}

.-bing-item {
    margin: 20px 10px 30px 10px;
}

body[data-theme="dark"] .bing-data-img {
    box-shadow: var(--darkShadow);
}

body[data-theme="light"] .bing-data-img {
    box-shadow: var(--lightShadow);
}

/**camear8?

 */
.camera-item{
    margin:10px 10px 30px 10px;
    cursor: pointer;
}
.camera-item:last-child{
    margin-bottom:10px;
}
.-camera-p-item{
    background-repeat: no-repeat;
    background-size: cover;
}
.photo-item{
    border-radius: var(--rads);
    margin:0 10px 25px 10px;
    display: block;
}
.photo-item:last-child{
    margin-bottom:0;
}
body[data-theme="light"] .photo-item{
    box-shadow: var(--lightShadow);
}
body[data-theme="dark"] .photo-item{
    box-shadow: var(--darkShadow);
}