:root {
  /* Background Colors: */
  --background-color: #1cadea;
  --content-background-color: #a6efff;
  --sidebar-background-color: #8fe3ff;

  /* Text Colors: */
  --text-color: #0f6eb1;
  --sidebar-text-color: #1e5a83;
  --link-color: #268bd2;
  --link-color-hover: #2aa198;

  /* Text: */
  --font: "Lexend", serif;
  --heading-font: "Boba Date", serif;
  --font-size: 20px;

  /* Other Settings: */
  --margin: 17.5px;
  --padding: 0.25rem 0.5rem ;
  --border: 4px solid #0977c4; 
  --border-style: solid;
  --round-borders: 8px; 
  --sidebar-width: 250px;
  cursor: url("candyheart.gif"), auto;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Lexend";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  font-size: var(--font-size);

}

.name-title {
  font-weight: bold;
  font-size: 1.6em;
  font-family: var(--heading-font);
  padding: 0.2em;
}

.layout{
  width: 80%;
  display: grid;
  grid-gap: var(--margin);
  grid-template:
    "header header" auto 
    "sidebar main" auto
    "footer footer" auto 
    / var(--sidebar-width) auto;
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-style: var(--border-style);
  border-radius: var(--round-borders);
}

main blockquote {
  background: rgba(255, 255, 255, 1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  border-style: dashed
}

header {
  grid-area: header;
  font-size: 1.1em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  padding: var(--padding);
}

.header-content {
  padding: var(--padding);
  justify-content: center;
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  padding: var(--padding);
  font-weight: bold;
}

.header-image img {
  width: 100%;
  height: auto;
}

aside {
  grid-area: sidebar;
  border: 4px solid #268bd2;
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
  padding: 0.2em var(--padding);
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: rgba(255, 255, 255, 1);
  padding: 1rem;
  margin: 0;
  border-radius: 10px;
  border-style: dashed;
  overflow: hidden;
  text-align: center;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}
 
 footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.90em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}
 
 header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: var(--margin);
  list-style: none;
}

header nav ul li a {
  padding: 0 .5rem;
  display: block;
}
 
* {
  box-sizing: border-box;
}
    
 @font-face {
                font-family: "CrimsonPro-Regular";
                src: url('https://nobodysystem.neocities.org/CrimsonPro-Regular.ttf');
            }

            @font-face {
                font-family: "CrimsonPro-Regular";
                src: url('https://nobodysystem.neocities.org/fonts/CrimsonPro-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: "CrimsonPro-Regular";
                src: url('https://nobodysystem.neocities.org/fonts/CrimsonPro-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: "CrimsonPro-Regular";
                src: url('https://nobodysystem.neocities.org/fonts/CrimsonPro-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }
   @font-face {
                font-family: "Boba Date";
                src: url('https://nobodysystem.neocities.org/fonts/Boba%20Date.otf');
            }

            @font-face {
                font-family: "Boba Date";
                src: url('https://nobodysystem.neocities.org/fonts/Boba%20Date-Bold.otf');
                font-weight: bold;
            }

            @font-face {
                font-family: "Boba Date";
                src: url('https://nobodysystem.neocities.org/fonts/Boba%20Date-Italic.otf');
                font-style: italic;
            }

            @font-face {
                font-family: "Boba Date";
                src: url('https://nobodysystem.neocities.org/fonts/Boba%20Date-Bold%20Italic.otf');
                font-style: italic;
                font-weight: bold;
            }
            
  @font-face {
                font-family: "Lexend";
                src: url('https://nobodysystem.neocities.org/fonts/Lexend-Regular.ttf');
            }