:root {
    --primary-nav-hover: #0000f8;
    --primary-link-hover: #ff000d;
    --padding-size-x: 5px;
    --padding-size-y: 10px;
    --text-color: #ffffff;
}





body {
    background-color: #121212;
    color: var(--text-color);

    font-family: "Audiowide", sans-serif;

    background-image: url('../img/background/checkered_background_dark.png');
    background-repeat: repeat;
}

/* hedings styling */
h1,h2,h3,h4,h5,h6 {
    color: #c3c2ff;
    text-align: center;
    font-size: 2em;
}

/*======================*/


/* web-section styling */
.section {
    justify-content: center;
    align-items: center;
    display: flex;
}

.section-background {
    background-image: url('../../resorsis/img/background/checkered_background_gray.png');
    background-repeat: repeat;
}

/*======================*/


/* Icon Styling */
.icon {
    justify-content: left;
}

/*======================*/


/* Border Styling */
.border {
    border: 5px solid #423f58;
    padding: var(--padding-size-x);
}

/*======================*/


/* Navigation Styling */
.nav-butten {
    display: inline;
    margin: 15px;
    padding: var(--padding-size-y) var(--padding-size-x);
    border: 5px solid #5b529b;
    background-color: #3c3474;
}

.nav-butten a {
    color: #c3c2ff;
    text-decoration: none;
}

.nav-butten a:hover {
    text-decoration: underline;
    text-shadow: -1px -1px 0 var(--primary-nav-hover), 1px -1px 0 var(--primary-nav-hover), -1px 1px 0 var(--primary-nav-hover), 1px 1px 0 var(--primary-nav-hover);

}

/*======================*/


/* Link Styling */
.nav-link a {
    color: #ffc2c2;
    text-decoration: none;
}

.nav-link a:hover {
    text-decoration: underline;
    text-shadow: -1px -1px 0 var(--primary-link-hover), 1px -1px 0 var(--primary-link-hover), -1px 1px 0 var(--primary-link-hover), 1px 1px 0 var(--primary-link-hover);
}

/*======================*/

p {
    line-height: 1.6;
    margin: 15px;
    padding: var(--padding-size-y) var(--padding-size-x);
}

footer {
    justify-content: center;
    text-align: center;
    font-size: 0.85em;
    margin: 20px 0;
}

footer a {
    color: var(--text-color);
    text-decoration: none;
    cursor:text;
}


@media only screen and (min-width:1px) and (max-width: 680px) {
    .nav-butten {
        justify-content: center;
        display: inline-block;
        margin: 10px 0;
    }

    :root {
        --padding-size-x: 1px;
        --padding-size-y: 2px;
    }

    h1,h2,h3,h4,h5,h6 {
        color: #c3c2ff;
        text-align: center;
        font-size: 1.5em;
    }
}