@import './superwhy.css';

div#page_container {
    margin: 0;
    width: auto;
}

#page_header,
#sponsor_bar,
#page_footer { width: 776px; margin: 0 auto; }

html {
    padding: 0;
}

body {
    background-color: #a2f3ec;
    padding: 10px;
}

#nav {
    text-align: center;
}

#page_container .nav-item {
    background: url('../assets/images/nav/nav_button_blue.png');
    background-size: 100%;
    background-repeat: no-repeat;

    display: inline-block;
    text-align: center;

    /* Wacky sizing to preserve aspect ratio, without using SCSS */
    width: 20vw;
    height: calc(20vw * 101 / 284);
}

#page_container .nav-item.home {
    background-image: url('../assets/images/nav/nav_button_blue_home.png');

    /* Wacky sizing to preserve aspect ratio, without using SCSS */
    width: 10vw;
    height: calc(10vw * 105 / 149);
}

#page_container .nav-item a {
    color: rgba(0, 0, 0, 0);
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    text-align: center;

    /* Wacky sizing to preserve aspect ratio, without using SCSS */
    width: 15vw;
    height: calc(15vw * 80 / 250);
    margin-top: 5px;
}

#page_container .nav-item.home a {
    background-image: url('https://cms-tc.pbskids.org/globalresources/resources/img/pbs-kids-logo.svg');
    width: 4.5vw;
    height: 4.5vw;
    display: inline-flex;
}

#page_container .nav-item a.root {
    background-image: url('../assets/images/nav/nav_button_home.png')
}

#page_container .nav-item a.games {
    background-image: url('../assets/images/nav/nav_button_games.png')
}

#page_container .nav-item a.videos {
    background-image: url('../assets/images/nav/nav_button_videos.png')
}

iframe#game {
    margin-top: 1vw;

    /* A large iframe, but leave some room for the nav up top */
    width: calc(100vw - 40px);
    height: calc(100vh - 20vw);
}