@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

  img{
    width: 100%;
  }
body{cursor: url(https://cur.cursors-4u.net/anime/ani-11/ani1074.cur), auto !important;}
{}

a{cursor: url(https://cur.cursors-4u.net/anime/ani-11/ani1073.cur), auto !important;
text-decoration: underline;
text-decoration-color: #e6e6ff;
}

.page{
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-areas:
        "f w w w m"
        "f p p p e"
        "f p p p e"
        /* "b b b b b" */
    ;
}

* {
    font-family: Helvetica;
    color: black;
    text-align: center;
}

#tittles {
    padding: 1em;
    /* background-color: #B8336A; */
    background-color: white;
    grid-area: f;
    text-align: centered;
    /* position: fixed; */
}
/* #tittle-space{
  height: 40px;
  background-color: red
} */
.sticky-open-container{
  /* background-color: green; */
  height: 3200px;
  width: 100%;
}
.open{
  position: sticky;
  height: 300px;
  /* background-color: red; */
  top:5em;
}
/* .open:hover{
  border-bottom-color: #80dfff;
  border-bottom-width: 10px;
} */

.sticky-bermuda-container{
  /* background-color: blue; */
  height: 1100px;
  width: 100%;
}
.bermuda{
  position: sticky;
  height: 150px;
  /* background-color: yellow; */
  top:5em;

}
/* .bermuda:hover{
  border-bottom: solid;
  border-color: #80ff80;
  border-width: 10px;
} */

/* container for the main tittle */
#wood {
    /* background-color: #726DA8; */
    background-color: white;
    font-size: 30px;
    grid-area: w;
    text-align: center;
    padding-top: -10px;
}

/* #wood:hover{
  border-style: solid;
  border-color: #ff884d;
  border-width: 10px;
} */
h1{
  color: black;
  margin-top: : 20px;
}

/* media container stuff */

/* container of media */
#media {
    background-color: white;
    grid-area: m;
    text-align: right;
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}
/* trying to set up how the two logos appear in the media div */
#s {
    /* background-color: green; */
    grid-area: s;
}
#mail {
    /* background-color: blue; */
    padding-right: 4px;
    grid-area: t;
    align-self: flex-start;
    cursor: url(https://cur.cursors-4u.net/anime/ani-11/ani1068.cur), auto !important;
}
#insta {
    /* background-color: yellow; */
    padding-right: 5px;
    grid-area: i;
    cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat993.cur), auto !important;
}

 /* everything to do with the picture galerie */

 /* main container */
#pics {
    background-color: white;
    /* background-color: #00cc66; */
    grid-area: p;
    column-count: 3;
    column-gap: 10px;
    /* z-index: 2; */
    /* flex-direction: row; */
    /* display: flex;
    flex-wrap: wrap;
    /* flex-basis: 33.3334%; */
}

/* had to make bloody fucken colums and they won't even stick to top. fuck */
.column-1 {
    /* background-color: red; */
    vertical-align:top;
    display: inline-block;
    flex-basis: 33.3334%;
    padding-top: 10px;
}
.column-2 {
    /* background-color: yellow; */
    vertical-align:top;
    /* display: inline-block; */
    flex-basis: 33.3334%;
    padding-top: 10px;
}
.column-3 {
    /* background-color: blue; */
    vertical-align:top;
    display: inline-block;
    flex-basis: 33.3334%;
    padding-top: 10px;
}

/* individual photos */
.pic{
  display: block;
  margin-bottom: 10px;
}

.bpic{
  display: block;
  margin-bottom: 10px;
}

/* when mouse hovers */

.o-light:hover .pic{
    background-color: #80dfff;
    box-shadow: 10px 10px #80dfff, -10px -10px #80dfff, -10px 10px #80dfff, 10px -10px #80dfff;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='49' height='59' viewport='0 0 100 100' style='fill:black;font-size:29px;'><text y='50%'>🌈</text></svg>") 16 0,auto; /*!emojicursor.app*/
}

.o-light:hover > div.open{
    box-shadow: 10px 10px #80dfff, -10px -10px #80dfff, -10px 10px #80dfff, 10px -10px #80dfff;
    text-shadow: 10px 10px #80dfff, -10px -10px #80dfff, -10px 10px #80dfff, 10px -10px #80dfff;
}

#b-light:hover .bpic{
    box-shadow: 10px 10px #80ff80, -10px -10px #80ff80, -10px 10px #80ff80, 10px -10px #80ff80;
    background-color: #80ff80;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewport='0 0 200 200' style='fill:black;font-size:24px;'><text y='50%'>☀️</text></svg>") 10 0, auto;
}


/* WOOOOOOO GAME  */


#mini-game {
    /* background-color: #C490D1; */
    background-color: white;
    grid-area: e;
    padding: 1em;
    background-image: url(https://art.pixilart.com/de16c2b83e43dc5.gif);
    /* background-image: url(https://i.gifer.com/XVnx.gif); */
    background-repeat: repeat;
    background-position: top center;
    background-size: 40em;
    text-align: centered;
}

#text{
  /* border-style: dashed;
  border-color: #ffe6ff;
  border-radius: 50px; */
}

/* .footer{
  grid-area: b;
  position:fixed;
  height: 200px;
  background-image: url(https://static.wikia.nocookie.net/minecraft_gamepedia/images/6/67/Tall_Seagrass_JE1_BE2.gif/revision/latest/scale-to-width-down/225?cb=20180803125350); (wavy grass thing)
  z-index: 10;
} */















@media screen and (max-width:1080px) {

  .page{
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
          " w "
          " p "
          " m "
      ;
  }

  h1{
    padding: 0px;
    margin: 0px;
    font-size: 30px;
  }

  #pics {
      background-color: none;
      grid-area: p;
      column-count: 3;
      column-gap: 10px;
      z-index: 2;
  }
  .pic{
    display: block;
    margin-bottom: 0px;
    margin-top: 1px;
    padding: 0px;
  }
  #media {
      position: fixed;
      background-color: none;
      grid-area: m;
      display:flex;
      flex-direction: row;
      justify-content: center;
  }


}