@import url('https://fonts.googleapis.com/css?family=Oldenburg|Bonheur+Royale|Meie+Script');

body {
 background-color: #ffffff;
 background: url('https://fan.yahuh.co/theborgias/i/bg.png');
 background-repeat: repeat-x;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: justify;
 color: #000000;
 font-family: "Oldenburg", serif;
 font-size: 12px;
 margin: 0 auto;
 z-index: 0;
 position: relative;
}

.main {
 grid-area: main;
 align-content: center;
 justify-content: center;
 background-color: transparent;
 font-family: "Oldenburg", serif;
 font-size: 12px;
 text-align: justify;
 padding: 10px;
 color: #000000;
 font-weight: none;
 margin-top: -35px;
 z-index: 1;
 position: relative;
}

.navi {
 grid-area: top;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 font-family: "Meie Script", serif;
 font-size: 20px;
 color: #ffffff;
 font-weight: normal;
 margin-top: -160px;
 align-content: center;
 justify-content: center;
}

.navlink {
 color: #ffffff;
 font-weight: normal;
 text-shadow: #c0c0c0 1px 0 10px;
}

.layout {
 width: 695px;
 background-color: transparent;
 align-content: center;
 justify-content: center;
 z-index: 2;
 position: relative;
}

.material-symbols-outlined {
 font-variation-settings:
 'FILL' 0,
 'wght' 500,
 'GRAD' 0,
 'opsz' 20
}

blockquote {
 margin-left: 50px;
 margin-right: 50px;
 padding: 10px;
 text-align: justify;
 background-color: #eeeeee;
 border-radius: 10px;
 box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

a img {
 border: none;
 border-width: 0;
 outline: none;
}

h1 {
 font-family: "Bonheur Royale", serif;
 margin-bottom: 1px;
 line-height: 20px;
 text-align: left;
 font-size: 30px;
 font-weight: none;
 color: #AB803C;
 letter-spacing: 0px;
}

h2{
 font-family: "Courier New", serif;
 border-top: 1px dotted #000000;
 text-align: justify;
 text-transform: uppercase;
 font-weight: normal;
 letter-spacing: 0px;
 font-size: 8px;
}

:root {
 --mainColor: #ac813c;
}

a {
 background:
     linear-gradient(
       to bottom,
       var(--mainColor) 0%,
       var(--mainColor) 100%
     );
 background-position: 0 100%;
 background-repeat: repeat-x;
 background-size: 1px 1px;
 color: #000;
 text-decoration: none;
 font-weight: bold;
 transition: background-size .2s;
}

a:hover {
 background-size: 4px 50px;
 background-position: left center;
 font-weight: bold;
 color: #ffffff;;
}

b {
 color: #91494a;
}

i {
 border-bottom: 1px #91494a solid;
}

p.error, p.success {
 font-weight: bold;
 padding: 10px;
 border: 1px solid;}

p.error {
 background: #ffc0c0;
 color: #900;}

p.success {
 background: #b3ff69;
 color: #4fa000;}
 
form {
 margin: 0 auto;
 width: 300px;
 border-radius: 5px;
 display: grid;}
 
form input, form textarea, form select {
 font-family: "Oldenburg", serif;
 letter-spacing: 1px;
 color: #000;
 background: none;
 padding: 6px;
 margin: 5px 0px 10px 0px;
 border: 1px solid #91494a;
 background-color: #eeeeee;
 border-radius: 5px;
 position: center;}
 
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select, textarea {
 display: block;
 border-radius: 5px;
 box-sizing: border-box;
 width: 100%;
 padding: 6px;}
 
input[type="submit"],
input[type="reset"] {
 background-color: #ac813c;
 width: 100px;
 gap: 10px;
 margin: 0px auto;
 border: none;
 border-radius: 5px;
 font-weight: bold;
 font-size: 18px;
 font-family: "Courier New", Courier, monospace;
 color: white;
 margin-top: 0px;
 padding: 5px;
 text-align: center;
 cursor: pointer;}
 
input[type="submit"]:hover,
input[type="reset"]:hover {
 background-color: #91494a;}