:root {
    --darkest: #3b413c;
    --second_darkest: #8ea5a2;
    --second_lightest: #b7d4d1;
    --s_d_shadow: #7a928e;
    --lightest: #f0f8f7;
    --red: #ED1818;
    --dark_red: #BF0B0B;
}

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

@font-face {
    font-family: 'All-Things-Must-Pass';
    src: url('fonts/All-Things-Must-Pass.ttf');
}

/*background color, fit entire screen with no gaps*/
html, body {
    margin: 0px;
    padding: 0px;
}

html {
    background-color: var(--second_darkest);
}

body {
    font-family: 'Space-Grotesk';
    background-color: transparent;
}

/*My Title*/
.SiteTitle {
    font-family: 'All-Things-Must-Pass';
    text-align: center;
    font-size: 45px;
    letter-spacing: .2em;
    word-spacing: .8em;
    text-transform:uppercase;

    margin: 1% auto;
    width: fit-content;

    background-image: linear-gradient(#f0f8f7, #b7d4d1);
    color: transparent;
    background-clip: text;
    filter: drop-shadow(4px 4px var(--s_d_shadow));
}

/*contains content*/
#MetaContainer {
    display: flex;
    margin: auto;
    letter-spacing: .75px;
    width: 76%;
}

/*containes header and */
#content {
    display:flex;
    flex-flow: column;
    width: 100%;
    margin:20px auto;
}

/*the black bar at the top filled with my options*/
#header {
    display:flex;
    flex-grow:1;
    justify-content: space-around;
    box-sizing:border-box;
    border-radius: 5px 5px 0px 0px;
    width: 100%;

    background-color: var(--darkest);
}

#header p{
    color: var(--lightest);
}

/*options, one for each tab*/
.option {
    display:flex;
    height:100%;
    width:100%;
    
    box-sizing: border-box;
    justify-content: center;
    
    border: 2px;
    color:var(--second_lightest);
    border-style:none solid none solid;

    cursor:pointer;
}

.option.active, .option:hover {
    background-color: #575e58;
    border-radius: 5px 5px 0px 0px;
}

.messageContainer {
    display:flex;
    flex-flow: row;
    justify-content: center;
    text-align: left;

    padding:20px;

    background-color: var(--second_lightest);
    border-radius:0px 0px 5px 5px;
}

/*a grid container for each photo card*/
.photoContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    padding: 20px 40px;
    height: auto;
    justify-content: center;
    
    background-color: var(--second_lightest);
    border-radius:0px 0px 5px 5px;
}

/*these are the cards for each photo*/
.pictureBox {
    width: 100%;
    margin: 0px;
    align-items:center;
    box-shadow: 4px 4px var(--s_d_shadow);
}

h1, h2 {
    margin: 20px;
    margin-bottom: 10px;
}

/*for big text that is dark*/
h1 {
    font-size:25px;
    color:var(--darkest);
    text-decoration: underline;
}

/*for big text that is white*/
h2 {
    font-size: 40px;
    color: var(--lightest);
    text-decoration: underline;
}

p {
    font-size:20px;
    margin: 20px;
    color:var(--darkest);
}

a {
    color: var(--dark_red);
    text-decoration: underline;
    font-weight: bold;
}

a:hover{
    color: var(--red);
}

.center {
    width:100%;
    text-align:center;
    margin:0px;
}

.Border {
    border: 4px;
    border-radius: 15px;
    border-style: solid;
    color:var(--darkest);
}

.grabby { cursor: pointer; }

img {
    margin: 10px;
    display: block;
    margin: auto;
    max-width: calc(100% - 15px*2); /* 100% - 2*(the border size)*/

    border: 3px solid var(--darkest);
}

/*WIP, a repeating img that forms a solid stripe across a*/
.headerImg {
    display:flex;
    flex-flow:row;
    width:100%;
}

.footerImg {
    width:370px;
    margin: 20px auto;
}

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

.tab.active {
    display: block;
}