@import url('https://fonts.googleapis.com/css?family=Yrsa|Luxurious+Script');

body {
 background-color: #ffffff;
 background: url('');
 background-repeat: no-repeat;
 background-position: right bottom;
 background-attachment: fixed;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: justify;
 color: #000000;
 font-family: "Yrsa", serif;
 font-size: 14px;
 margin: 0 auto;
}

.layout {
 width: 400px;
 display: grid;
 grid:
    "main side" auto
    / 400px 100px;
 gap: 4px;
 position: absolute;
 margin-top: -620px;
 margin-left: -840px;
 top: 100%;
 left: 100%;
 z-index: 4;
}

.main {
 grid-area: main;
 align-content: center;
 justify-content: center;
 width: 400px;
 height: px;
 overflow: auto;
 margin: 0px auto;
 padding: 0px;
 border: 0px dashed #ccc;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 font-family: "Yrsa", serif;
 text-align: justify;
 text-transform: none;
 font-weight: none;}

.side {
 grid-area: side;
 padding: 0px;
 border: 0px;
 background-color: none;
 text-align: left;
 color: #ff7500;
 height: 16px;
 letter-spacing: 1px;
 text-transform: uppercase;
 font-weight: none;
 font-size: 16px;
 margin-bottom: -380px;
}

div.class-name {
 position: fixed;
 margin-top: -680px;
 margin-left: -720px;
 top: 100%;
 left: 100%;
 z-index: 0;
}

.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: "Luxurious Script", serif;
 margin-bottom: 1px;
 line-height: 20px;
 text-align: left;
 font-size: 32px;
 font-weight: bold;
 color: #58342c;
 text-shadow: #c0c0c0 1px 0 10px;
 letter-spacing: 2px;
}

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

:root {
  --mainColor: #ececec;
}

a {
 background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
 background-position: 0 100%;
 background-repeat: repeat-x;
 background-size: 3px 3px;
 color: #9a480c;
 text-decoration: none;
}

a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23dfd477' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 3px;
  background-repeat: repeat-x;
  text-decoration: none;
}

b {
 color: #de664a;
 border-bottom: 1px #dfd477 dashed;
}

i {
 border-bottom: 1px #de664a 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: "Yrsa", serif;
 letter-spacing: 1px;
 color: #000;
 background: none;
 padding: 6px;
 margin: 5px 0px 10px 0px;
 border: 1px solid #dfd477;
 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: #de664a;
 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: #9a480c;}