@font-face {
    font-family: JandaManateeBubble;
    src: url(./fonts/janda_manatee/JandaManateeBubble.ttf);
}
@font-face {
    font-family: JandaManateeSolid;
    src: url(./fonts/janda_manatee/JandaManateeSolid.ttf);
}

body {

    background: url("./image/Background.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

h1{

    font-family: JandaManateeBubble, sans-serif;
    font-size: 100px;

}

h2{

    font-family: JandaManateeSolid, sans-serif;
    font-size: 40px;

}

h3{

    font-family: JandaManateeBubble, sans-serif;
    font-size: 30px;

}

p{

    color: black;
    font-family:"Century Gothic", sans-serif;
    font-size: 20px;
    font-weight: bold;

}

#btsLogo {

    grid-area: btsLogo;

}

#characterBox {

    grid-area: character;


}

#copyFooter{

    grid-area: footer;


}

#credits{



}

#description_angie {

    grid-area: angie;

}

#description_christopher {

    grid-area: christopher;

}

#description_marcelo {

    grid-area: marcelo;

}

#description_morganne {

    grid-area: morganne;

}

#download{

    grid-area: download_link;

}

#flyer {

    float: right;

}

#flying_francis {

    float: right;

}

#gridBox {

    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: auto;
    grid-template-areas:
            ". header ."
            ". video ."
            ". story ."
            ". idea ."
            ". character ."
            ". team ."
            " . download_link ."
            "btsLogo footer lamLogo";
    text-align: center;
    height: auto;
    width: 100%;
    z-index: 2;
}

#ideaBox {

    grid-area: idea;


}

#lamLogo {

    grid-area: lamLogo;


}

#storyBox {

    grid-area: story;


}

#teamBox {

    grid-area: team;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: auto;
    grid-template-areas:
            ". . teamHeader . ."
            "angie christopher . marcelo morganne";
    text-align: center;

}

#teamHeader {

    grid-area: teamHeader;

}

#titleHeading {

    grid-area: header;


}

#videoBox {

    grid-area: video;


}

.gridBoxes {

}