/*stylesheet for "a total burnout"*/

/*all elements use times new roman and white font unless otherwise specified*/

* {
    font-family: 'Times New Roman', Times, serif;
    color: white;
    /*font-size: 1.025em;*/
    font-size: 14pt;
}

/*HTML element acts as our main container, vertically and horizontally centering the main content.*/
html {
    background-color: black;
    height: 100vh;
    display: grid;
    /*90% of viewport width is dedicated to the grid,
    with 5% on either side to horizontally center the main content.
    
    Main content height is equal to 45% of the viewport width,
    so grid cells are perfect squares. 1fr on the top and bottom for vertical centering.*/
    grid-template-rows: 1fr 45vw 1fr;
    grid-template-columns: 5vw 90vw 5vw;
    /*NOTE: all grid squares are 5vw.
    The vertical measurments are also defined using viewport width
    in order to make the grid cells perfect squares.*/
}


body {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
    display: grid;
    /*BODY grid is set up as an 18:9 grid with a 2:1 aspect ratio.*/
    grid-template-rows: repeat(9, 5vw);
    grid-template-columns: repeat(18, 5vw);
    margin: 0;
}

/*to make interactive elements look like links*/
.line {
    display: none;
  }  

.line.active {
    display: block;
    cursor: pointer;
    text-decoration: underline;
}

.line.clicked {
    display: block;
}

.textbox {
    display: block;
}

.textbox.hide {
    display: none;
}

/*Textboxes contain all paragraph blocks because CSS is complicated and it
makes me use these visual fuckery tricks that clutter my code like crazy.*/
div.position {
    /*display flex helps us align things later.*/
    display: flex;
    align-items: center;
    justify-content: center;
}

div.textbox {
    padding: 0;
    padding: 1em;
    background-color: black;
    border: 3px solid white;
    box-shadow: 2px /*x offset*/ 2px /*y offset*/ 7px /*blur*/ 0px /*spread*/ rgba(0, 0, 0, 0.60);
    
}

div.textbox p {
    margin: 0;
}

/*
.textbox.center will center align the paragraph text
and horizontally center the p block inside the div.

.textbox.right will align the paragraph text to the right
and horizontally align the p block to the end of the div.
*/

div.textbox.center {
    justify-content: center;
}

div.textbox.center p {
    text-align: center;
}

div.textbox.right {
    justify-content: flex-end;
}

div.textbox.right p {
    text-align: right;
}

/*i don't remember what any of that shit does lol.*/

.center-box {
    grid-row: 3 / span 5;
    grid-column: 6 / span 8;
    background-color: #272727;
}

img.full-width {
    width: 100%;
}

#title-box img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}