/*
AUTH: Jared O'Toole
DATE: Saturday, February 23rd, 2019
PROJ: Student Portfolio Webpage
FILE: index.css
*/

/* PAGE STYLES */ 

body {
    background-color: black;
    -min-height: 2048px;
}

main {
    border: 4px groove white;
    border-radius: 12px;
    background-color: white;
    padding: 8px;
    margin: auto auto;
    max-width: 832px;
}

section {
    padding: 0px 24px;
}

section#about-me, section#accessibility {
    max-width: 768px;
    column-width: 14em;
    vertical-align: top;
}

div.columnized {
    column-width: 16em;
}

/* MISC STYLES */

sup {
    color: hsl(0, 0%, 35%);
}

p:first-child {
    margin-top: 0px;
}

p.code {
    font-family: monospace;
    padding: 4px;
    padding-left: 1.5em;
    background-color: hsl(0, 0%, 90%);
    border: 2px dotted lightgray;
}

input[type=text] {
    width: 100%;
}

textarea {
    resize: none;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: scroll;
}

/* MEDIA STYLES */

img, audio, .video, .form, .outline {
    display: inline-block;
    border: 2px dotted darkgray;
    border-radius: 8px;
    padding: 4px;
}

canvas {
    margin: 8px;
    border: 1px solid darkgray;
    border-radius: 8px;
}

/* HEADER STYLES */

h2 {
    padding: 0px 8px;
    margin: 12px auto;
}

h4 {
    margin: 0;
    margin-bottom: 12px;
    font-size: 1.15em;
}

h3.dummy {
    display: none;
}

/* LIST STYLES */

li {
    margin: 8px auto;
}

ul.divided {
    list-style-type: none;
    padding-left: 0;
    margin: 4px auto;
}

ul.divided li {
    border: 2px inset darkgray;
    padding: 8px;
}

/* BANNER STYLES */

#banner {
    -min-width: 768px;
    -background-color: hsl(210, 15%, 92%);
}

#banner h1 {
    display: inline-block;
}

#banner h1 span {
    display: inline-block;
    font-size: 80%;
    color: hsl(0, 0%, 25%);
    margin: auto 8px;
}

#banner div {
    display: inline-block;
    margin: auto 12px;
    vertical-align: top;
}

#banner nav {
    background-color: hsl(210, 10%, 90%);
    padding: 8px 4px;
}

/* BUTTON STYLES */

.button {
    display: inline-block;
    cursor: pointer;
    color: hsl(0, 0%, 35%);
}

.button.selected {
    color: black;
}

.button:hover {
    color: teal;
}

/* TOGGLE TAB STYLES */

.tab {
    display: none;
}

.tab.active {
    display: block;
}