:root {
    --centerboxtext: #080805;
    --GokuBlue: #0849a1;
    --headerBar-width: 10vw;
    --background-gradient: linear-gradient(to top, var(--GokuBlue), #222);
}

html{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

html::-webkit-scrollbar {
    display: none; /*hides scrollbar in webkit browsers*/
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    color: white;
}

a:hover{
    text-decoration: underline;
}

a:active{
    font-size:1.1%;
}


body{
    display: block;
    background-color: #080805 ;
}

header{
    display: block;
    position: fixed;
    flex-flow: column nowrap;
    color: blanchedalmond;
    border: 2px solid var(--centerboxtext);
    min-height: 100vw;
    width: var(--headerBar-width);
    font-size: 2.8vw;
    background-color: rgb(27, 18, 18);
    box-shadow: -10px 300px 200px var(--GokuBlue);
    z-index: 1;
}

#title{
    display: flex;
    padding-left: 1.1em;
    padding-top: 1.1em;
}

#title p{
    writing-mode: vertical-lr;
    color: whitesmoke;
    height: 30%;
}

header img{
    display: flex;
    width: var(--headerBar-width);
}

main{
    display: block;
    margin-left: var(--headerBar-width);
    border-left: 3px solid var(--GokuBlue);
    height: 100vw;
    width: calc(100vw - var(--headerBar-width));
    background-color: #e5e5f7;
    opacity: 0.6;
    /* background-image: linear-gradient(45deg, #473e38 13.64%, #313c42 13.64%, #313c42 50%, #473e38 50%, #473e38 63.64%, #313c42 63.64%, #313c42 100%);
    background-size: 31.11px 31.11px; */
    background-image: linear-gradient(45deg, #151017 34.62%, #301d0b 34.62%, #301d0b 50%, #151017 50%, #151017 84.62%, #301d0b 84.62%, #301d0b 100%);
    background-size: 36.77px 36.77px;
}

nav{
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: 15% 15% 40% 15% 15%;
    grid-template-areas:
    "button1 vitruvius vitruvius vitruvius button2"
    "button3 vitruvius vitruvius vitruvius button4"
    ". vitruvius vitruvius vitruvius ."
    ". . . . ."
    ". . . . .";
    justify-items:center;
    align-items: end;
    color: blanchedalmond; 
}

nav .background{
    display: grid;
    justify-self: center;
    grid-area: vitruvius;
    filter: drop-shadow(0.25rem 0.15rem 0.3rem var(--centerboxtext));
    border: 100px solid grey;
    border-radius: 50%; */
}

main button{
    position: sticky;
    top: 0;
    width: fit-content;
    height: 2em;
    padding: 0;
    margin: 0.5em;
    line-height: 1.5em;
    font-size: 1.8em;
    color: var(--centerboxtext);
    text-shadow: 2px 2px 1px #0a3879;
    background-color: rgb(8, 73, 161);
    cursor: pointer;
    border-radius: 50%;
    z-index: 3;
}

main button:hover{
    color: #ffab4a;
    background-color: #397edd;
    text-shadow: 2px 1px 1px #0a3879; /*#5a697e*/
    border: 2.5px solid honeydew;
}

main nav button:first-of-type{
    display: grid;
    grid-area: 1 / 2 / 2 / 3;
    justify-self:center;
}

main nav button:nth-of-type(2){
    display: grid;
    grid-area: 2 / 2 / 3 / 3;
    justify-self:self-start;
}

main nav button:nth-of-type(3){
    display: grid;
    grid-area: 1 / 4 / 2 / 5;
    justify-self:center;
}

main nav button:nth-of-type(4){
    display: grid;
    grid-area: 2 / 4 / 3 / 5;
    justify-self:self-end;
}

#centerboxcontainer {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 800px;
    padding: 20px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
    color: #b9712e;
}

object {
outline: 4px solid #b9712e;
border-radius: 2%;
padding: 10px;
margin: 10px;
resize: horizontal;
overflow: auto;
}