:root
{
    /*Variables here*/

    --text-color: #F4F4F9;
    --link-text-color: #969696;
    --Content-Block-Color: #182025;
    --background-color: #34393F;
    --nav-color:#050A0D;
}
* /*Root*/
{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    color: var(--text-color);
    text-decoration: none;
}

body /*Body stuff here*/
{
    background-color: var(--background-color);
}

nav /*Main navigation style*/
{
    background-color: var(--nav-color);
    width: 100%;
    height: 50px;
    text-align: center;
    text-decoration: none;
    display:  grid;
    grid-template-areas: "navLink navLink navLink navLink navLink";
    align-items: center;
    box-shadow: 1px 1px 5px rgb(0, 0, 0);
    
}

nav a /*Navigation links*/
{
    color: rgb(255, 255, 255);
}

nav a:hover /*Navigation links when hovering over a link.*/
{
    transition-duration: 500ms;
    text-decoration: underline;
    font-size: 105%;
}

.navLinkActive /*The link that is currently active (Current page)*/
{
    text-decoration: underline;
    font-size: 105%;
}

.content /*Main content style*/
{
    display: grid;
    align-items: center;
    padding-top: 50px;
    width: 100%;
    overflow: auto;
}

p /*Main p tag style*/
{
    margin-bottom: 10px;
}

.contentItem /*Style of a content item inside content*/
{
    
    margin-bottom: 75px;
    margin-left: 12.5%;
    margin-right: 12.5%;

    padding: 50px;
    min-width: auto;

    background-color: var(--Content-Block-Color);
    box-shadow: 1px 1px 5px rgb(0, 0, 0);

    text-shadow: 1.5px 1.5px 4px #000;
}

.contentLink /*Links inside the content*/
{
    margin-top: 100px;
    color: var(--link-text-color);
}

.contentLink:hover /*Link animation*/
{
    font-size: 105%;
    transition-duration: 250ms;
}

img /*Style for all images.*/
{
    padding-bottom: 20px;
    padding-top: 20px;
    max-width:100%;
    width: auto;
    height: auto;
    float: right;
    align-content: flex-end;
}

video /*Style for all video(s).*/
{
    max-width:100%;
    min-width: 0%;
    width: auto;
    height: auto;
}

/*Image helper classes*/
.imgRight
{
    float: right;
}

.imgLeft
{
    float: left;
}

input::placeholder
{
    color: #000;
    
}
/*end*/

.button /*Make form inputs have solid black instead of default gray.*/
{
    color: #000;
}

.formInput /*Form input helper class to force color black*/
{
    color: #000;
}

/*Default tag styles*/
h1
{
    padding-bottom: 10px;
}

h2
{
    padding-bottom: 10px;
}

footer /* Footer style */
{
    
    background-color: var(--nav-color);
    color: var(--text-color);
    width: 100%;
    height: 50px;
    margin-bottom: -100px;
    box-shadow: 1px 1px 5px rgb(0, 0, 0);
    display: grid;
}

footer p /* Footer p center stuff */
{

    align-self: center;
    text-align: center;
    
}

.fspace
{
    padding-top: 60vh
}

/*Media querrys*/

@media only screen and (max-width: 600px)
{
    body
    {
      font-size: 4vw /*Changing relative to screen size if size get less than 600px in width. This will make the font scale depending on screen size*/
    }

    .fspace /* Footer spacing for smaller devices. */
    {
        padding-top: 44vh
    }
}