/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Aladin&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Variables */
:root {
    --background:#3a457b;
    --offblack:#161a2e;
    --offwhite:rgb(238, 238, 221);
    --transp_offwhite:rgba(238, 238, 221, 0.75);
    --transp_offblack:#161a2e7c;

    --font_main:"DM Sans";
    --font_head: "Aladin"
    /* --font_head: "Josefin Sans", Helvetica, Arial, sans-serif; */
}

/* Globals */
html {scroll-behavior: smooth;}
body {background:var(--background) url("/images/temp/checkbg.png"); background-attachment:fixed; font-family:var(--font_main); font-size:10pt; color:var(--offwhite);}

#container {max-width:1200px; margin:auto; display:flex; gap:3em;}

#sidebar {position:fixed; width:250px; max-height:95vh; box-sizing:border-box; background:var(--transp_offwhite); border-radius:0.5em; padding:1em; margin-top:2vh; color:var(--offblack); border:2px ridge white; box-shadow:0 0 5px #75a4ff;}
    #sidebar a {color:var(--offblack); text-decoration:none;}
    #sidebar div {max-height:90vh; overflow:auto; padding-right:1em;}
    #sidebar h1 {font-size:1.8em; font-family:var(--font_head); margin:0; padding:0;}
    #sidebar ul {padding:0 0 0 0; list-style-type:none;}
        #sidebar ul ul {padding-left:0.5em;}
        #sidebar ul li {margin-bottom:0.5em; text-transform:uppercase; font-weight:700; transition:0.2s ease-in-out;}
            #sidebar ul ul li {font-weight:400; text-transform:none;}
            #sidebar ul ul li::before {content:"\25B6"; padding-right:.5em;}
        #sidebar ul li:hover {padding-left:1em;}
        #sidebar .hr {max-width:175px; margin:1em auto; height:53px; background:url("/images/temp/disney_sidebar_hr.png") no-repeat center center; background-size:cover;}
        #sidebar .logo {display:block; height:100px; background:url("/images/temp/disney_sidebar_splash.png") no-repeat center center; background-size:contain;}

.splash {background:url("/images/temp/splash_disney.png") no-repeat center center; background-size:contain; height:200px; width:100%;}
#content {margin-left:280px; position:relative; background:var(--background);  box-shadow: 0 0 5px 5px var(--background); padding:0 1em;}
    #content h1 {font-size:2em; font-family:var(--font_head); margin:0; padding:0;}
    #content h2 {font-size:1.6em; font-family:var(--font_head); margin:0; padding:0;}
    #content p {font-size:1.1em; line-height:1.5em;}
        #content p a {color:#fbcd75;}
    #content li {line-height:1.5em; font-size:1.1em;}
    #content .hr {max-width:349px; margin:1em auto; height:53px; background:url("/images/temp/disney_hr.png") no-repeat center center; background-size:cover;}
    
    .content_box {position:relative; background:var(--transp_offblack) url("/images/temp/contentbg.png"); border:2px ridge rgba(255,255,255,0.1); box-shadow:0 0 5px #75a4ff; padding:0.5em 1em; margin-bottom:2em;}
        .content_box h3::before {content:"\25B6"; margin-right:0.5em;}
        .content_box h3 small {font-style:italic;}

    .preview img {max-width:950px;}

.border {padding:1em; position:fixed; z-index:-1; padding:1em; width:100%; height:100%; box-sizing:border-box; top:0; left: 0;}
.border .box {width:100%; height:100%; box-sizing:border-box; top:0; left: 0; border:2px solid white;}

.backto {background:white;border-radius:5px; padding:0.5em; text-decoration:none; position:fixed; margin-left:-125px; transition:0.2s ease-in-out;}
    .backto:hover {margin-left:-135px;}
    .backto::before {content:"\25C0"; margin-right:0.2em;}
.totop {background:white;border-radius:5px; padding:0.5em; text-decoration:none; position:fixed; margin-left:-95px; transition:0.2s ease-in-out;}
    .totop:hover {margin-left:-105px;}
    .totop::before {content:"\25B2"; margin-right:0.2em;}

.hasmap:before {content:"🗺️"; margin-right:0.5em;}
.hasimg:before {content:"🖼️"; margin-right:0.5em;}