{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Christians of the Internet</title>
        <link rel="shortcut icon"
              type="image/png"
              href="https://members.christian-webring.org/static/img/favicon.ico" />
        {% block head %}{% endblock %}
    </head>
    <body>
        <style>

					* {
						box-sizing: border-box;
					}

          @font-face {
              font-family: 'Girassol';
              src: url({% static 'fonts/Girassol-Regular.ttf' %}) format('truetype');
          }

          body {
						background-image: url("{% static 'img/bg.png' %}");
            background-color: #868F69;
            background-repeat: repeat;
            background-attachment: fixed;

						font-family: "Cormorant Garamond", serif;
						color: #000000;

						line-height: 1.5em;
						font-size: 1.1em;
          }

          h1.header {
						color: #603814; 
						text-shadow: 1px 1px 0px #868F69, 2px 2px 0px #254117;
						text-align: center;

						font-family: "Girassol", serif;
						font-weight: 400;
						font-style: normal;
						font-size: 70px; 
          }

          .container {
            background-color: #ffffff;
						color: #3C241B;
						text-align: justify;

						box-shadow: inset 0 -8px 4px 4px rgba(255, 255, 255, 0), inset 0 2px 4px 0px #603814;
						border-left-style: ridge;
						border-right-style: ridge; 
						border-bottom-style:ridge; 
						border-color: #603814;

            width: 70%;
            max-width: 1400px;

            margin: -10px auto 0px auto;
          }

					.content {
						padding: 10px 20px 0px 20px;
					}

          .nav {
            width: 100%;
            max-width: 1400px;
            margin: -10px auto 0px auto;

            background-color: rgba(96,56,20);
            color: white;

						box-shadow: 0 5px 5px -2px #603814;
						border-top-style: ridge;
            border-color: #603814;

						margin-bottom: 0px;
            padding-left: 20px;
            padding-right: 20px;
            margin-bottom: 10px;
          }

          .nav a {
            color: white; 
            font-size: 20px; 
            padding: 10px; 
            text-decoration: none;
          }

          .nav a:hover, .nav a:active {
            font-style: italic;
            font-weight: bold;
          }

          .forum-category {
						position: relative;

						background-color: #603814;
						color: white;
						font-weight: bold;

						height: 40px;
            max-width: 100%;
            padding: 6px 0px 3px 10px;
          }

          .forum-thread {
            width: 100%;
            border: solid #AEBDB6 1px;
            border-top: 0px;
            padding: 15px;
            box-sizing: border-box;
          }

          table {
            line-height: 1em;
            border-collapse: collapse;
            width: 100%;
          }

					.row-spacing {
            border-collapse: separate;
						border-spacing: 0 5px;
					}

          td, th {
            border: 1px solid #AEBDB6;
            text-align: left;
            padding: 8px;
						word-wrap: break-word;
          }

          .hide {
            display: none;
          }

          blockquote {
						font-size: 13px;
            color: #1ABC9C;
						padding: 2px;
						padding-left: 10px;
						background-color: #E8E8E8;
						margin: 0px;
						border-left: solid 8px #16A085;
          }

          .messages {
            box-sizing: border-box;
            list-style: none;
            margin: 1em 0 2em;
            padding: 0;
          }

          .messages li {
            box-sizing: border-box;
            padding: 1em;
            width: 100%;
            line-height: 2.0em;
          }

          .debug {
            background-color: #d0ebff;
          }

          .success {
            background-color: #b2f2bb;
          }

          .warning {
            background-color: #ffec99;
          }

          .error {
            background-color: #ffe3e3;
          }

					.clearfix:after {
						content: "";
						display: table;
						clear: both;
					}

					
					.standard-table {
						display: block;
					}

					.mobile-table {
						display: none;
					}

          @media only screen and (max-width: 1000px) {

						.standard-table {
							display: none;
						}

						.mobile-table {
							display: table;
						}

            .container {
              width: 95%;
            }

						.avatar {
							height: 100px;
							width: auto;
						}

						.nav a {
							font-size: 14px;
							padding: 5px;
						}

						h1.header {
							text-align: center;
							color: #603814; 
							font-weight: 400;
							font-style: normal;
							font-size: 35px; 
							text-shadow: 1px 1px 0px #868F69, 2px 2px 0px #254117;
							font-family: "Girassol", serif;
						}
          }
        </style>

        <script>
					function toggleDisplay(elemId) {
						let elem = document.getElementById(elemId);
						if (elem.style.display === "none" || elem.style.display === "") {
							elem.style.display = "block";
						} else {
							elem.style.display = "none";
						}
					}
        </script>

        <h1 class="header">Christians of the Internet</h1>
				<div class="container">
        <div class="nav">
            <center>
                <a href="https://christian-webring.nekoweb.org/">Home</a>
                <a href="https://christian-webring.nekoweb.org/widget.html">Widget</a>
                <a href="https://christian-webring.nekoweb.org/rules.html">Rules</a>
                <a href="https://christian-webring.nekoweb.org/member-list.html">Members</a>
                <a href="https://christian-webring.nekoweb.org/manager.html">Admins</a>
                <a href="{% url 'index' %}">Member's Area</a>
                <a href="{% url 'signup' %}">Join</a>
            </center>
        </div>
        <div class="nav">
            <center>
                <a href="{% url 'forum_threads' %}">Forum</a>
                <a href="{% url 'profile' %}">Profile</a>
                <a href="{% url 'code_of_ethics' %}">Code of Ethics</a>
                <a href="{% url 'custom_logout' %}">Logout</a>
            </center>
        </div>
            {% if messages %}
                <ul class="messages">
                    {% for message in messages %}
                        <li {% if message.tags %}class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
						<div class="content">
							{% block content %}{% endblock %}
							<div style="float:right"><small>v1.0.3</small></div>
							<div style="clear:both;"></div>
						</div>
						<br>
        </div>
    </body>
</html>
