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

body {
  background-color: #ff90bf;
  color: white;
  font-family: FairyPlayground;
  
 
}


@font-face { 
    font-family: FairyPlayground; /* set name */
  src: url(FairyPlayground-8MeWA.ttf); /* url of the font */
}

p {
  font-family: FairyPlayground; /* use font */
}
 
 p{
	font-size: 110%;
	font-family: FairyPlayground;
	color: black
	line-height: 125%;
	padding: 10px;
	padding-top: 15px;
	background-color: #fbfbd1;
	outline: 1px solid red;
}

p a{
	color:blue;
	text-decoration: none;
}
p a:hover{
	color:purple;
	text-decoration: underline;
}

UL{
	font-size: 110%;
	font-family: FairyPlayground;
	color: black
	line-height: 125%;
	padding-right: 50px;
	padding-left: 50px;
	background-color: #fbfbd1;
	outline: 2px solid red;
}

.myClass{
	text-align: left;
	outline: 2px purple dashed;
}
 
 /* Style the top navigation bar */
.navbar {
  overflow: hidden; /* Hide overflow */
  background-color: #e1007d; /* Dark background color */
  border: 2px solid #e1007d;
  border-radius: 12px;
  padding: 5px;
}

/* Style the navigation bar links */
.navbar a {
  float: left; /* Make sure that the links stay side-by-side */
  display: block; /* Change the display to block, for responsive reasons (see below) */
  color: white; /* White text color */
  text-align: center; /* Center the text */
  padding: 14px 20px; /* Add some padding */
  text-decoration: none; /* Remove underline */
}

/* Right-aligned link */
.navbar .right {
  float: right; /* Float a link to the right */
}

/* Change color on hover/mouse-over */
.navbar a:hover {
  background-color: #c64f91; /* Grey background color */
  color: black; /* Black text color */
  border: 2px solid #c64f91;
  border-radius: 12px;
  padding: 5px;
}

* {
  box-sizing: border-box;
}

.container {
  padding: 64px;
}

/* Clear floats */
.row:after {
  content: "";
  display: table;
  clear: both
}

/* 2/3 column */
.column-66 {
  float: left;
  width: 66.66666%;
  padding: 20px;
}

/* 1/3 column */
.column-33 {
  float: left;
  width: 33.33333%;
  padding: 20px;
}

/* Add responsiveness - make the columns appear on top of each other instead of next to each other on small screens */
@media screen and (max-width: 1000px) {
  .column-66,
  .column-33 {
    width: 100%;
    text-align: center;
  }
}