/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,700&display=swap');

body {
    background: #222 url("Images/BlenderDeskTop-low.png"); /*Replace with your own background image.*/
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    font-size: 1.8vh;
    font-family: "Open Sans", sans-serif;
}

.page {
    background: rgb(0, 0, 0);
}

a {
    color: #eab061;
}

a:hover {
    color: rgb(135, 138, 81);
}

p {
    margin: 1px 0;
    font-size: 3vh;
}

.brightness {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 1vh;
}
.brightness img:hover {
    opacity: 0.5;
}

iframe {
    width: 100%;
    height: 60vh;
    background: #ffffff;
    border: 0;
}

.links {
    border-top: 1px solid #ccc;
    background: rgb(238, 238, 238, 0.05);
    padding-left: 2vh;
    padding-right: 2vh;
    list-style-type: none;
    text-align: center;
}

/*For the first link in the links bar*/
.link-first {
    display: inline-block;
    border-right: 1px solid #ccc;
    padding: 1vh;
    padding-right: 1vh;
    padding-bottom: 1vh;
    padding-top: 1vh;
    text-align: center;
}

.link {
    display: inline-block;
    border-right: 1px solid #ccc;
    padding: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-top: 10px;
    text-align: center;
}

/*For the last link in the links bar*/
.link-last {
    display: inline-block;
    padding: 1vh;
    padding-left: 1vh;
    padding-bottom: 1vh;
    padding-top: 1vh;
    text-align: center;
}

.main {
    margin: 0 auto;
    width: 70vh;
    background-color: rgb(10, 10, 10);
    border-radius: 2vh;
    margin-top: 8vh;
    margin-bottom: 3vh;
    /*Quick guide to box-shadow:
    First two numbers are vertical and horizontal offset.
    Third number is how far to spread the fuzzy effect.
    Fourth number is how much solid border/shadow there should be before the fuzzy effect begins.
  */
    box-shadow: 0 0 15px 2px #42c6ff;
    height: 10vh;
    font-size: 1.5vh;
    font-family: "Open Sans", sans-serif;
}

.main-inner {
    padding: 5vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
}
.main2 {
    margin: 0 auto;
    width: 70vh;
    position: relative;

    background-color: #0a0a0a;
    margin-top: 8vh;
    margin-bottom: 5vh;
    /*Quick guide to box-shadow:
    First two numbers are vertical and horizontal offset.
    Third number is how far to spread the fuzzy effect.
    Fourth number is how much solid border/shadow there should be before the fuzzy effect begins.
  */
    box-shadow: 0 0 50px 1px rgba(66, 87, 255, 0.37);
    background-image: url("Images/web-low.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.main2::before {
    content: "";
    position: absolute;
    left: 19%;
    right: 6.5%;
    top: 22%;
    bottom: 4.5%;
    background: #000;
    z-index: 0;
}

.main-inner2 {
    position: relative;
    z-index: 1;
    padding: 2vh;
    padding-top: 10.9vh;
    padding-bottom: 2.8vh;
}

.embedded-page {
    height: 60vh;
    overflow: auto;
    background-color: rgb(0, 0, 0);
}

.embedded-page .text {
    min-height: 100%;
    background-color: #000;
}

.enter-window {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
}

.enter-window pre {
    width: auto;
    margin: 0 0 16px;
}

/*Prevent image overflow*/
.main-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.footer {
    margin: 0 auto;
    padding: 15px;
    padding-top: 0;
    margin-top: -20px;
    text-align: center;
    font-size: 12px;
}

.header {
    text-align: center;
}

#navbar {
    height: 4vh;
    background-color: #bfbfbf;
    /* navbar color */
    width: 100%;
    margin: 1vh 0;
    padding: 1.3vh 0;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 1vh;
}

/* navigation links*/
#navbar li a {
    color: black;
    /* navbar text color */
    font-weight: 802;
    text-decoration: none;
    /* this removes the underline */
    font-size: 2.5vh;
    font-family: Garamond, serif;
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: #616161;
    text-decoration: underline;
}

pre {
    width: 100%;
    white-space: pre-wrap;
    font-size: 3vh;
}

.audio-container{
    margin: 0 auto;
    display: block;
}

/*Mobile compatibility*/
@media (orientation: portrait) {
    body {
        background: #222 url("Images/BlenderDesktop-small-low.png");
        background-size: 100% 100%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
    }

    .main {
        width: 67%;
    }
    .main2 {
        width: 67%;
    }
}

/* Real Site */
.real-site-page {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5rem;
    font-family: 'PT Sans', sans-serif;
    color: #BBB;
    background-color: #000;
    background-image: url("Images/real-site-full-background-first-frame.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}

.real-site-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("Images/real-site-full-background.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.real-site-page img {
    max-width: 100%;
    border-radius: 4px;
}

.real-site-page a {
    text-decoration: none;
    color: #FFF;
}

.real-site-page a:hover {
    text-decoration: underline;
}

.real-site-page p,
.real-site-page li,
.real-site-page .real-site-section-body {
    font-size: 1rem;
    line-height: 1.55;
}

.real-site-page h1,
.real-site-page h2,
.real-site-page h3,
.real-site-page p {
    margin-top: 0;
}

.real-site-title {
    font-weight: 600;
    color: #FFF;
    font-size: 24px;
    line-height: 32px;
}

.real-site-subtitle {
    margin-bottom: 24px;
}

.real-site-wrapper {
    width: 1000px;
    max-width: calc(100vw - 24px);
    background: rgba(10, 10, 10, 0.9);
    margin: 12px auto 0;
    box-shadow: 0 0 24px #00000033;
}

.real-site-header {
    min-height: 200px;
    padding: 24px;
    vertical-align: top;
}

.real-site-avatar {
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: top;
}

.real-site-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.real-site-header-text {
    margin: 0 24px;
    display: inline-block;
    width: 390px;
    box-sizing: border-box;
}

.real-site-listening {
    display: inline-block;
    vertical-align: top;
}

.real-site-main {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.real-site-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
    box-sizing: border-box;
}

.real-site-section {
    background: #999;
    margin-bottom: 24px;
}

.real-site-section-header {
    padding: 12px;
    background: #303033;
}

.real-site-section-body {
    padding: 12px 12px 24px;
    background: #39393e;
}

.real-site-sidebar {
    flex: 0 0 300px;
    align-self: flex-start;
    padding: 0 12px;
    background: #333;
    box-sizing: border-box;
}

.real-site-friend-avatar {
    width: 60px;
    display: inline-block;
}

.real-site-friend-name {
    display: inline-block;
    vertical-align: top;
    margin-left: 12px;
}

.real-site-friend {
    margin-bottom: 12px;
}

.real-site-menu {
    margin: 24px 0;
}

.real-site-menu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.real-site-menu li a {
    display: block;
    font-size: 18px;
    line-height: 36px;
}

.real-site-blinkies {
    margin-top: 12px;
}

.real-site-width-50 {
    width: 50%;
}

.real-site-page table {
    border-collapse: collapse;
    margin: 24px 0;
    background-color: #262628;
}

.real-site-page th,
.real-site-page td {
    padding: 12px 24px;
    vertical-align: top;
}

.real-site-page th {
    background: #303033;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.real-site-emoticon {
    vertical-align: middle;
}

@media (max-width: 760px) {
    .real-site-page {
        background-attachment: scroll;
        font-size: 17px;
        line-height: 1.5;
    }

    .real-site-page::before {
        background-attachment: scroll;
    }

    .real-site-wrapper {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: 100vh;
        background: rgba(10, 10, 10, 0.72);
        box-shadow: none;
    }

    .real-site-header {
        min-height: 0;
        padding: 18px 14px 10px;
        text-align: left;
    }

    .real-site-avatar {
        width: 88px;
        height: 88px;
        margin-right: 14px;
    }

    .real-site-header-text {
        width: calc(100% - 108px);
        margin: 0;
        vertical-align: top;
    }

    .real-site-title {
        font-size: 22px;
        line-height: 28px;
    }

    .real-site-subtitle {
        margin-bottom: 14px;
    }

    .real-site-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px;
        padding: 0 12px 18px;
    }

    .real-site-content,
    .real-site-sidebar {
        width: 100% !important;
        flex: 0 0 auto !important;
        padding: 0;
    }

    .real-site-sidebar {
        order: -1;
        align-self: stretch !important;
        background: rgba(48, 48, 51, 0.92);
    }

    .real-site-menu {
        margin: 0;
        padding: 12px 14px;
    }

    .real-site-menu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    .real-site-menu li a {
        line-height: 1.25;
        font-size: 18px;
        padding: 4px 0;
    }

    .real-site-section {
        margin-bottom: 14px;
    }

    .real-site-section-header,
    .real-site-section-body {
        padding: 12px;
    }

    .real-site-section-body {
        overflow-x: auto;
    }

    .real-site-page p,
    .real-site-page li,
    .real-site-page .real-site-section-body {
        font-size: 1.08rem;
        line-height: 1.5;
    }
}