@font-face {
    font-family: MiSans;
    src: url(font.woff2);
}


body {
    background-image: url(https://api.lo-li.icu/Bing/);
    background-attachment: fixed;
    background-size: cover;
    inset: 0;
    z-index: -1;
    object-fit: cover;
    margin: 0;
}

/*header*/
header {
    padding: 10px;
    margin-top: 0%;
    width: 100%;
    top: 0;
    color: white;
    font-family: MiSans;
    text-align: center;
}

#header_main {
    color: white;
    font-size: 4em;
}

#header_attached {
    color: #BFBFBF;
    font-size: 2em;
    margin-top: -40px;
}

/*main*/
#main {
    margin: auto;
    margin-top: 20px;
    max-width: 75%;
    min-width: 350px;
    padding: 8px;
    background-color: rgb(209, 229, 255, 0.7);
    color: #404040;
    font-family: MiSans;
    border-radius: 8px;
    border-width: 4px;
    filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

.title {
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    max-width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
    font-family: MiSans;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #2998CF;
    border: #2998CF solid;
    border-radius: 8px;
    border-width: 4px;
    filter: drop-shadow(0 10px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

.content {
    margin: 1%;
    margin-bottom: 20px;
    font-size: 1.2em;
    background-color: #AAD0FF;
    border: #AAD0FF solid;
    border-radius: 8px;
    border-width: 4px;
    filter: drop-shadow(0 10px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

.content-plainText {
    margin: 1%;
    margin-bottom: 20px;
    font-size: 1.2em;
    background-color: #AAD0FF;
    border: #AAD0FF solid;
    border-radius: 8px;
    border-width: 4px;
    filter: drop-shadow(0 10px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
    padding: 0 20px;
}


a {
    color: #2075a0;
    text-decoration: none;
}

.programs {
    display: block;
    background-color: #e2efff;
    border-radius: 8px;
    border-width: 4px;
    margin: 10px;
    align-items: center;
    transition:background-color 0.1s linear;
}
.programs:hover {
    background-color: #edf5ff;
}

#work_description {
    vertical-align: middle;
    font-size: 1em;
    display: inline-block;
    padding: 5px;
}

#work_description b {
    font-size: 1.4em;
    display: block;
}

ul.list {
    list-style-type: square;
    font-size: 1em;
}

.friends {
    background-color: #e2efff;
    border-radius: 8px;
    border-width: 4px;
    margin: 10px;
    margin-right: 0px;
    margin-bottom: 5px;
    padding-right: 10px;
    width: fit-content;
    height: fit-content;
    display: inline-block;
    transition:background-color 0.1s linear;
}
.friends:hover {
    background-color: #edf5ff;
}

#friend_description {
    vertical-align: middle;
    font-size: 1em;
    display: inline-block;
    padding: 5px;
}

#friend_description b {
    font-size: 1.4em;
    display: block;
}

footer {
    text-align: center;
    font-family: sans-serif;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 12.5%;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    background-color: rgb(209, 229, 255, 0.7);
    border-radius: 8px;
    border-width: 4px;
    width: fit-content;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: block;
    visibility: hidden;
    position: absolute;
    margin-left: -28px;
    background-color: #E2EFFF;
    width: fit-content;
    padding: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-width: 4px;
    white-space: nowrap;
    font-size: 1.2em;
    transition:visibility 0.1s linear;
}

.dropdown:hover .dropdown-content {
   visibility: visible;
}

.imgs {
    vertical-align: middle;
    margin: 10px;
    width: 100px;
    height: 100px;
    display: inline-block;
    border-radius: 8px;
    border-width: 4px;
}

#OC {
    margin: 1%;
    width: 98%;
    display: inline-block;
    border-radius: 8px;
    border-width: 4px;
    filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

#content-bookmarks {
    display: grid;
    grid: 15% / auto auto;
    font-size: 1em;
}

.bookmarks {
    grid-row: auto;
    display: inline-block;
    background-color: #e2efff;
    border-radius: 8px;
    border-width: 4px;
    margin: 10px;
    align-items: center;
    transition:background-color 0.1s linear;
    padding-left: 10px;
    padding-right: 10px;
}


.bookmarks:hover {
    background-color: #edf5ff;
}

* {
    box-sizing: border-box;
    scrollbar-width: none;
}