html {
  background-color: #F2850B;
}

@font-face {
  font-family: FA1;
  src: url(homepageType/FA1.woff2);
}

@font-face {
  font-family: FA2;
  src: url(homepageType/FA2.woff2);
}

@font-face {
  font-family: FA3;
  src: url(homepageType/FA3.woff2);
}

@font-face {
  font-family: FA4;
  src: url(homepageType/FA4.woff2);
}

@font-face {
  font-family: FA5;
  src: url(homepageType/FA5.woff2);
}

@font-face {
  font-family: FA6;
  src: url(homepageType/FA6.woff2);
}

@font-face {
  font-family: FA7;
  src: url(homepageType/FA8.woff2);
}

@font-face {
  font-family: FA9;
  src: url(homepageType/FA9.woff2);
}

@font-face {
  font-family: fabasicyear;
  src: url(homepageType/FA_basicYear.woff2);
}

@font-face {
  font-family: fabasicyear;
  src: url(homepageType/fa-objects.woff2);
}


@font-face {
  font-family: honey;
  src: url(honey.woff2);
}

/*** Works on common browsers ***/
::selection {
    /* background-color: yellow; */
}

body {
  font-family: honey;
  font-size: 2.5em;
}

#test222 {
  z-index: -999;
  margin-bottom: 0;
}

#everything {
  display: flex;
  flex-wrap: wrap;
  /* display: block; */
}

#collection_1 {
  font-family: FA1;
  text-align: center;
}

#collection_1container {
  font-family: FA1;
}

#collection_2container {
  font-family: FA2;
}

#collection_3container {
  font-family: FA3;
}

#collection_4container {
  font-family: FA4;
}

#collection_5container {
  font-family: FA5;
}

#collection_6container {
  font-family: FA6;
}

#collection_7container {
  font-family: FA7;
}

#collection_8container {
  font-family: FA9;
}

#collection_2 {
  font-family: FA3;
  text-align: center;
}
#collection_3 {
  font-family: FA5;
  text-align: center;
}

.collectionContainers {
  border-top: solid;
}

#description {
  width: 60%;
    font-size: 30px;
}

.email {
/*  margin-left: 20px;*/
  /* font-size: 1.3em; */
    font-size: 30px;
}

#borderTopAbout {
  border-top: solid;
  width: 99vw;
  margin-top: 0px;
}

.titleButtons {
  float: right;
}

.workshops {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}


/* FOR DESKTOP SCREENS */
@media only screen and (min-width: 768px) {


#info {
  display: block;
  width: 99vw;
  /* min-width: 350px; */
  margin-bottom: 20px;
  margin-top: 20px;
  padding-top: 5px;
  font-size: 1.3em;
  font-family: honey;
}

.infoButtons:hover {
  /* color: #00A16C; */
}

#contents {
  display: block;
  width: 99vw;
  min-width: 350px;
}


#navigation {
  width: 100%;
  min-width: 360px;
  margin-bottom: 20px;
}

.workshops {
  text-transform: lowercase;
  font-size: 10vw;
  width: 100%;
}

.workshops:hover {
}

a {
  text-decoration: none;
  color: black;
  margin-top: 0px;
  margin-bottom: 0px;
}

.infoButtons {
}

}

#collection_1container:hover {
background-image: url(scribbles/s1.svg);
 background-size: cover;
 background-position: bottom center, 50%, 50%;

}

#collection_2container:hover {
  background-image: url(scribbles/s3.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;

}

#collection_3container:hover {
  background-image: url(scribbles/s4.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;

}

#collection_4container:hover {

  background-image: url(scribbles/s2.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;
}

#collection_5container:hover {
  background-image: url(scribbles/s5.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;

}

#collection_6container:hover {
  background-image: url(scribbles/s7.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;

}

#collection_7container:hover {

  background-image: url(scribbles/s6.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;
}

#collection_8container:hover {

  background-image: url(scribbles/s6.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;
}

#collection_15container:hover {

  background-image: url(scribbles/s1.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;
}

#collection_16container:hover {

  background-image: url(scribbles/s2.svg);
   background-size: cover;
   background-position: bottom center, 50%, 50%;
}

#fullautohp:hover {
  text-decoration: underline;
}

#aboutp:hover {
  text-decoration: underline;
}

#toolsp:hover {
  text-decoration: underline;
}

#collectionsTitle:hover {
  text-decoration: underline;
}










/* FOR MOBILE SCREENS */

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

#info {
  display: block;
  width: 91vw;
  min-width: 350px;
  margin-bottom: 20px;
  padding-top: 5px;
}

.infoButtons:hover {
  /* color: #00A16C; */
}

#contents {
  display: block;
  width: 91vw;
  min-width: 350px;
  padding-top: 5px;
}


#navigation {
  /* width: 30vw; */
  min-width: 360px;
  margin-bottom: 20px;
}

.workshops {
  /* text-transform: uppercase; */
}

.workshops:hover {
  /* color: #00A16C; */
}

a {
  text-decoration: none;
  color: black;
  margin-left: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

}




/* IPHONE X SCREEN SIZE */

@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {

  #info {
    display: block;
    width: 95vw;
    /* min-width: 350px; */
    margin-bottom: 20px;
    padding-top: 5px;
    /* text-align: center; */
  }

  .infoButtons {
    margin-left: 10px;
  }

  .infoButtons:hover {
    /* color: #0FA915; */
  }

  #contents {
    display: block;
    width: 95vw;
    min-width: 350px;
    padding-top: 5px;
    text-align: center;
  }


  #navigation {
    min-width: 360px;
  }

  .workshops:hover {
    /* color: #0FA915; */
  }

  a {
    text-decoration: none;
    color: black;
    margin-left: 10px;
  }





}