:root{
    --accent-color: steelblue;

    --color-text: black;
    --heading-color: black;
    --color-mark: silver;

    --main-font: font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    --second-font: var(--main-font);

    --p-font: var(--main-font);
    --h1-font: var(--main-font);
    --h-font: var(--main-font);
    --quote-font: var(--main-font);

    --white: #fff;
    --lighter: #eee ;
    --light: #bbb ;
    --medium: #777;
    --dark: #555;
    --darker: #222;
    --black: #111;


    --black-opacity: #0001;
    --black-opacity1: #0003;


    --p-size: 18px;
    --bq-size: 150%;
}
*{
    border-color: var(--black-opacity1);
    max-width: 100%;
}
body{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0px;
}

/*horizontal rule*/


/*headings*/
h1,h2,h3,h4,h5,h6{
    font-family: var(--h-font);
    color: var(--heading-color);
    margin: 0px;
}
h3,h4,h5,h6{font-weight: 500;}
h1{
    font-family: var(--h1-font);
    font-size: 75px;
    font-weight: 800;
}
h2{
    font-size: 55px;
    font-weight: 600;
}
h3{font-size: 35px;}
h4{font-size: 28px;}
h5{font-size: 19px;}
h6{font-size: 14px;}


main{
    width: 1000px;
    max-width: 100%;
}
main.smaller{width: 777px;}
main.larger{width: 1200px;}


img {
    display: block;
    max-height: 1000px;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
}
img+img{margin-top: 10px;}
figure + img{margin-top: 10px;}
img.smaller{
    width: 400px;
    max-width: 100%;
}
img.larger{
    width: 800px;
    max-width: 100%;
}


p {
    color: var(--color-text);
    font-size: var(--p-size);
    font-family: var(--p-font);
    font: var();
    font-weight: 400;
}


p > img{
    display: inline;
    width: 300px;
    max-height: 400px;
    margin: 2px;
    float: right;
}

p > img.smaller{
    width: 150px;
    max-height: 100px;
}
p > img.larger{width: 600px;}

figure{margin: 0;}
figcaption , caption{opacity: 80%;}

blockquote{
    max-width: fit-content;
    text-align: center;
    font-size: var(--bq-size);
    font-family: var(--quote-font);
}
blockquote::after{
    content: "-" attr(author);
    display: block;
    text-align: right;
    margin-top: 15px;
}
a {color: steelblue;}

/*list styling*/
ul,ol{
    margin: 0;
    width: 400px;
    max-width: 100%;
    list-style-position: inside;
    padding: 0px;
}
ul.outside{list-style-position: outside;}

ol>li ,ul > li{
    padding-left: 10px;
    padding-right: 10px;
}
/*dont forget to keep adding ol to the other styles as well*/
ul.center{
    text-align: inherit;
    margin: auto;
}
ul.smaller{width: 200px;}
ul.larger{width: 600px;}

ul.nostyle{list-style: none;}
ul >li.nostyle{list-style-type: none;}
ul.stripes > li:nth-child(odd){background-color: var(--lighter);}
ul.cap > li:first-child{
    background-color: var(--accent-color);
    color: white;
}
ul.line > li {border-bottom: 1px solid var(--black-opacity1);}
ul > li.line{border-bottom: 1px solid var(--black-opacity1);}
ul.tac{list-style-type: "- ";}
ul.tac > li::marker{font-weight: 900;}

/*Tables*/
table{
    border-spacing: 0;
    border-collapse: collapse;
    text-align: left;
    caption-side: bottom;
    table-layout: auto;
}
table td,table th{padding: 8px;}
table.cap th{
    color: var(--white);
    background-color: var(--accent-color);
}
table.line td+td ,table.line th+th{border-left: 1px solid var(--black-opacity1);}
table.stripes tbody tr:nth-child(even){background-color: var(--lighter);}
tr.line{border-bottom: 1px solid var(--black-opacity1);}

/*aside stuff*/
main aside{
    display: block;
    position: absolute;
    box-sizing: border-box;

    border-left-width: 2px;
    border-left-style: solid;
    max-width: 200px;
    transform: translateX(1010px);

}
main.smaller aside{transform: translateX(787px);}
main.larger aside{transform: translateX(1210px);}
@media (max-width: 1400px){
    main:not(.smaller):not(.largeer) aside{
        transform: translateX(0);
        max-width: unset;
        position: static;

    }
}
@media (max-width: 1200px){
    main.smaller aside{
        transform: translateX(0);
        max-width: unset;
        position: static;

    }
}
@media (max-width: 1650px){
    main.larger aside{
        transform: translateX(0);
        max-width: unset;
        position: static;

    }
}

/*miscellanius*/
mark{
    background-color: var(--color-mark,silver);
    border-radius: 3px;
    padding: 0px 3px;
}

hr{
    border:none;background-color: var(--color-hr,--accent-color,silver);
    width: 100%;
    height: 1px;
}
hr.thick{height: 3px;}
hr.thicker{height: 6px;}
hr.smaller{width: 80%;}
hr.tiny{width: 25%;}

textarea{
    resize: none;
    background-color: var(--black-opacity,#000f);
    border: inherit;
    margin: 3px;
    padding: 5px;
    max-height: 10em;
}

input {
    border: none;
    background-color: var(--black-opacity,#0001);
    color: black;
    opacity: 100%;
    padding: 5px;
    border-radius: 3px;
    margin: 3px;
}

select{
    display: block;
    background-color: var(--input-bcolor,#0001);
    padding: 5px;
    border-radius: 5px;
    outline: inherit;
    border: inherit;
    cursor: pointer;
    max-height: 10em;
    max-width: 100%;
    box-sizing: border-box;

}
select[multiple]{height: 10em;}
select::-webkit-scrollbar{display: none;}

button{
    cursor: pointer;
    border: none;
    font-size: inherit;
    border-radius: 5px;
    background-color: var(--black-opacity,#0001);
    padding: 12px 24px;

}
button:hover{
    opacity: 90%;
}

:disabled{
    opacity: 50%;
    cursor: unset;
}


#intro h1{
    color: white;
    text-shadow: 4px 4px 0px black;
}