@import url('https://fonts.googleapis.com/css?family=Ledger|Licorice');

body {
 background-color: #ffffff;
 background: url('https://fan.yahuh.co/edm/i/bg.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
 background-attachment: fixed;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: justify;
 color: #000000;
 font-family: "Ledger", serif;
 font-size: 12px;
 margin: 0 auto;
}

.layout {
 width: 600px;
 margin-top: 0px;
 background-color: #ffffff;
 align-content: center;
 justify-content: center;
}

.main {
 grid-area: main;
 align-content: center;
 justify-content: center;
 background-color: #ffffff;
 font-family: "Ledger", serif;
 font-size: 12px;
 text-align: justify;
 padding: 10px;
 color: #000000;
 font-weight: none;
 margin-top: -40px;
}

.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: "Licorice", serif;
 margin-bottom: 1px;
 line-height: 20px;
 text-align: left;
 font-size: 30px;
 font-weight: bold;
 color: #5efc02;
 text-shadow: #c0c0c0 1px 0 10px;
 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;
 line-height: 10px;
 font-size: 8px;
}

:root {
  --mainColor: #ececec;
}

a {
  color: inherit;
  text-decoration: none;
}

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

a:hover {
  background-size: 0 3px, 100% 3px;
}

b {
 color: #ff5c9d;
}

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