/* =============================================
   index.css — Styles extracted from index.html
   ============================================= */

/* General */
body {
    background-color: #688ecc;
}

.about-me {
    font-size: 30px;
    font-weight: bold;
    margin-top: -30px;
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    align-content: center;
}

.header-resume {
    font-size: 30px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 30px;
    align-content: center;
}

.padded-margin {
    padding-left: 20px;
    padding-right: 20px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600px wide, hide all links except the first one ("Home").
   Show the icon link that opens/closes the topnav. */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks the icon.
   Makes the topnav display links vertically on small screens. */
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

/* Skills & About */
.skills-bar {
    margin-top: 56px;
}

.about-gamelovers {
    background-image: url(../img/thumbnails/about/gamelovers.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.about-p {
    max-width: 400px;
    text-align: center;
    text-shadow: 2px 2px #000000;
}

/* Links */
a:link {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

a:visited {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

a:active {
    color: #b2b2b2;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #adadad;
    text-decoration: none;
    font-weight: bold;
}

/* Navigation */
.navbar {
    background-color: transparent;
    height: 60px;
}

.scrolling-navbar {
    transition: background .5s ease-in-out, padding .5s ease-in-out;
}

.top-nav-collapse {
    background-color: #667490;
}

footer.page-footer {
    background-color: #667490;
}

@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #667490;
    }
}

/* Necessary for full-page carousel */
html,
body,
.view {
    height: 100%;
}

/* Carousel */
.carousel,
.carousel-item,
.carousel-item.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.carousel-item:nth-child(1) {
    background-image: url("../img/thumbnails/about/gamelovers.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.5;
}

.carousel-item:nth-child(2) {
    background-image: url("../img/thumbnails/about/singularity-new.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.carousel-item:nth-child(3) {
    background-image: url("../img/thumbnails/about/studio.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.carousel-item:nth-child(4) {
    background-image: url("../img/thumbnails/about/2014-dave-CBC.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.carousel-item:nth-child(5) {
    background-image: url("../img/thumbnails/about/ryerson-team.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.carousel-item:nth-child(6) {
    background-image: url("../construction/one-york-photo.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.carousel-item:nth-child(7) {
    background-image: url("../img/thumbnails/about/game-design.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.shadow-text {
    text-shadow: 2px 2px #000000;
}

.info-card {
    max-width: 600px;
    text-align: center;
    align-content: center;
}

/* ---- Section backgrounds ---- */

.about-dave {
    background-image: url(../game/bg/bg_rnf2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: -40px;
}

.project-container {
    display: flex;
    justify-content: center;
    padding: 20px 0 50px 0;
}

.project-table {
    width: 90%;
    max-width: 800px;
    table-layout: fixed;
    border-collapse: collapse;
}

.project-table td {
    width: 33.33%;
    border: none;
}

.project-img {
    width: 100%;
    height: auto;
    display: block;
}

.about-rise-and-fall {
    background-image: url(../game/bg/bg-4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-destiny-2-sacrion {
    background-image: url(../game/destiny-2/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-overkart {
    background-image: url(../game/overkart/bg-overkart.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-office-birthday {
    background-image: url(../game/office-birthday/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-sonic {
    background-image: url(../game/sonic/bg_sonic.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-3 {
    background-image: url(../img/thumbnails/about/singularity-new.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.about-tv {
    background-image: url(../img/thumbnails/about/studio.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.about-hnic {
    background-image: url(../img/thumbnails/about/hnic.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.about-hockey {
    background-image: url(../img/thumbnails/about/ryerson-team.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.about-construction {
    background-image: url(../img/thumbnails/about/construction.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.about-6 {
    background-image: url(../img/thumbnails/about/game-design-3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

/* ---- Consolidated inline-style classes ---- */

/* Navbar */
.navbar-title  { font-size: 20px; margin-top: -10px; }
.navbar-icons  { font-size: 30px; margin-top: -2px;  }

/* Hero section */
.hero-header   { font-size: 70px; margin-top: -10px; }
.hero-subtitle { font-size: 20px; margin-top: -15px; }
.mt-neg-50     { margin-top: -50px; }
.mt-neg-40     { margin-top: -40px; }
.mt-neg-30     { margin-top: -30px; }

/* Card / section layout */
.card-section      { margin-top: -30px; align-content: center; }
.card-body-section { margin-top: -30px; max-width: 500px;      }

/* Typography */
.text-xxl      { font-size: 70px;  }
.text-xl       { font-size: 40px;  }
.text-md       { font-size: 20px;  }
.text-md-tight { font-size: 20px;  margin-top: -10px; }

/* Links & buttons */
.link-blue        { color: #5b77d3; }
.btn-label        { color: white;   }
.btn-label-padded { color: white; padding-left: 30px; padding-right: 30px; }

/* Text blocks */
.text-center-500 { max-width: 500px; text-align: center; }
.text-center-400 { max-width: 400px; text-align: center; }

/* Images */
.rounded-10 { border-radius: 10px; }
.w-300      { width: 300px; height: auto; }
.w-400      { width: 400px; height: auto; }

/* Footer */
.footer-text { max-width: 100%; font-size: 20px; }

/* Spacers */
.pb-5   { padding-bottom: 5px;   }
.pb-10  { padding-bottom: 10px;  }
.pb-15  { padding-bottom: 15px;  }
.pb-20  { padding-bottom: 20px;  }
.pb-25  { padding-bottom: 25px;  }
.pb-30  { padding-bottom: 30px;  }
.pb-75  { padding-bottom: 75px;  }
.pb-100 { padding-bottom: 100px; }
.pb-125 { padding-bottom: 125px; }
.pb-150 { padding-bottom: 150px; }