/* General settings */
* {
	/* Fixing the box-sizing issue */
	/* Explanation: https://www.w3schools.com/css/css3_box-sizing.asp */
	box-sizing: border-box;

	/* Setting all default margin and padding to 0, because elements have pretty arbitary initial settings */
	margin: 0;
	padding: 0;

	/* Smooth scrolliing when anchor links pressed */
	scroll-behavior: smooth;
}

[contenteditable="true"]:active, [contenteditable="true"]:focus
{
    border:none;
    outline:none;
}


/* text styles */ 
h1 {
    color:#fff7e3;
    font-family: futura;
    font-size:48px;
    font-weight:200;
    /* transform:scale(1.0,1.5); */
}

h2 {
    color:#fff7e3;
    font-family: futura;
    font-size:20px;
    font-weight:500;
}

p {
    color:#243540;
    font-family: futura;
    font-weight:400;
}

ul {
    padding-left: 20px;
    /* transform:scale(1.0,1.15); */
    /* color:#0000FF; */
    color:#243540;
}

.text-link {
    font-family:futura;
    color:#243540;
}
.text-link:hover{
    color:#697336;
}
.text-link:active {
    color:#ad5221;
}
.text-link:visited{
    color:#243540;
}



.dj-tag-box {
    width:100%;
    padding-top:4px;
    padding-bottom:4px;
    padding-right:10px;
    background-color:#243540;
}
.dj-tag{
    position:relative; 
    text-align:right; 
    color:#fff7e3; 
    font-family:futura;
}

.blue-links {
    color:#0000FF;
    font-family: Helvetica;
}
.blue-links:visited {
    color:#0000FF;
}

.nav-links {
    color:inherit;
    font-family: futura;
    text-decoration: none;
}



/* containers */
:root{
    --nav-height: 36px;
}



.flex-container {
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    align-items:center;
}
.flex-child{
    align-self:center;
    flex-grow:1;
    flex-shrink:1;
    /* text-align: center; */
    vertical-align: middle;
    transition: 0.5s ease-in-out 0.1s;
}



.nav-container {
    position:sticky;
    top:-1px;
    z-index: 100;
    display:flex;
    background-color: #fff7e3;
    width:100%;
    height:var(--nav-height);
    gap:0px;
    flex-direction:row;
    justify-content: space-around;
    align-items:center;
    font-size:18px;
}
.nav-children {
    align-self:stretch;
    background-color:#fff7e3;
    flex-grow:1;
    text-align: center;
    vertical-align: middle;
    line-height:var(--nav-height);
    transition: 0.5s ease-in-out 0.1s;
}
.nav-children:hover {
    letter-spacing: 0.1em;
}
.nav-perma {
    color:#243540;
    background-color:#fff7e3;
    letter-spacing: 0.1em
}
.nav-blue {
    color:#fa732a;
    background-color:#243540;
}
.nav-green {
    color:#f0b824;
    background-color:#697336;
}
.nav-yellow {
    color:#59690b;
    background-color:#f0b824;
}
.nav-red {
    color:#f0b824;
    background-color:#ad5221;
}
.hover-blue:hover {
    color:#fa732a;
    background-color:#243540;
    
}
.hover-green:hover {
    color:#f0b824;
    background-color:#697336;
}
.hover-yellow:hover {
    color:#59690b;
    background-color:#f0b824;
}
.hover-red:hover {
    color:#f0b824;
    background-color:#ad5221;
}



.landing-container{
    display: flex;
    gap:40px;
    flex-wrap:wrap;
    justify-content: space-between;

    width:100%;
    height:36vw;
    /* margin:2.5vw;
    border-radius:3vw;
    border: 6px solid #ad5221; */

    background-image:url('ass/A1205_OLD_2851395090776064.png');
    background-size:cover;
    background-color:red;
}


.full-width-block {
    width:100%; 
    padding: 36px; 
    background-color:green;
}




/* adjustments for small screens */
@media only screen and (max-width: 500px){
    :root{
        --nav-height:24px;
    }
    .nav-container{
        height:calc(var(--nav-height) * 5);
        flex-direction:column;
        font-size:12px;
    }

    h1 {
        font-size:28px;
    }

    h2 {
        font-size: 14px; 
    }
}