* {
    margin: 0px;
}

@media (max-width: 600px) { /* Phones */
    body {
        background-color: rgb(0, 0, 0);
        background-repeat: no-repeat;
        font-family: sans-serif;
        height: 179vh;
    }
    
    h1 {
		font-size: 26px;
		color: white;
    }
    
    h2 {
		font-size: 23px;
		color: white;
    }
    
    h3 {
		font-size: 20px;
		color: white;
    }
    
    h4 {
		font-size: 17px;
		color: white;
    }
    
    h5 {
		font-size: 14px;
		color: white;
    }
    
    h6 {
		font-size: 26px;
		color: white;
		font-weight: normal;
    }
    
    p {
		font-size: 13px;
		color: white;
    }
    
    pre {
		font-size: 12px;
		white-space: pre-wrap;
		color: white;
    }
    
    code {
		background-color: rgb(75, 50, 85);
		padding: 3px;
		border-radius: 5px;
		color: white;
    }
    
    a {
        font-weight: bold;
        font-size: 15px;
        padding: 4px;
        text-decoration: none;
        border-radius: 5px;
        color: rgb(187, 164, 216);
        transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1);
    }

    a:hover{
        background-color: rgb(187, 164, 216);
        color: black;
    }
    
    hr {
		margin: 9px;
		visibility: hidden;
    }
    
    ul {
		padding-left: 12px;
    }

    .upper_section {
        display: flex;
        background-color: rgb(27, 25, 32);
        height: 12vh;
        align-items: center;
        flex-direction: column;
    }
    
    .upper_banner {
		display: flex;
        align-items: center;
        flex-direction: row;
    }

    .middle_section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(41, 37, 53);
        height: 136vh;
        width: auto;
    }
    
    .wiki_box {
        display: flex;
        flex-direction: column;
        background-color: rgb(41, 37, 53);
        height: auto;
        width: 100vw;
    }

    .left_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 55vh;
        width: 100vw;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid rgb(187, 164, 216);
    }

    .container > img {
        width: 100vw;
        height: 28vh;
    }

    .right_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 62.5vh;
        width: 100vw;
    }

    .first_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 30vh;
        border: 1px solid rgb(187, 164, 216);
    }

    .second_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 30vh;
        border: 1px solid rgb(187, 164, 216);
    }

    .third_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 30vh;
        border: 1px solid rgb(187, 164, 216);
    }

    .bottom_section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgb(27, 25, 32);
        height: 31vh;
    }

    .bottom_section > p {
        font-size: 12px;
        color: white;
    }
    
    .bottom_banner {
		display: flex;
		flex-direction: row;
    }
}

@media (min-width: 601px) { /* Tablets and Computers */
    body {
        background-color: rgb(0, 0 ,0);
        background-repeat: no-repeat;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        height: 115vh;
    }
    
	h1 {
		font-size: 27px;
		color: white;
	}
	
	h2 {
		font-size: 25px;
		color: white;
	}
	
	h3 {
		font-size: 23px;
		color: white;
    }
    
    h4 {
		font-size: 21px;
		color: white;
    }
    
    h5 {
		font-size: 19px;
		color: white;
    }
    
    h6 {
		font-size: 27px;
		color: white;
		font-weight: normal;
    }
	
	a {
        font-weight: bold;
        font-size: 15px;
        padding: 2px;
        text-decoration: none;
        border-radius: 5px;
        color: rgb(187, 164, 216);
        transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1);
    }

    a:hover{
        background-color: rgb(187, 164, 216);
        color: black;
    }
    
    p {
		font-size: 16.2px;
		color: white;
    }
    
    pre {
		font-size: 14px;
		white-space: pre-wrap;
		color: white;
    }
    
    code {
		background-color: rgb(75, 50, 85);
		padding: 3px;
		border-radius: 5px;
		color: white;
    }
    
    hr {
		margin: 10px;
		visibility: hidden;
    }
    
    ul {
		padding-left: 12px;
    }

    .upper_section {
        display: flex;
        background-color: rgb(27, 25, 32);
        height: 5vh;
        align-items: center;
        flex-direction: row;
    }

    .upper_banner {
		display: flex;
        padding-left: 20px;
        align-items: center;
        flex-direction: row;
    }

    .nav_buttons {
        padding-left: 30px;
    }

    .middle_section {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: rgb(41, 37, 53);
        height: 85vh;
        width: auto;
    }
    
    .wiki_box {
        display: flex;
        flex-direction: column;
        padding: 25px;
        background-color: rgb(41, 37, 53);
        height: auto;
        width: auto;
    }

    .left_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 70vh;
        width: 48.5vw;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(187, 164, 216, 0.6);
        padding: 8px;
    }

    .container > img {
        width: 46.5vw;
        height: 50vh;
    }

    .right_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 70vh;
        width: 48.5vw;
    }

    .first_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 47vw;
        height: 20vh;
        border: 1px solid rgba(187, 164, 216, 0.6);
        padding: 4px;
    }

    .second_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 47vw;
        height: 20vh;
        border: 1px solid rgba(187, 164, 216, 0.6);
        padding: 4px;
    }

    .third_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 47vw;
        height: 20vh;
        border: 1px solid rgba(187, 164, 216, 0.6);
        padding: 4px;
    }

    .bottom_section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgb(27, 25, 32);
        height: 25vh;
    }
    
    .bottom_banner {
		display: flex;
		flex-direction: row;
    }

}