/*WELCOME TO THE CSS STYLESHEET*/
    
    
    * {
  box-sizing: border-box;
}

    /*This is the CSS for the body of the site!*/
body {
    background-image: url('https://web.archive.org/web/20231113014944im_/https://www.foollovers.com/mat/plaid/aa14-bg-grid.gif');
    background-size: repeat;
    background-attachment: fixed;
    text-align: center;
    font-family: 'Outfit';
    font-size: 15px;
    color: #38b4c9;
    margin: 8px;
}

    /*This is the CSS for the font on the site!*/
@font-face {                  
font-family: 'pirkkala';
src: url('https://horsegirlzonline.neocities.org/Fonts/pirkkala.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} 

@font-face {
  font-family: 'Outfit';
  src: url('https://horsegirlzonline.neocities.org/Fonts/outfit-v15-latin-regular.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
}

/*This is the CSS for the header of the site!*/
header {
    background-image: url('https://izzzyzzz.neocities.org/Assets/HomepageAssets/WebsiteHeader.gif');
    background-size: cover;
    background-position: center;
    border: 4px solid;
    border-color: #08c2bf;
    border-radius: 10px;
    width: 800px;
    height: 150px;
    margin-top: 15px !important;
    margin: auto;
    background-color: #AFFAE7;
}

/* Navigation bar */
.navbar {
    border: 5px double;
    border-color: #08c2bf;
    border-radius: 10px;
    width: 800px;
    height: 45px;
    margin-top: -20px !important;
    margin: auto;
    display: flex;
    background-color: #AFFAE7;
}

/* Navigation bar links */
.navbar a {
  color: white;
  padding: 0px 20px;
  text-align: center;
  margin: auto;
  margin-left: -4px;
  margin-top: -7px;
}

/*THIS IS FOR THE NAVBAR BUTTONS SIZING AND ANIMATION*/
    .homebutton { position: relative; top: 1px;
    transition: transform .2s;}
    .homebutton:hover{
    transform: scale(1.5);
}
    .blogbutton { position: relative; top: 1px;
    transition: transform .2s;}
    .blogbutton:hover{
    transform: scale(1.5);
}
    .stuffbutton { position: relative; top: -2px;
    transition: transform .2s;}
    .stuffbutton:hover{
    transform: scale(1.5);
}
    .shrinesbutton { position: relative; top: 2px;
    transition: transform .2s;}
    .shrinesbutton:hover{
    transform: scale(1.5);
}
    .sitemapbutton { position: relative; top: 3px;
    transition: transform .2s;}
    .sitemapbutton:hover{
    transform: scale(1.5);
}
  

/* Site Container*/
.container {  
  display: flex;
  flex-wrap: wrap;
  flex-direction: column
}

    /*This is the CSS for the main area of the site!*/
    .main {
    margin-top: 10px !important;
    width: 800px;
    height: 890px;
    padding: 10px;
    margin: auto;
    flex: 100;
    border: 5px double;
    border-color: #08c2bf;
    background-color: #AFFAE7;
    border-radius: 10px;
}

    /*This flex container holds the top 2 boxes!*/
.row1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

/*This flex container holds small box headers!*/
.boxheading {
    border: 1px solid;
    border-radius: 5px;
    border-color: #08c2bf;
    background: linear-gradient(0deg,rgba(92, 219, 217, 1) 0%, rgba(156, 255, 253, 1) 50%, rgba(92, 219, 217, 1) 100%);
    color: #FFFFFF;
    font-family: 'pirkkala';
    font-size:13.5pt;
    text-shadow: 2px 2px 2px #07615F;
    text-align: center;
    padding: 5px;
    margin: -10px;
    flex-shrink: 0;
}

/*This centers the text in each box!*/
.boxtextcenter {
  margin-top: 13px;
    padding: 15px;
}

.alignstatus {
  display:flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

.statusquestion {
  border: 1px double;
  border-color: #08c2bf;
  border-radius: 30px;
  padding: 8px;
  padding-top:1px;
  padding-bottom:1px;
}

.statusanswer {
  border: 1px double;
  border-color: #08c2bf;
  background-color: #c2f0d0;
  border-radius: 30px;
  padding: 8px;
  padding-top:1px;
  padding-bottom:1px;
}

.box1 {
    margin-top: 10px !important;
    width: 350px;
    height: 230px;
    padding: 10px;
    border: 5px double;
    border-color: #08c2bf;
    background-color: #d6ffe2;
    border-radius: 10px;
}

    .box2 {
    margin-top: 10px !important;
    width: 250px;
    height: 230px;
    padding: 10px;
    border: 5px double;
    border-color: #08c2bf;
    background-color: #d6ffe2;
    border-radius: 10px;
}

    /*This flex container holds the middle 3 boxes!*/
.row2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
}

.box3 {
    margin-top: 20px !important;
    width: 360px;
    height: 200px;
    padding: 10px;
    border: 5px double;
    border-color: #08c2bf;
    background-color: #d6ffe2;
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* This is CSS to control the scrollbar! I might need to make seperate color styles for different areas later? */
/* width */
::-webkit-scrollbar {
  width: 9px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #c4f5d3;
  border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(0deg,rgba(92, 219, 217, 1) 0%, rgba(156, 255, 253, 1) 50%, rgba(92, 219, 217, 1) 100%);
  border: 1px solid;
  border-color: #08c2bf;
  background-color: #d6ffe2;
  border-radius: 20px;
}

.box4 {
    margin-top: 20px !important;
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 5px double;
    border-color: #08c2bf;
    background-color: #d6ffe2;
    border-radius: 10px;
}

    /*This flex container holds the bottom 3 boxes!*/
.row3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
}

.box5 {
    margin-top: 20px !important;
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px double;
    border-color: #08c2bf;
    background-color: #d6ffe2;
    border-radius: 10px;
}

.box6 {
    margin-top: 20px !important;
    background-image: url('https://24.media.tumblr.com/64a4136b4ea5e912ff6ef4df61c18efc/tumblr_mw4u3sNW2P1qiidnro1_500.gif');
    background-size: cover;
    background-position: center;
    width: 250px;
    height: 200px;
    padding: 10px;
    border: 3px solid;
    border-color: #08c2bf;
    background-color: #d6ffe2;
    border-radius: 10px;
}

.box7 {
    margin-top: 20px !important;
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px double;
    border-color: #08c2bf;
    background-color: #d6ffe2;
    border-radius: 10px;
}

footer {
    margin-top: 10px !important;
    width: 800px;
    height: 40px;
    margin: auto;
    border: 5px double;
    border-color: #08c2bf;
    background-color: #AFFAE7;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}