@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

* {
  box-sizing: border-box;
}

body {
  --ColorMain: gray ;
  --ColorAlt: white ;
  --ColorFocus: black;
  --WidthMax: 900px;
  --WidthActive: var(--WidthMax) ;
  --WidthMin: 400px;
  --Gap: 20px ;
  --BorderWidth: 5px ;

    background-color:var(--ColorAlt);
    font-family: Arial, Helvetica, sans-serif;
    max-width: var(--WidthMax);
    margin: auto;
    color: var(--ColorMain);
    
}
header {
  background-color:var(--ColorMain);
  font-family: 'Anton';
  font-size: 200%;
  font-weight:normal ;
  padding: var(--Gap);
  color: var(--ColorAlt);

  }
footer {
    font-size: 75%;
    font-family: 'M PLUS 1 Code', 'Courier New', Courier, monospace;
    text-align: right;
    color: var(--ColorAlt);
    background-color: var(--ColorMain);
    padding: var(--BorderWidth);
  }
h1 {
    color: var(--ColorFocus)
}
h2 {
  color: var(--ColorFocus);
}

em {
  font-weight: bolder;
  color: var(--ColorFocus);
}
ul {
  list-style: none ;
  margin: 12px 0px 0px 0px;
  padding: 0px;
  width: auto;
}
ul li {
  border-top: 1rem solid var(--ColorAlt) ;
  font-size: 10pt;
  font-weight: bold;
  text-align: center;
}
li a {
  text-decoration: none;
  padding: 5px ;
}
li a:link , li a:visited {
  display: block;
  background-color: var(--ColorMain);
  color: var(--ColorAlt);
}
li a:hover , li a:active {
  display: block;
  background-color: var(--ColorFocus);
  color: var(--ColorAlt);
}

p.domain {
  padding: 0.4rem;
  background-color: var(--ColorAlt);
  font-family: 'M PLUS 1 Code', 'Courier New', Courier, monospace;
  font-size: 200%;
  font-weight: bolder;
  border-style: solid;
  border-color: var(--ColorMain);
  border-width: var(--BorderWidth);
  border-radius: 1rem;
  text-align: center;
  margin: 10px;
}
p a {
  text-decoration: none;
  padding: 0.5rem;
  width: fit-content;
  font-style: italic;
  font-weight: bold;
}
p a:link , p a:visited {
  display: block;
  background-color: var(--ColorAlt);
  color: var(--ColorFocus);
  
}
p a:hover , p a:active {
  display: block;
  background-color: var(--ColorFocus);
  color: var(--ColorAlt);
}
iframe {
  padding-left: 10px; 
  height: auto;
  background-color: var(--ColorAlt);
  border-style: none;
  font-family: 'M PLUS 1 Code', 'Courier New', Courier, monospace;
}

div.container {
  border-color: var(--ColorMain);
  border-style: solid;
  border-width: var(--BorderWidth);
}
.row {
  display: flex;
  align-items:flex-end;
}


.column-1 {
  flex: content;
  justify-items: center;
}
.column-2 {
  justify-items: left;
  flex:content;
  background-color: transparent;
}