/* 
      .--..--..--..--..--..--.
    .' \  (`._   (_)     _   \
  .'    |  '._)         (_)  |
  \ _.')\      .----..---.   /
  |(_.'  |    /    .-\-.  \  |
  \     0|    |   ( O| O) | o|
   |  _  |  .--.____.'._.-.  |
   \ (_) | o         -` .-`  |
    |    \   |`-._ _ _ _ _\ /
    \    |   |  `. |_||_|   |
    | o  |    \_      \     |     -.   .-.
    |.-.  \     `--..-'   O |     `.`-' .'
  _.'  .' |     `-.-'      /-.__   ' .-'
.' `-.` '.|='=.='=.='=.='=|._/_ `-'.'
`-._  `.  |________/\_____|    `-.'
   .'   ).| '=' '='\/ '=' |
   `._.`  '---------------'
           //___\   //___\
             ||       ||
             ||_.-.   ||_.-.
            (_.--__) (_.--__)
       

 Insert all your glorious CSS styles below! */
/* knewave-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Knewave';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/knewave-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* kodchasan-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Kodchasan';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/kodchasan-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

nav ul {
   list-style: none;
   display: flex;
   justify-content: center;
   flex-direction: row;
   gap: 20px;
}

nav ul li {
   background-color: dodgerblue;
   padding: 5px;
   border-radius: 5px;   
}

html {font-size: 16px;}

body {
  font-family: 'kodchasan', sans-serif;
  font-weight: false;
  line-height: 1.65;
  text-align: center;
  margin: 0 auto;
}

p {
  font-size: 1.2em;
  text-align: center;
  line-height: 35px;
  color: #00008B; 
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'knewaves', sans-serif;
  font-weight: true;
  line-height: 1.15;
}

h1,
.text-size-h1 {
  font-family: 'Knewave', sans-serif;
  font-weight: 700;
  margin-top: 0;
  font-size: 3.05em;
  color: #f0e33f;
}

h2, 
.text-size-h2 { 
font-size: 2.44em; 
font-family: 'Knewave', sans-serif;
font-weight: 700;
margin-top: 0;
color: #ea9999;
}

h3,
.text-size-h3 { font-size: 1.95em; }

h4,
.text-size-h4 { font-size: 1.56em; }

h5,
.text-size-h5 { font-size: 1.25em; }

.text-caption { font-size: 0.8em; }

small,
.text-small {
  font-size: 0.64em;
}
              

body { 
    background: transparent url(images/title-card.jpg);
    background-repeat: repeat;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

article {
    border: 5px solid rgb(234,153,153);
    border-radius: 2px;
    background-color: rgb(240,227,63);
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 1.5px;
}

ul {
      text-align: center;
      width: 200px;
      margin-left: auto;
      margin-right: auto;
}

aside {
  width: 40%;
  float: center;
  margin: 10px;
  background-color: rgb(240,227,63);
  padding: 10px 20px;
  border: 2px solid #FF0000;
}

html {
  height: 100%
  background-repeat: no-repeat; 
}

.main {
  width: 10%;
  height: auto;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  height: 100%;
  text-align: center; 
}

.container img {
  max-width: 100%;
  max-height: 100%;
}