@font-face { 
	font-family: "PixelOperator"; 
	src: url("../fonts/PixelOperator.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

@font-face { 
	font-family: "ModernDOS9x16"; 
	src: url("../fonts/ModernDOS9x16.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

body {
    background-color: #000; 
    background-image: url('sighhawaii.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: #fff;
    font-size: 15px;
    font-family: "PixelOperator", arial;
}

a {
    color: #4d90f0;
}

a:hover {
    color: #6a55c6;
}

.content {
    max-width: 1000px; /* max width of grid (I FUCKING DID IT) */
    margin: 0 auto;  /* centering */
}

.wrapper {
    display: grid;
    grid-template-rows: 1fr 4fr 1fr 35px;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
    "header   header header"
    "leftSide main   rightSide"
    "leftSide main   boxThing"
    "leftSide lowlow boxThing"
    ;
    gap: 1em;
    padding: 10px;
    justify-content: center;
    align-content: center;
}

.item {
    background-color: rgba(0, 0, 0, 0.95);
    border: 1px solid white;
    padding: 10px;
}

.navgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    font: bold small-caps 15px 'Courier New', Courier, monospace;
    text-align: center;
}

.navgrid a { /* navbar links */
    color: #63bdf9;
    text-decoration: none;
}

.navgrid a:hover { /* navbar links */
    color: #9ffcda;
    text-decoration: none;
}

.navgridbit {
    gap: 5px;
}

#hi {
    font: bold small-caps 30px/50px 'ModernDOS9x16', monospace;
    color: #fff;
}

.house {
    color: #4d90f0;
}

.iconcon {
    width: 100px;
    height: 100px;
    display: flex;
    float: left;
}
    
.icon-wrap { 
    width: 100px;
    height: 100px;
    border-radius: 100%; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    float: left;
} 

.icon { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}
    
.iconbuttons {
    width: 100px;
    height: 20px;
    float: right;
    border-radius: 0px 5px 0px 5px;
    background-color: #fff;
    font: bold small-caps 12px/15px 'PixelOperator', monospace;
    color: #000;
    text-align: center;
}