/* BASIC ELEMENT STYLING */
body {
        background-color:  white;
        color:  black;
        font-family: montserrat;
}

a {
        color:  black;
        font-family: 'Montserrat', sans-serif;
        padding: 15px;
        text-decoration: none;
}

a:hover {
        color: black;
        background-image:  radial-gradient(closest-side at 50% 50%, #CFAEF1, white);
}

p {
        font-size: 40px;
        text-align: center;
}

h1 {
        font-family: 'MuseoModerno', cursive;
        font-size: 70px;
        text-align: center;
        margin-top: 300px;
}

hr {
        margin-left: 100px;
        margin-right: 100px;
}

/* HOMEPAGE */
.nav {
        margin: auto;
        margin-top: 50px;
        text-align: center;
}

.title {
        margin: auto;
        text-align: center;
        vertical-align: center;
        width:  80%;
        padding:  10px;
}

.solitude {
        color: white;
        padding: 10px;
}

.solitude:hover{
        background: black;
}

.active {
        color: black;
        background-image:  radial-gradient(closest-side at 50% 50%, #CFAEF1, white);
}

/* CONTENT PAGES */

.smalltitle {
        text-align: center;
        bottom: 0px;
        width: 100%;
}

.paragraphtext {
        max-width: 300px;
        padding: 50px 50px;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 50px;
}

/* POP UP IMAGES */
/* FIND A SAFE SPACE */
.room {
        color: #8367AE;
}

.room:hover:after {
        display: block;
        content: url("../images/room.jpeg");
        height: auto;
        position: fixed;
        left: 5%;
        top: 10%;
}

.park {
        color: #8367AE;
}

.park:hover:after {
        display: block;
        content: url("../images/park.jpeg");
        position: fixed;
        right: 10%;
        top: 20%;
}

.space {
        color: #8367AE;
}

.space:hover:after {
        display: block;
        content: url("../images/space.jpeg");
        height: auto;
        position: fixed;
        left: 5%;
        top: 50%;
}

/* LEARN TO SAY NO */
.alone {
        color: #8367AE;
}

.alone:hover:after {
        display: block;
        content: url("../images/alone.jpeg");
        height: auto;
        position: fixed;
        left: 5%;
        top: 10%;
}
.exhausting{
        color: #8367AE;
}

.exhausting:hover:after {
        display: block;
        content: url("../images/exhausting.jpeg");
        position: fixed;
        right: 10%;
        top: 20%;
}
/* 03 GO ON SOLO DATES*/
.walk {
        color: #8367AE;
}

.walk:hover:after {
        display: block;
        content: url("../images/walk.jpeg");
        position: fixed;
        right: 10%;
        top: 20%;
}

.store {
        color: #8367AE;
}

.store:hover:after {
        display: block;
        content: url("../images/store.jpeg");
        height: auto;
        position: fixed;
        left: 5%;
        top: 30%;
}
/* 04 DO THINGS YOU ENJOY*/
.joy {
        color: #8367AE;
}

.joy:hover:after {
        display: block;
        content: url("../images/joy.jpeg");
        height: auto;
        position: fixed;
        right: 5%;
        top: 20%;
}
.anything {
        color: #8367AE;
}

.anything:hover:after {
        display: block;
        content: url("../images/anything.jpeg");
        position: fixed;
        right: 5%;
        top: 30%;
}
/* 05 ACCEPT ALL EMOTIONS */
.negative {
        color: #8367AE;
}

.negative:hover:after {
        display: block;
        content: url("../images/negative.jpeg");
        position: fixed;
        left: 5%;
        top: 20%;
}
.ups {
        color: #8367AE;
}

.ups:hover:after {
        display: block;
        content: url("../images/ups.jpeg");
        position: fixed;
        left: 5%;
        top: 50%;
}
/* 06 BE CONTENT */
.love {
        color: #8367AE;
}

.love:hover:after {
        display: block;
        content: url("../images/love.jpeg");
        height: auto;
        position: fixed;
        left: 5%;
        top: 10%;
}

.hate {
        color: #8367AE;
}

.hate:hover:after {
        display: block;
        content: url("../images/hate.jpeg");
        position: fixed;
        right: 10%;
        top: 20%;
}

.content {
        color: #8367AE;
}

.content:hover:after {
        display: block;
        content: url("../images/content.jpeg");
        height: auto;
        position: fixed;
        left: 5%;
        top: 50%;
}

/* MEDIA QUERIES */
/* Tablet breakpoint */
@media (min-width: 768px) {
  h1 {
    font-size: 80px;
  }
  p {
        font-size: 50px;
  }
  a {
        padding: 30px;
  }
  .paragraphtext {
        max-width: 400px;
        margin-top: 100px;
        margin-bottom: 100px;
  }
}

/* Desktop breakpoint */
@media (min-width: 992px) {
  h1 {
    font-size: 90px;
  }
  p {
        font-size: 60px;
  }
  a {
        padding: 40px;
  }
  .paragraphtext {
        max-width: 500px;
        margin-top: 150px;
        margin-bottom: 150px;
  }
}

/* Wide screen breakpoint */
@media (min-width: 1200px) {
  h1 {
    font-size: 100px;
  }
  p {
        font-size: 70px;
  }
  a {
        padding: 60px;
  }
  hr {
        margin-left: 200px;
        margin-right: 200px;
  }
  .paragraphtext {
        max-width: 600px;
        margin-top: 200px;
        margin-bottom: 200px;
  }
}