/*@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Bungee&family=Doto:wght@100..900&family=Orbitron:wght@400..900&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
*/

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Doto';
  font-style: normal;
  font-weight: 300;
  font-optical-sizing: auto;
  font-variation-settings:
  "ROND" 0;
  src: url('../fonts/doto-v3-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/quantico-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  color: var(--neutral50);
  background-color: var(--neutral800);
  
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><rect x='14' y='14' width='3' height='3' fill='%23404040' /></svg>");
  background-repeat: repeat;

  font-family: "Doto", sans-serif;
}

/*#region GlobalStyle*/

h1 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 3em;
}

h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 1.8em;
}

h4 {
  font-family: "Quantico", sans-serif;
  font-size: 1.4em;
  margin-top: 0;
  margin-bottom: 0.5em;
}

h5 {
  font-family: "Quantico", sans-serif;
  font-size: 1.1em;
  margin-top: 0;
  margin-bottom: 0.5em;
}

p {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-family: "Quantico", sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

main li {
  font-family: "Quantico", sans-serif;
}

input {
  background-color: var(--neutral700);
  color: var(--neutral50);
  
  font-family: "Quantico", sans-serif;
  font-size: 1em;
  border: 2px solid var(--neutral700);
}

label {
  font-family: "Quantico", sans-serif;
}

textarea {
  background-color: var(--neutral700);
  color: var(--neutral50);

  font-size: 1em;
  font-family: "Quantico", sans-serif;

  border: 2px solid var(--neutral700);
}

input:focus,
textarea:focus {
    border: 2px solid var(--neutral600);
    outline: none;
}

/*#endregion GlobalStyle*/

/*#region HeaderStyle*/

header {
  background-color: var(--neutral900);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
}

header h1 {
    font-size: 2em;
    text-wrap-mode: nowrap;
}

header nav ul li a {
  font-size: 1.5em;
  text-align: center;
  transition: font-size 0.3s ease;
}

header nav ul li a:hover {
  font-size: 1.7em;
}

/*#endregion HeaderStyle*/

/*#region MainStyle*/

main .main-box {
  background-color: #171717;
  box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.3);
  padding: 2em;
}

main .main-type1 p {
  font-size: 1.5em;
}


main .main-type2 img {
  filter: brightness(0.85);
  transition: filter 0.25s ease;
}

main .main-type2 a:hover {
  text-decoration: underline;
}

main .main-type2 a:hover img {
    filter: brightness(1);
}

main .main-type4 h2 {
  margin-bottom: 0em;
}

main iframe{
  box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.3);
}

.main-type4-box {
  background-color: #171717;
  box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.3);
}

.main-type4-box h4 {
  font-size: 1.5em;
}

.main-type4-googlePlay {
  filter: brightness(0.3);
}

.main-type4-box button {
  background-color: var(--neutral700);
  color: var(--neutral50);
  font-family: "Quantico", sans-serif;
  border: 0;
}

.main-type4-box button:hover{
  background-color: var(--neutral800);
}

.main-type5-form {
  background-color: var(--neutral900);
  padding: 2em;
  box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.3);
}

/*#endregion MainStyle*/

/*#region FooterStyle*/

footer{
  background-color: var(--neutral700);
}

/*#endregion FooterStyle*/

@media only screen and (max-width: 800px) { 
  h2 {
    font-size: 2em;
  }
}