@font-face {
    font-family: "Nunito-Sans";
    src: url("../fonts/NunitoSans-Italic-VariableFont_YTLC\,opsz\,wdth\,wght.ttf"),
    url("../fonts/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf");
    font-weight: normal;
    font-size: normal;
}

*{

    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

body{

    display: block;
    position: relative;

    min-height: 100%;
    
    
    background-color: rgb(49, 34, 34);
    
    

}


.center-section{

    margin: 5rem auto;

   

}

.center-div{

    background-color: rgb(255, 34, 89);

    margin: 5rem 5em;
    margin-left: 5em;
    
    min-width: 30%;
    
    justify-self: center;

    display: flex;

    flex-direction: row; 
    
    justify-content: space-evenly;

    flex-wrap: nowrap;

    
    
    gap: 20px;

}

.bottom-div{

    min-width: 10rem;
    justify-self: center;
    

}

.left-nav{

    
    max-width: 4090rem;
    min-width: 15%;

    border-radius: 50px;

    justify-content: center;
    

}

.left-nav li a{

    font: 1.3em Nunito-Sans;
    font-weight: 1000;
    
    margin: 15px;
    margin-bottom: 2rem;

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

    white-space: nowrap;
    
    text-overflow: ellipsis;
    
    font-size: 16px;

}

#media-monkey-ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    margin: 10px;
}

#media-monkey{

    display: flex;
    background-color: #FFFFFF;
    align-self: center;

    justify-self: center;


}

#media-monkey-h1{

    color: white;
    text-decoration: underline orange;

}

#bills{

  background: darkcyan;
  border: 2px solid lightblue;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  min-height: 40px;
  outline: 0;
  padding: 12px 14px;
  text-align: center;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  text-decoration: none;

  margin-bottom: 1px;
}

#bills:hover,
#bills:active {
  background-color: initial;
  background-position: 0 0;
  color: white;
}

#bills:active {
  opacity: .5;
}


.right-nav{
    
    max-width: 40%;
    min-width: 15%;

    margin-right: 20px;

    
   
    

    display: flex;
    flex-direction: column;
    align-self: stretch;

}

.right-nav img{
    max-width: 100%;
}

.right-nav li, .right-nav .blinkies{

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

   

}

.left-nav ul, .right-nav ul, .center-div ul{

    list-style-type: none;
    

}


.middle-card{

    max-width: 70rem;
    min-width: 50rem;

    margin: 0px auto;
    padding: 0px 5rem;
    padding-bottom: 5rem;

   
    
    

    background-color: seashell;
    

    font-family: Nunito-Sans;
    

    font-size: 1.2em;

}

.middle-card button{
    border: 0px;
}
.middle-card button:hover{
    cursor: pointer;
}

.middle-card p{

    max-width: 50rem;
    
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;

}

.favourites-card{

    display: flex;
    gap: 5rem;
    flex-wrap: wrap;

}
.favourites-card a{
    text-decoration: none;
    color:  rgb(255, 34, 89);
}

.second-row{

    background-color: #FFFFFF;
    max-width: 10rem;
    transition: transform 0.3s ease;

}


.quotes{

    
    margin: 60px auto;
    margin-bottom: 8rem;


    border-bottom: 2px solid rgb(58, 214, 97);

    

}

.quotes a{
    text-decoration: none;
    color:  rgb(76, 0, 255);
}


.button {
  background: purple;
  border: 1px solid white;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  min-height: 40px;
  outline: 0;
  padding: 12px 14px;
  text-align: center;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  text-decoration: none;
}

.button:hover,
.button:active {
  background-color: initial;
  background-position: 0 0;
  color: white;
}

.button:active {
  opacity: .5;
}


footer{
    
}

.footer-ul{

    display: flex;

    justify-content: center;

    list-style-type: none;



}

.footer-ul button{
    
    height: 100%;
   
    
    padding: 0px;
    margin: 0px;

    cursor: pointer;
    
}