:root{
    --bg: #22125f;
    --bg-accent: #120b31;
    --text: #c0d4f8;
    --text-accent: rgb(63, 51, 233);
}

* {
    box-sizing: border-box;
  }
  
  /* main */
   body, html {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    font-family: "Cooper", sans-serif;
   
   }

   body {
   background-image: url("https://file.garden/ZghUIuf9jVgn5aMB/assets/sebastian-marx-hHzscs2Oaeo-unsplash.jpg");
   background-repeat:no-repeat;
   background-size: cover;
  }

  #container {
    width: 60%;
    height: auto;
    margin: 0 auto;
    background-color: var(--bg);
    border-radius: 15px;
    margin-top: 3%;
  }

  #footer {
    width: 60%;
    height: auto;
    margin: 0 auto;
    background-color: var(--bg);
    border-radius: 10px;
    margin-top: 5%;
  }
  
  #flex {
    display: flex;
    flex-direction: column;
  }

  main {
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    flex: 1;
    padding: 10px;
  }

h1, h2, h3, h4, a {
    color: var(--text-accent);
}

p {
    color: var(--text);
    font-family: "Trebuchet MS", sans-serif
}



header {
  background-color: (--bg-accent);
  overflow: hidden;
  text-align: center;
  align-content: center;
  min-height: 50px;
}

article {

    background-color: var(--bg-accent);
    margin: 0 auto;
    min-height: auto;
    max-width: fit-content;
    border-radius: 10px;
    border: solid;
    border-color: var(--text-accent);
    padding: 5%;
}


.button {
    background-color:rgb(32, 20, 88);
    color: var(--text-accent);
    border: var(--text-accent);
    border-style: solid;
    padding: 15px 20px;
    font-size: 18px;
    margin: 5px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.button:hover {

  color: var(--text);
  background-color: var(--text-accent);}


@media screen and (min-width: 1080px) {
    body {
    font-size: large;
    }
}
@media screen and (max-width: 900px) {

    body {
     background-attachment: fixed;
    }

    #container {
    width: 90%;
    height: auto;
    margin: 0 auto;
    background-color: var(--bg);
  }

  img {
    width: 100%;
    height: auto;
  }
 }