/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* ====================================
   WELCOME BOX
    ==================================== */
.welcome-box {
  display: flex;
  border-radius: 25px;
  background-color: #B6889E;
  padding: 20px;
  position: absolute;
  top: 40%;
  left: 40%;
  width: 350px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1,.welcome-box {
  justify-content: center;
  align-items: center;
  font-family: "Pixelify Sans", sans-serif;
  color: black;
}

/* ====================================
   LOG IN BUTTON
    ==================================== */
.welcome-button {
  background-color: #82748B;
  color: white;
  font-size: 15px;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.welcome-button:hover {
  background-color: #706377;
}

.welcome-button:clicked {
  background-color: #433c47;
}



:root {
  --header-image: url('https://i.pinimg.com/originals/f5/4a/63/f54a63a5866117232aa98c6d234882b2.jpg');

/* colors */
  --content: #43256E;
}

/* ====================================
   CUSTOM FONTS
    ==================================== */

 @font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

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

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

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
  font-style: italic;
  font-weight: bold;
}

/* ====================================
   BODY
    ==================================== */

body {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  background-color: black;
  background-size: 65px;
  color: #E3D6E7;
}

* {
  box-sizing: border-box;
}

/* ====================================
   CONTAINER
    ==================================== */
#container {
max-width: 900px;
margin: 0 auto;
}

#container a {
color: #ED64F5;
font-weight: bold;
text-decoration:none;
}

/* ====================================
   HEADER
    ==================================== */
#header {
width: 100%;
background-color: #5e4e8c;
height: 150px;
}

/* ====================================
   NAV
    ==================================== */
#navbar {
height: 40px;
background-color: #362D3B;
/* navbar color */
width: 100%;
}

#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}

#navbar li {
padding-top: 10px;
}

/* ====================================
   NAV LINKS
    ==================================== */
#navbar li a {
color: #E3D6E7;
/* navbar text color */
font-weight: 800;
text-decoration: none;
}

#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}

/* ====================================
   DISPLAY
    ==================================== */
#flex {
display: flex;
}

/* ====================================
   SIDEBAR
    ==================================== */
aside {
background-color: #82748b;
width: 200px;
padding: 20px;
font-size: smaller;
}


/* ====================================
   MAIN
    ==================================== */
main {
background-color: #B6889E;
flex: 1;
padding: 20px;
order: 2;
}

/* ====================================
   ORDER ELEMENTS
    ==================================== */

*/ #leftSidebar {
order: 1;
}


footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
}

/* ====================================
   TEXT STYLES
    ==================================== */

h1,
h2,
h3 {
color: #E3D6E7;
}

h1 {
font-size: 25px;
}

strong {
/* this styles bold text */
color: #ED64F5;
}

/* ====================================
   BOX
    ==================================== */
.box {
background-color: #13092D;
border: 1px solid #ED64F5;
padding: 10px;
}

/* ====================================
   MEDIA QUERY
    ==================================== */

@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}

aside {
width: 100%;
}

/* ====================================
   RESPONSIVE ORDER
    ==================================== */
    
main {
order: 1;
}

#leftSidebar {
order: 2;
}

#rightSidebar {
order: 3;
}

#navbar ul {
flex-wrap: wrap;
}
}