/* 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." */

html, body {
  height:100%;
}

body {
background-image: url(/images/wallpaper.png);
  color: black;
  font-family: Verdana;
  height:100%;
}

a {
    margin-top: -5px;
    margin-bottom: -5px;
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-size: 18px;
    font-style: normal; 
}

h1 {
      font-family: "Freckle Face", system-ui;
    font-weight: 400;
    font-size: 70px;
    font-style: normal;
    color: white;
}

h2 {
    font-family: "Freckle Face", system-ui;
    font-weight: 400;
    font-size: 45px;
    font-style: normal;
    color: black;
    margin-top: 10px;
}

h3 {
    font-family: "Freckle Face", system-ui;
    font-weight: 400;
    font-size: 45px;
    font-style: normal;
    color: silver;
    margin-top: 10px;
}

p {
    margin-top: -5px;
    margin-bottom: -5px;
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-size: 18px;
    font-style: normal; 
    color: black;
}

.indexText
{
  font-size: 30px;
}

.main {
width: 100%;
display: flex;
justify-content: space-between; 
}

.start {
  width: 100%;
display: flex;
justify-content: space-between; 
height:100%
}

.sidebar {
  width: 15%;
  height: 1200px;
  background-image: linear-gradient(45deg, gray, silver); 
  text-align: left;
  padding-left: 20px;
  margin-top: -40px;
}

.mainContent {
  width: 70%;
  margin-right: 6%;
}

.box {
background-image: url(https://img.magnific.com/premium-photo/top-view-white-paper-background-texture-seamless-square-texture_463999-4365.jpg?semt=ais_hybrid&w=740&q=80);
  height: 400px;
  width: 57%;
  overflow: auto;
  margin-bottom: 10px;
  text-align: center;
  transform: rotate(-5deg);
  z-index: 5; 
  padding-left: 20px;
  padding-right: 20px;
}

.box2 {
background-image: url(https://img.magnific.com/premium-photo/top-view-white-paper-background-texture-seamless-square-texture_463999-4365.jpg?semt=ais_hybrid&w=740&q=80);
  height: 400px;
  width: 70%;
  overflow: auto;
  margin-bottom: 10px;
  text-align: center;
  transform: rotate(7deg);
  z-index: 5; 
    padding-left: 20px;
  padding-right: 20px;
}

.container {
  background-image: url(https://img.magnific.com/premium-photo/top-view-white-paper-background-texture-seamless-square-texture_463999-4365.jpg?semt=ais_hybrid&w=740&q=80);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  width: 33%;
  transform: rotate(4deg);
}


.badgesBar {
  background-color: red;
  width: 80%;
  height: 50px;
  transform: rotate(4deg);
  border-radius: 10px;
}

#wikiframe {
  -moz-transform: scale(0.75);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.75);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.75);
  -webkit-transform-origin: 0 0; 
}