/* fonts */

@font-face {
   font-family: Jungle Rock;
   src: url(fonts/JungleRock.ttf);
}

@font-face {
   font-family: Romance A;
   src: url(fonts/RomanceA.ttf);
}

@font-face {
   font-family: basiic;
   src: url(fonts/basiic.ttf);
}

/* highlight color */

/* copied from w3c schools, advanced selectors  */

::selection {
   background: rgb(255, 192, 203);
}

::-moz-selection {
   background: rgb(255, 192, 203);
}

/* scrollbar */

::-webkit-scrollbar {
   width: 16px;
   height: 12px;
   background: lavender;
}

::-webkit-scrollbar-button {
   height: 16px;
}

::-webkit-scrollbar-track {
   background-color: rgb(255, 229, 229);
   border-radius: 0px;
   width: 0px;
   border: 1px dotted;
}

::-webkit-scrollbar-thumb {
   background: #d6ecf3;
   border: 1px dotted #8f38ff;
   border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
   background: #8f38ff;  
}

/* general website/multi-element styles */

html {
   font-size: 10px;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   background-image: url(images/flowerz.png);
   background-attachment: fixed;
   line-height: 150%;
   font-family: basiic;
   font-size: 1.6rem;
   color: rgb(255, 77, 77);
}

#header, iframe, nav {
   border: 3px double rgb(255, 153, 153);
   background-color: rgb(255, 229, 229);
}

/* containers */

header {
   width: 100%;
   margin: 4rem 0;
   display: flex;
   justify-content: center;
}

#wrapper {
   width: 100%;
   margin: 4rem 0;
   display: flex;
   justify-content: center;
}

#content {
   height: 500px;
   width: 100ch;
}

/* specific elements */

#header {
   padding: 30px;
   font-family: Jungle Rock;
   font-size: 6rem;
}

iframe {
   height: 100%;
   width: 80ch;
   float: left;
   clear: none;
}

nav {
   height: 200px;
   width: 20ch;
   float: left;
   clear: right;
   text-align: center;
}

/* text styles */

a {
   color: rgb(255, 77, 77);
   text-decoration: none;
}

h2 {
   margin: 0;
   background-color: ;
   font-family: Romance A;
}

h3 {
   font-size: 1.8rem;
}