/*
COLORS: 

1 (darkest) (options txt): #151411
2 (menu bg): #423e37
3 (header bg): #6e675f
4 (body & descBox bg): #a39594
5 (lightest) (content bg): #edebd7

YELLOWS:

1 (lighter & main): #ffd675
2 (darker): #e3b23c
*/

@font-face{
    font-family: 'Starborn';
    src: url('fonts/Starborn.ttf');
}

@font-face {
    font-family: 'Papernotes';
    src: url('fonts/Papernotes.ttf');
}

#SiteTitle {
    font-family: "Starborn";
    font-size: 50px;
    letter-spacing: 2px;

    width:fit-content;
    text-align: center;
    margin: 20px auto;
    margin-bottom:0px;

    background-image: linear-gradient(#ffd675, #e3b23c);
    color: transparent;
    background-clip: text;

    filter: drop-shadow(3px 3px #423e37);

    transition: .3s;
}

#SiteTitle:hover {
    transform: translate(0px, 5px);
}

body, html {
    background-color: #edebd7;
    padding:0px;
    margin:0px;
    height: 100%;
}

/*container for everything, directly below body*/
#metaContainer {
    width: 75%;
    margin: 20px auto;
    display:flex;
    flex-flow:row;
    height:fit-content;
}

/*The box to the right of the menu*/
#content {
margin:20px 0px;

flex: 1;
border-radius: 0px 10px 10px 0px;

background: linear-gradient( #b49f9e, #9a8b8a);
background-size: 400% 400%;
background-repeat: no-repeat;
}

/*Menu, id because there is only one*/
#menu {
    display:flex;
    flex-flow: column;

    border-radius: 10px 0px 0px 10px;
    margin: 20px 0;

    width: 250px;
    box-sizing:border-box;
    padding: 10px;

    background-color: #423e37;
}

/*this is the box that "options" and "go home" belong to*/
.header {
    display:flex;
    flex-flow:row;

    background-color: #6e675f;

    padding: 2px;
    margin: 0px 0px 20px 0px;
}

#content .header {
    border-radius: 0px 10px 0px 0px;
}

.resourceBox .header {
    border-radius: 5px !important;
}

/*specifically the text for "go home" and nothing else*/
.header a {
    font-size:25px;
    text-decoration: underline dashed;
    color: #e3b23c;
    margin: 10px;
}

.header a:hover{
    color: #ffd675;
}

/*color for "options" it's border*/
.header h1 {
    color: #ffd675;
}

/*centers "options" and rounds the corner of every header accept for the very top on with "go home"*/
#menu .header, .resourceBox .header {
    border-radius: 10px;
    justify-content: center;
}

/*settings for just my menu list*/
#menu li{
    color: #a39594;
    margin: 5% 15%;
    font-size: 25px;
}

/*Trying to put each li element in its own div for better hover colors*/
.option {
    height:fit-content;
    width: 100%;
    border-radius: 5px;
}

.option:hover {
    cursor: pointer;
    background-color: #6e675f;
}

.option.active {
    background-color: #a39594;
}

.option.active > li {
    color: #ffd675 !important;
}

/*for the titles of my resources*/
.subHeader {

    font-size: 40px;   
    margin: 10px 0;
    cursor: pointer;

    color:#ffd675;

    transition: .3s;
}

.subHeader a {
    background-image: linear-gradient(#ffd675, #e3b23c);
    color: transparent;
    background-clip: text;
    filter: drop-shadow(3px 3px #423e37);

    font-family: 'Starborn';          
    letter-spacing: 1px;

    text-decoration: none;

}

.subHeader:hover {
    transform: translate(0px, -5px);
}

/*resourcebox is similar to picturebox in that it holds one resource per box*/
.resourceBox {
    display:flex;
    flex-flow: column;
    position:relative;
    margin:10px;
    min-height: 200px;
}

/*this adjusts the little box with my points in it, underneath the title*/
.resourceBox .header {
    background-color:#6e675f;

    font-size: 20px;

    min-width: 200px;
    width:fit-content;
    margin: 0px 2% 2% 2%;

    box-shadow: 3px 3px #423e37;
}

/*sets the color and margin for points mentioned above*/
.resourceBox li {
    color: #ffd675;
    margin: 15px 30px;
}

/*This is the box offset a little to the right where I will write a basic description*/
.descriptionBox {
    display:flex;
    align-items: center;
    gap:20px;

    height:fit-content;
    margin:0px 2% 2% 120px;
    background-color: #edebd7;
    padding:10px;
}

/*If i chose to make a list in the descriptionbox, it will appear slightly lighter (so it shows up better)*/
.descriptionBox li {
    margin: 2% 0px 2% 20%;
    color: #ffd675;
    justify-content: center;
}

.descriptionBox a:hover {
    color: #ffd675;
}

/*basic solid border, rn only used for descritpion box*/
.Border {
    border: 2px;
    border-radius: 10px;
    border-style: solid;
    color: #6e675f;
    }

/*this is the dotted box around my important text*/
.TextBorder {
    border: 3px;
    border-radius: 15px;
    border-style: dotted;
    width:fit-content;
    margin: 2%;
    padding: 4px 7px;
    font-family: 'Starborn';
}

.grabby {
    cursor: pointer;
}

/*rules for links*/
a {
    letter-spacing: 1px;
    font-family: 'Papernotes';
    color:#e3b23c;
}

/*rules for lists*/
li {
    letter-spacing: 1px;
    font-family: 'Papernotes';
    font-size:20px;
}

::marker {
    content:"✰";
}

/*rules for p*/
p {
    margin: 5px 10px;
    color:#423e37;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'Papernotes';
}

img {
    height: auto;

    margin: 10px 25px 10px 0px;
}

/*makes switching pages possible*/
.tab {
    display: none;
}

.tab.active {
    display: block;
}