body {color: #1F1514;font-family: 'Times New Roman', Times, serif;background-color: gray;background-size: auto;margin-left: 300px;margin-right: 300px;}

/***contains the overall layout, and the textboxes  that  go in it**/
header {
    display: block;
    align-content:center;
    background: url(https://i.pinimg.com/736x/44/df/b8/44dfb8d2e6d57481ce07f296716c9335.jpg);
    height: 120px;
    margin-top: 10px;
    width: -webkit-fill-available;
    margin-right: 20px;
    margin-left: 20px;
    background-size:auto;
    background-position: center;
}

imgheader {
    display: block;
    align-items:center;
    height: 120px;
    width: -webkit-fill-available;
    margin: auto;
    background: ghostwhite;
    background-size: contain;
    border-style: solid;
    border-width: 10px;
    border-color: black;
}


h2 {
    margin-top: 0.4px;
}

h1 {
    justify-self: center;
    font-size: 50px;
    color: black;
    font-family:math
}

.maincontainer {/*controls the overall layout of the site. divides boxes into columns*/display: grid;grid-auto-columns: 1fr;margin-left: 500px;margin-right: 500px;margin-top: 200px;justify-content: center;padding: 10px;height:auto;background-color: #00000000;}

.maincontainer:first-child {
    grid-column: 1 / -1;
    min-width: 30%;
}

.maincontainerinside {/*sets stuff to rows while parent is columns, main stuff will go here*/display: flex;flex-direction: row;position: relative;padding: 10px;height: 200px;background-color: #3f403ed4;box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);border-width:12px;background-clip: padding-box;border-style:solid;border-image: url("https://solaria.neocities.org/guides/borderimage/whitelace.png") 34 fill round;}

.sidebar1 {/*put stuff inside this*/
           display: flex;
           flex-direction: column;
           justify-content: center;
           padding: 2px;
           height:auto;
           width: 50px;
           background-color: #00000000;
           }

.sidebar1cont {/*this inside sidebar1*/position: absolute;padding: 5px;transition: transform 0.3s ease-in-out;margin:4px;}

.sidebar1cont:first-of-type {/*this inside sidebar1*/top:40px;left: -40px;}

.sidebar1cont:nth-of-type(2) {/*this inside sidebar1*/top:160px;left: -40px;}

.sidebar1cont:nth-of-type(3) {/*this inside sidebar1*/top:250px;left: -40px;}

.sidebar1cont:hover {/*sidebar button animations*/
  transform: scale(1.5);
}


.innercontainer1 { /*sidebar won't let me touch this anymore*/display: flex;align-items: flex-start;padding: 0.5px;margin:5px;}

.innercontainer2 { /*middleboxes*/display: grid;
grid-template-columns: 200px 1fr;
height: auto;
width: inherit;
padding: 0.5px;margin:5px;
border-width:2px;box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
background-color: lightgray;
}

.innercontainer3 { /*sideboxes*/
    display: grid;
    grid-auto-columns: 400px;
    height: auto;
    width: inherit;
    padding: 5px;
    margin: 5px;
    background-color: lightgray;
    box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

.innercontainer3b { /*third*/grid-auto-columns: 500px;
display: grid;
align-items: center;
align-content: start;
height: auto;
width: -webkit-fill-available
;padding: 5px;margin:5px;
background-color: lightgray;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    
}

.innercontainer4 { /*info?*/width: inherit;
margin: 10px;
min-width: 140px;
overflow-y: auto;
padding: 15px;
background-image: url(https://i.imgur.com/GLEBr9v.png);
background-color: #f2f2f2;
border-width:12px;background-clip: padding-box;
border-style:solid;
border-image: url("https://solaria.neocities.org/guides/borderimage/whitelace.png") 34 fill round;
max-height: 250px;
}

.innercontainer4:nth-of-type(2) {
    overflow-y:auto;
}

.innercontainer4 {
    overflow-y:auto;
    
}
.innercontainer4b { /*info?*/
margin: 5px;
height: 30px;
overflow-y: auto;
padding: 10px;
transition: 1s;
background-color: #f2f2f2;
border-width:12px;
background-clip: padding-box;
border-style:solid;
border-image: url("https://solaria.neocities.org/guides/borderimage/whitelace.png") 34 fill round;
}

 .innercontainer4b:hover {
     height: 150px;
}

.innercontainer4:first-child {
    grid-column: 1 / -1;

}


marquee {
    background-color: antiquewhite;
    display: inline-block;
    width: 369px;
    max-height: 60px;
    margin-left: 15px;
border-width:12px;
background-clip: padding-box;
border-style:solid;
border-image: url("https://solaria.neocities.org/guides/borderimage/whitelace.png") 34 fill round;
}










/* buttons,animations,decor*/

@media(orientation: portrait) { 
body {color: #1F1514;font-family: 'Times New Roman', Times, serif;background: url('https://i.pinimg.com/736x/86/d6/9b/86d69b5afe1803b2a3b17a4a094947a8.jpg');background-attachment: fixed;background-size: cover;}

/***contains the overall layout, and the textboxes  that  go in it**/
header {
    display: block;
    text-align: center;
    background: url(https://i.pinimg.com/736x/1e/95/d8/1e95d89af6a40a01a93b78ffc114248b.jpg);
    width: 90%;
    height: 120px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    background-size:auto;
    background-position: center;
}

    imgheader {
    display: block;
    align-content:center;
    height: 120px;
    margin-top: 10px;
    width: -webkit-fill-available;
    margin: auto;
}

h2 {
    margin-top: 0.4px;
}

h1 {
    font-size: 50px;
    color: #bebeb9;
    font-family:math
}
.maincontainer {/*controls the overall layout of the site. divides boxes into columns*/
                display: flex;
                margin-left: 0px;
                margin-right: 0px;
                flex-direction: column;
                justify-content: center;
                padding: 10px;
                height:auto;
               }
               
.maincontainer:first-child {
    grid-column: 1 / -1;
}

.maincontainerinside {/*sets stuff to rows while parent is columns, main stuff will go here*/
    display: flex;flex-direction: column;
    position: relative;justify-content: center;
    padding: 60px;height:auto;
    max-width: 90%;min-width: 80%;}
    
    
    .maincontainerinside:hover {
     height: 1000px;
}
    
.sidebar1 {/*put stuff inside this*/
    display: flex;
           flex-direction: row;
    justify-content: center;
    padding: 3px;height:auto;
    width: auto;
}

.sidebar1cont {/*this inside sidebar1*/
position:unset;
padding: 5px;
transition: transform 0.3s ease-in-out;
margin:4px;

}

.sidebar1cont:first-of-type {/*this inside sidebar1*/
top:40px;
left: -140px
}

.sidebar1cont:nth-of-type(2) {/*this inside sidebar1*/
top:160px;
left: -140px
}

.sidebar1cont:nth-of-type(3) {/*this inside sidebar1*/
top:250px;
 left: -140px
}


.sidebar1cont:hover {/*sidebar button animations*/
  transform: scale(1.5);
}


.innercontainer1 { /*sidebar won't let me touch this anymore*/
display: flex;
align-items: flex-start;
padding: 0.5px;
margin:5px;
}

.innercontainer2 { /*firstbox*/display: grid;grid-template-columns: 200px 1fr;height: auto;width: -webkit-fill-available;padding: 0.5px;margin:5px;box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);background-color: lightgray;}

.innercontainer3 { /*second*/
display: flex;
align-items: flex-start;
height: auto;width: -webkit-fill-available;
padding: 5px;margin:5px;background-color: lightgray;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);}


.innercontainer3b { /*third*/display: flex;height: auto;
width: -webkit-fill-available;padding: 5px;
margin:5px;
background-color: lightgray;box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
flex-direction: column;
flex-wrap: wrap;
align-content: start}


.innercontainer4 { /*info?*/width: -webkit-fill-available;
margin: 5px;padding: 10px;background-color: #f2f2f2;
border-width:12px;background-clip: padding-box;border-style:solid;
background: lightgray;
background-clip: padding-box;border-image: url("https://solaria.neocities.org/guides/borderimage/whitelace.png") 34 fill round;}

.innercontainer4b { /*info?*/
margin: 5px;
height: 30px;
overflow-y: auto;
padding: 10px;
transition: 1s;
background-color: #f2f2f2;
border-width:12px;
background-clip: padding-box;
border-style:solid;
border-image: url("https://solaria.neocities.org/guides/borderimage/whitelace.png") 34 fill round;
}

 .innercontainer4b:hover {
     height: 300px;
}

.innercontainer4:first-child {
    grid-column: 1 / -1;

}


marquee {
    background-color: antiquewhite;
    display: inline-block;
    width: -webkit-fill-available;
    max-height: 60px;

border-width:12px;
background-clip: padding-box;
border-style:solid;
border-image: url("https://solaria.neocities.org/guides/borderimage/whitelace.png") 34 fill round;
}
/* buttons,animations,decor*/

}