body{
    color:antiquewhite;
    background-color: rgb(234, 233, 194);
    margin:0;
}

@font-face {
    font-family: 'IAmTheCrayonMaster';
    src: url('./assets/IAmTheCrayonMaster\ copy.woff2') format('woff2'),
    url('./assets/IAmTheCrayonMaster\ copy.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

h1{
    font-family: IAmTheCrayonMaster;
    color:rgb(161, 57, 85);
    text-align: center;
    margin:0;
}

img{
    position:fixed;
    margin-right:20px;
    margin-left:100px;
    width:160px;
    height:180px;
    z-index:1;
    
}

.container {
    display:flex;
    margin: auto;
    margin-top:60px;
    justify-content:center;
    flex-direction:column;
    z-index:-1;
    background-color:rgb(0, 0, 0);
    border:8px solid;
    border-color: black;
    height:500px;
    width: 800px;
    gap:10px;
    /* flex-direction establishes main axis, the default is horizonatal, row is default */
    /* flex-flow is just direction and wrap in one so these two could just be     flex-flow: row wrap;
  */
    /* aligns along main axis:default here is horizontal. and then we have 2 cross-axis alignments */

    /* align items, defines how flex items are laid out on the cross-axis (vertical here) meant for non-wrapping items */
    
    /* align-content can be used for cross-axis wrapping items */
    /* gap better than margin */

}

.powerline{
    width:100%;
    height:3px;
    background-color:grey;
    border:1px solid;
    border-color: black;
    position:relative;
    top:100px;
}

.top{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    height:30%;
    gap:20px;

}

.top-item{
    background-color:cornflowerblue;
    width:30%;
    height:100%;
}
.top-item2{
    background-color:cornflowerblue;
    width:70%;
    height:100%;
}

.bottom{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    height:70%;
    gap:20px;

}

.bottom-item{
    background-color:rgb(220, 200, 192);
    width:30%;
    height:100%;
}

.bottom-item2{
    background-color:rgb(246, 242, 239);
    width:70%;
    height:100%;
}