/* If I'd started coding any earlier in my life, i'd be a TOTAL pro at this.
Every time I start writing HTML (at least in a way that feels like its SOMEWHAT for myself),
I get sucked in and keep going for hours. I keep finding little things and issues to fix until
it looks perfect to me. 
So coding this went by in only a few hours.  It's relatively simple, but the main thing I
struggled with was formatting the dang images! I wanted to figure out how to place two/three 
images next to eachother without breaking the page. That's why this project is 99% DIVS. 

There were two ways that I could have done this - either have the image take up the entirety
of the div that its in (and by the process warping or cutting off part of the image), or 
have more empty space but showing the entirety of the image. I went with the second choice, obviously,
but was unsure how to really deal with the issue of the space - I realise all it really meant 
is that I have to keep in mind the ratios of the drawings in comparison to screen size, which 
could be interesting... */

:root {
    --burple: #220022;
    --white: #ffffff;
    --black: rgb(0, 0, 0);
    --arr0ws: rgb(172, 5, 194);
    /*Custom colors*/
}

body {
overflow-x: hidden;
overflow-y: hidden;
}

div {
display: inline-block;
font-family: 'Courier New', Courier, monospace;
font-size: 30px;
color: white;
}

div.two {
display: flex;
width: 99vw;
height: 90vh;
}

div.main {
width: fit-content;
height: 80vh;
margin: auto;
margin-bottom: 2%;
}

div.left {
    align-content: center;
    float: left;
    padding-left: 2%;
    padding-right: 2%;
}

div.right {
    align-content: center;
    float: right;
    padding-right: 2%;
    padding-left: 2%;
}

div.center {
width: 100vw;
height: 2vh;
text-align: center;
}

a {
text-decoration: inherit;
color: inherit;
}

a:hover {
filter: blur(3px);
}

img.temp {
transform: scale(.5);
}

img.main {
object-fit:contain;
width: 100%;
height: 100%;
}