style0.scss

$bgColorBig: #c9d6ea;
$bgColorSmall: #becbdd;
$linksColor: black;
$linkVisited: #515b5b;
$linkHover: #4f8da3;

body {
    background-color: $bgColorBig;
}

// TODO change title to boostrap
h1 {
    text-align: center;
}
// TODO what is this ?
h3 {
    display: inline;
    padding: 7px;
}

// links
a {
    text-decoration: none;
}
a:link {
    color: $linksColor;
}
a:visited {
    color: $linkVisited;
}
a:hover {
    color: $linkHover;
}

img {
    width: 100%;
}

// TODO what is this
iframe {
    width: 100%;
    height: 100%;
}

.boldText {
    font-weight: bold;
}

// TODO is this necesarrly or can boostrap it ?
.textContent {
    margin: 10px;
}
.midsectionContainer {
    margin: 10px;
}

#choicesList {
    font-size: 1.2em;
    font-weight: bold;
}

#footerIndex {
    font-weight: bold;
    font-size: 1.2em;
}

// media events
// small devices
@media only screen and (max-width: 600px) {
    body {
        background-color: $bgColorSmall;
    }

    h1 {
        text-align: left;
    }
}
// large devices
@media only screen and (min-width: 601px) {
    body {
        background-color: $bgColorBig;
    }

    h1 {
        text-align: left;
    }
}

.character-portrait {
    height: auto;
    width: 100px;
}



.test {
    #example {
        height: 10px;
    }
}