/* 

All you need to know is that: 

HTML is the markup language that creates the content of the website like, headings,images and so on. Essentially the skeleton of the website.
CSS is the markup language that's used to make things look pretty.
Javascript add's special custom features that are custom to whatever the user needs.

Anything that's in green like this are called "Comments" and aren't included on the website and only behind the code. 

*/

/* Pretty font, The font isn't the same as Lulu but it looks generally the same. I had to choice to use Lulu but i didn't as i didn't want to forget about it and you be prosecuted as the font can only be used for personal use and not commercial.  */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
/* These are the colours i chose for the website and the words beginning like --primary are the name i gave them. */
:root {
  --primary: #73a263;
  --secondary: #9dbd91;
  --secondarynavidle: #6a8f68;
  --background: #F6FDF3;
  --accent: #E16879;
  --text: #050f02;  
}
:root {
  --headingfont: "Playwrite CU", swap;
  --paragraphfont: "Ubuntu", swap;
}

/* html,body and nav (Html and body are the whole page, Html is the website and the body represents all the content that's inside the page)*/
html,body {
  margin: 0;
  background-color: var(--background);
  width: 100%;
  scroll-behavior: smooth;
  
  * {
    box-sizing: border-box;
  }
  p {
    /* font-size: 14px; */
    font-family: "Ubuntu", swap;
  }
}
.hearticon {
  font-weight: 1000;
}
nav {
  height: 60px;
  background-color: var(--secondarynavidle);
  border-bottom: black 1px solid;
  padding: 10px 50px;
  
/* these 4 propeties are what make the navigation bar stay at the top of the page */

  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;

/* keeps the content within the nav bar centered vertically */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
nav > div {
  flex: 1 0 50%;
}
.nav-heading h1 {
  margin: 0; 
  font-size: 20px;
  font-family: var(--headingfont);
}
nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  padding-left: 0;
  margin: 0;
  height: 40px;
}
@media screen and (max-width: 500px){
  .nav ul {
    max-width: 500px; 
  }
}
nav li {
  display: inline-block;
  width: 100px;
  max-width: 75px;
}
nav a {
  color: var(--text);
  text-decoration: none;
  font-family: "Playwrite CU", swap;
  transition: border 100ms ease-in;
  padding: 2.5px;
  font-weight: 700;
}
nav a:active {
  border: var(--secondary) 3px solid;
}
section {
  margin: 0;
}
#top {
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
#top > div {
  flex: 0 0 500px;
}
.idle {
  animation: colorchange 1s ease-out 0s 1 forwards;
  border-bottom: black 1px solid;
}
@keyframes colorchangeDown {
  from { background-color: #7a9e6e; }
  to { background-color: #9dbd91; }
}

@keyframes colorchangeUp {
  from { background-color: #9dbd91; }
  to { background-color: #7a9e6e; }
}

.scrollDown {
  animation: colorchangeDown 1s ease-out forwards;
}

.scrollUp {
  animation: colorchangeUp 1s ease-out forwards;
}

/* Section 1 content (Refer to the HTML file if you need reminding on what are inside sections). */
.profile-card-container {
  margin: 100px auto 25px auto;
  padding: 30px 10px;
  width: 350px;
  min-width: 350px;
  height: max-content;
  position: relative;
  text-align: center;
  overflow: hidden;
  background-color: var(--secondary);
  border-radius: 25px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.profile-card-container > div {
  max-width: 500px;
  width: 100%;
  position: relative;
}
.profile-top img {
  max-width: 300px;
  width: 150px;
  max-height: 300px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}
.profile-top h2 {
  margin: 5px 0;
  font-family: var(--headingfont);
}
.profile-top h3 {
  margin: 5px 0;
  font-family: var(--headingfont);
  font-size: 12px;
}
.profile-bottom p {
  margin: 3px 0 ;
}
.profile-bottom ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-container {
  margin: 80px auto 25px auto;
}
.item-card {
  margin: 25px auto;
  padding: 25px 10px;
  width: 500px;
  height: max-content;
  position: relative;
  text-align: center;
  overflow: hidden;
  background-color: var(--secondary);
  border-radius: 25px;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.item-card h3 {
  margin: 5px 0;
  font-family: var(--headingfont);
}
.item-card p {
  width: 80%;
  margin: auto;
}
.item-card ul,li {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
  line-height: 20px;
  font-family: var(--paragraphfont);
  
   a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    font-family: var(--paragraphfont);
 }
}
@media screen and (max-width: 1050px){
  nav {
    height: auto !important;
    padding: 10px 20px !important;
  }
  #top {
    display: flex;
    flex-direction: column;
    align-items: normal;
    margin-top: 100px;
  }
  .about-container {
    margin: 0;
  }
}
@media screen and (max-width: 550px){
  .item-card {
    width: 100% !important;
    border-radius: 0 !important;
  }
} 

/* Section 2 content (Refer to the HTML file if you need reminding on what are inside sections). */
.social-media-block {
  background-color: var(--primary);
  height: max-content;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 75px;
  width: 100%;
}
.social-media-heading {
  text-align: center;
  padding: 15px 0;

  h4 {
    margin: 0;
    padding-top: 5px;
    font-size: 20px;
    font-family: var(--headingfont);
  }
}
.social-media-block-items {
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  
  h3 {
    margin: 10px 0;
    font-family: var(--paragraphfont);
    font-weight: 500;
  }
  > div {
    padding: 10px 0;
    flex: 1 0 20%;
  }
}

@media screen and (max-width: 700px){
  .social-media-block-items {
    display: flex;
    flex-direction: column;
    justify-content: normal;
  }
  .social-media-block-items > div {
    padding: 15px 0;
    flex: none;
    width: 100%;
  }
}

.social-media-block-items > div img {
  max-width: 100%;
  height: 250px;

/* fancy css */
  position: relative;
  display: inline-block;
  box-shadow: -4px 4px 30px -10px rgba(206, 206, 206, 0.5);
  
  transition: transform 150ms ease-in;
} 

.social-media-block-items > div img:hover {
  transform: scale(1.05);
  box-shadow: -4px 4px 30px -5px rgba(206, 206, 206, 0.5);
}
.social-media-block-items ul,li {
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
}
.instagramcoverimage {
  background-image: url('Images/Instagram.png');
  background-size: 100% auto, cover;

  display: none;
}
.instagramcoverimage a {
  display: none;
}
.youtubecoverimage {
  background-image: url('Images/Youtube.png');
  background-size: 100% auto, cover;

  display: none;
}
.youtubecoverimage a {
  display: none;
}
.twitchcoverimage {
  background-image: url('Images/Twitch.png');
  background-size: 100% auto, cover;

  display: none;
}
.twitchcoverimage a {
  display: none;
}
/* .instagramcoverimage a:hover {
  background-size: 150% auto, cover;
}
.youtubecoverimage a:hover {
  background-size: 100% auto, cover;
}
.twitchcoverimage a:hover {
  background-size: 100% auto, cover;
} */

.hide {
  display: block;
}
@media screen and (max-width: 700px){
  .hide {
    display: none !important;
  }
  .instagramcoverimage,
  .youtubecoverimage,
  .twitchcoverimage {
    display: block !important; 
  }
  .instagramcoverimage,
  .youtubecoverimage,
  .twitchcoverimage a {
    width: 100%;
    height: 300px; 
    display: block !important;

  }
  .instagramcoverimage, .youtubecoverimage, .twitchcoverimage {
    background-position: left top;
    background-repeat: no-repeat;
  
    height: 250px !important;
    overflow: hidden; 
  }
}
@media screen and (max-width: 500px){
  .instagramcoverimage, .youtubecoverimage, .twitchcoverimage {
    height: 350px !important;
  }
}
/* Section 3 content (Refer to the HTML file if you need reminding on what are inside sections). */
.support-block {
  margin-bottom: 75px;
  background-color: var(--primary);

}
.support-heading {
  height: 50px;
  font-size: 20px;
  text-align: center;

  h4 {
    margin: 0;
    padding-top: 5px;
    font-family: var(--headingfont);
  }
}
.support-people {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 25px 0;
  height: max-content;


  h4 {
    margin: 10px 0;
    padding-top: 5px;
    font-family: var(--headingfont);
  }
}
.support-people > div {
  flex: 0 1 20%;
  margin: 20px auto;
  padding: 20px 5px;
  overflow: hidden;

  background-color: var(--secondary);
  height: 200px;
  width: 300px;
  border-radius: 25px;
}
.support-people > div img {
  max-width: 70px;
  max-height: 70px;
  border-radius: 50%;
}
.support-people ul,li {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  list-style: none;
  line-height: 25px;
  
   a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    font-family: var(--paragraphfont);
 }
}

@media screen and (max-width: 1000px){
  .support-people > div {
    flex: 0 0 33%;
    min-width: 300px;
  }
}
@media screen and (max-width: 550px){
  .support-people > div {
    flex: 0 0 50%;

  }
}
/* 
Note:
flex: 0 1 20%;
flex: 0 0 33%; for 2x4
flex: 0 0 50%; for 1x8 

flex-grow affects the width of the divs 
*/

/* Footer Content */

footer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: var(--primary);
  position: relative;
  padding: 5px 0;
}
footer div:nth-child(1) {
  flex: 1 0 33%;
  text-align: left;
  
  h4 {
    margin: 10px 0;
    text-align: left;
    padding-left: 10px;
    font-family: var(--headingfont);
  }
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    text-align: left;
    padding-left: 10px;
  }
  a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    font-family: "Ubuntu", swap;

    transition: padding 150ms;
  }
  a:hover {
    padding-left: 5px;
  }
}
footer div:nth-child(2) { 
  flex: 1 0 33%;

  h4 {
    margin: 10px 0;
    padding: 0;
    text-align: center;
    font-family: var(--headingfont);
  }
  ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
  }
}
footer div:nth-child(3) {
  flex: 0 1 33%;

  .imgleft {
    width: 96px;
    height: 96px;
    float: left;
  }
  .imgright {
    width: 96px;
    height: 96px;
    transform: scaleX(-1);
    float: right;
  }
}
.abso {
  text-align: center;
  width: 30%;
  font-size: 14px;
  font-weight: 500;
  
  p {
  margin: 0;
  padding: 0;
  }

  a {
  margin: 0;
  padding: 0;
  color: black;
 }
}
@media screen and (max-width: 600px){
  footer {
    padding: 0px !important;
    flex-direction: column;
    transition: flex 500ms ease-in;
  }
  footer > div ul,li,a,h4 {
    text-align: center !important;
    width: 100% !important;
    padding-left: 0 !important;
  }
}
@media screen and (min-width: 600px){
  .imgleft {
display: none;
  }
  .imgright {
    display: none;
  }
}