/* all styling */
:root
{
    font-family: 'MS PGothic', sans-serif;
    /*
    --text: colour;
    --border: colour;
    --bg: colour;
    */
    
}


/* page layout */
/* this is for 1920 x 1080 px */
* { 
	box-sizing: border-box;
    
}

header
{
    background-color: floralwhite;
	width: 100%;
	border: 2px solid rgb(56, 22, 47);
	border-radius: 5px;
    margin: center;
    padding: 15px;
    text-align: center;
}

/*footer
{
    background-color: rgb(209, 197, 215);
	width: 50%;
	border: 2px ridge black;
	border-radius: 5px;
    margin: auto;
    text-align: center;
}*/

body
{
    background-color: rgb(186, 226, 186);
    background-image: url('images/cold_evening_by_forheksed_d9t2l0q-fullview.jpg');
    background-size: cover;
	background-position: center;
    margin: auto;
    margin-top: 10px;
    max-width: 1000px;
    padding: 10px;
    text-align: center;
    
}

div
{
    min-width: 20%;
    padding: 0px;
    margin: auto;
}

article
{
    margin: auto;
    max-width: 70%;
    max-height: 90%;
    text-align: center;
    
}
section
{
    max-height: 170px;
    overflow: scroll;
    scrollbar-width: none;
}
section img
{
    max-width: 80px;
}

iframe
{
    max-width: 100px;
    max-height: 150px;
    border-style: none;
    overflow: scroll;
    scrollbar-width: none;
}

img
{
    max-width: 200px;
}

ul
{
    margin-left: 10px;
    text-align: left;
}


/* classes */ 
.sidebar, .main, .single
{
    background-color: floralwhite;
}

.container
{
    background-color: rgba(255, 250, 240, 0.723);
    max-width: 100%;
    padding: 20px;
    border: 2px solid rgb(56, 22, 47);
    border-radius: 5px;
}

.main
{
    width: 675px;
    margin: auto;
    height: 500px;
    border: 2px solid rgb(56, 22, 47);
    border-radius: 5px;
    overflow: scroll;
    scrollbar-width: none;
}

 .menu
 {
    margin: auto;
    padding: 0px;
 }

.columns
{
    display: flex;
    padding-top: 20px;
    gap: 10px;
}

.single
{
    width: 80%;
    margin: auto;
    height: 500px;
    border: 2px solid rgb(56, 22, 47);
    border-radius: 5px;
    overflow: scroll;
    scrollbar-width: none;}

.sidebar
{
    max-width: 235px;
    height: 500px;
    border: 2px solid rgb(56, 22, 47);
    border-radius: 5px;
}

.grid
{    
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 50px;
}

.interactive p 
{
    font-size: small;
}


/* headings */
/* all heading styles, then specifics for size + margin + padding */
header h1
{
    padding: 5px;
    margin: auto;
}

.menu a
{
    padding: 10px;
    
}


footer p
{
    font-size: 80%;
    color:antiquewhite;
}

a:link, a:visited
{
    text-decoration: none;
    color: rgb(56, 22, 47);;
}

a:hover
{
    color: rgb(187, 164, 187);
}

h1, h2, h3, p, a, li
{
    color:rgb(56, 22, 47);
}

/* links */


/* other elements */