:root {
  --bg1: #572781;
  --bg2: #3E0470;

  --section1-color1: #7f3abb;
  --section1-color2: #572285;

  --section2-color1: #55277c;
  --section2-color2: #7f3abb;

  --section3-color1: #41364b;
  --section3-color2: #7f3abb;

  --section4-color1: #424242;
  --section4-color2: #7f3abb;

  --card-background-static1: #612a91; 
  --card-background-static2: #584866; 

  --card-background-hover1: #584866; 
  --card-background-hover2: #900add;
  
  --card-background-hover-best1: #ff00ffaf; 
  --card-background-hover-best2: #e5ff00a9; 

  --text-color: azure;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(to bottom,var(--bg1), var(--bg2));
    min-height: 100vh; 
    color: var(--text-color);
    background-attachment: fixed;
}

body{
    display: flexbox;
    justify-content: center;
}

section {
    width: 100%;
    padding: 50px;
    text-align: center;
}

.represent {
    background: linear-gradient(to right,var(--section1-color1), var(--section1-color2));
}

.About {
    background: linear-gradient(to right,var(--section2-color1), var(--section2-color2));
}

.projects {
    padding-left: 20%;
    padding-right: 20%;
    background: linear-gradient(to right,var(--section3-color1), var(--section3-color2));
}

.footer {
    padding: 50px;
    background: linear-gradient(to right,var(--section4-color1), var(--section4-color2));
}


@media (max-width: 1280px) {
    html {
        font-size: larger;
    }
}