/* Default Website Desktop Css */
@import url("zStyle/layout.css");
@import url("zStyle/result.css"); 
@import url("zStyle/input.css");
@import url("zStyle/tutorial.css"); 
@import url("zStyle/changelog.css"); 
@import url("zStyle/events.css"); 

/* Formats everything */
html, body {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  scrollbar-width: none;
}

* {
  box-sizing: inherit;
}

a:link {color: white; text-decoration: none;}
a:visited {color: white;}
a:hover {color: aqua;}
a:active {color: aqua;}

/* Formats the default of everything on web page */

@media screen {
  body {
    background: linear-gradient(to bottom, #394240, #293037);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: min-content min-content 1fr;
    column-gap: 20px;
    row-gap: 0px;
  }

  h1 {
    height: fit-content;
    grid-column: span 5;
    padding: 10px;
    border-radius: 8px;
    background-color: #1a1a1a;
  }
}

@media screen and (max-width: 768px) {
  body {
    background: linear-gradient(to bottom, #394240, #293037);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: min-content min-content 1fr;
    column-gap: 20px;
    row-gap: 20px;
  }

  h1 {
    font-size: x-large;
    height: fit-content;
    grid-column: span 5;
    padding: 10px;
    border-radius: 8px;
    background-color: #1a1a1a;
  }
}