/* clears default browser css*/
* {
  box-sizing: border-box; /* Makes sizing more predictable */
  margin: 0;
  padding: 0;
}


/*site background*/
body {
    background-image: url(../images/backstar-background.gif)
}

p {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h3 {
    color:rgb(243, 246, 248);
    text-shadow:  0px 0px 5px rgba(103, 172, 241, 0.867);

    
}

a {
    color: rgb(186, 215, 239);
}

a:hover {
     color:rgb(227, 233, 238);
     text-shadow:  0px 0px 3px rgba(225, 228, 238, 0.867);
    
}

.unicorn {
    position: absolute;
    margin-top: 500px;
    margin-left: -85px;
}

nav {
    background-color: none;
    background-image: url("../images/nav-column.png");
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;

    float: left;

    width: 260px;
    height: 900px;
    margin-left: 9%;
    margin-right: -5px;
    padding-left: 73px;
    padding-top: 99px;
    margin-top: 200px;

    line-height: 38px;
}

.webring {
    position: absolute;
    background-color: rgb(64, 91, 144);
    width: 200px;
    height: 100px;
    margin-left: 140px;
    margin-top: 70px;

    padding: 20px;
    text-align: center;

}

nav img:hover {
    background-color:rgb(0, 136, 255);
    box-shadow: 0px 0px 8px 3px rgba(0, 30, 138, 0.867);
}


.flexbox {
 background-color: #0062f5;
background-image: url("../images/ss085.gif");
    box-shadow: 1px 1px 50px 30px rgba(0, 4, 35, 0.545);
    width: 805px;
    height: 925px;
    padding: 15px;
    margin-top: 100px;

    display: flex;
    flex-wrap: wrap;
    float: left;

    border: 20px solid rgb(13, 22, 70);
    border-image: url("../images/towel-cloth-napkins-blue-hand-painted-blue-circle-c95f82b99f75a8c5bec4c68d3f00e395.png") 220 round;
    border-image-outset: 13px;
}

.intro {
    background-color: rgb(175, 193, 220);
    color: rgb(38, 58, 98);
    width: 430px;
    height: 100px;
    margin-top: 30px;

    border: 12px solid transparent;
    border-image: url("../images/lace-border.png") 36 round;
    border-image-outset: 10px;
    text-align: center;
}

.other-worlds {
    background-color: #0072eb;
     background-image: url("../images/snowflake-background.webp");
     height: 240px;
     width: 440px;
     margin-left: -7px;
     margin-top: -225px;
     padding-top: 20px;

     display: flex;
     flex-wrap: wrap;

     justify-content: center;

        border: 3px dotted rgb(175, 193, 220);
    
}

.world-links {
    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     line-height: .2;


     justify-content: center;
}


.my-button {
    background-color: rgb(9, 43, 164);
    color: rgb(129, 148, 213);
    width: 410px;
    height: 100px;
    margin-top: 9px;
    margin-left: 8px;

    text-align: center;
    padding-top: 40px;
}


.curiosities {
    background-color: rgb(132, 189, 240);
    background-image: url("../images/dark-glitter-background.jpg");
    height: 260px;
    width: 270px;
    margin-left: -340px;
    margin-top: 147px;
    padding-top: 10px;

    display: flex;
    flex-direction: column;
    text-align: center;

   
    border: 60px solid transparent;
    border-image: url("../images/blue-filigree-frame-border_53876-115604-removebg-preview.png") 100  round;
    border-image-outset: 17px;
    
}

    .curio-links {
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

.find-trinkets {
   background-color: rgb(132, 189, 240);
        background-image: url("../images/dark-glitter-background.jpg");
   height: 360px;
   width: 270px;
    margin-top: 25px;
   
   margin-left: 30px;

   
    display: flex;
    flex-direction: column;
    text-align: center;

    border: 60px solid transparent;
    border-image: url("../images/blue-filigree-frame-border_53876-115604-removebg-preview.png") 110  round;
    border-image-outset: 17px;
   
}

.find-links {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;

}

.create-trinkets {
    background-color: rgb(132, 189, 240);
    background-image: url("../images/snowflake-background.webp");
    height: 435px;
    grid-row: 2;
    width: 270px;
    margin-left: 110px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
    
    border: 3px dotted rgb(175, 193, 220);
}

.create-links {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
}