/* Jimena VarVar Vesion 3*/

* { 
  margin: 0;
}

.heading {
    
    padding: 1rem;
    font-family: "Recursive";
}

.heading {
  background: transparent;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 1/2;
  grid-row: 1/2;
  width: 100%;
}

h1 {
    font-size: 50px;
    text-align: left;
    vertical-align: middle;
    color: black;    
}

a:link {
  color: gray;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: gray;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}

iframe{
    width: 100%;
    height: 100vh;
    border-style: none;
    scrolling: none;
}

.name {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  font-family: 'Recursive', cursive;
  font-size: 2rem;
  text-align: center;
  vertical-align: middle;
}

.name #A1 {
  background: transparent;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 1/2;
  grid-row: 1/3;
  width: 100%;
  height: 100vh;
}

.name #A2{
  background: transparent;
  color: black;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 1/2;
  grid-row: 3/4;
  width: 100%;
  height: 100vh;

}

.name #A3{
  background: transparent;
  color: black;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 1/2;
  grid-row: 4/8;
  width: 100%;
  height: 100vh;
}

.name #A4{
  background: transparent;
  color: black;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 1/2;
  grid-row: 10/14;
  width: 100%;
  height: 100vh;
}

.name #B1 {
  background:transparent;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 2/3;
  grid-row: 1/3;
  width: 100%;
  height: 100vh;
}

.name #B2 {
  background: transparent;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 2/3;
  grid-row: 3/4;
  width: 100%;
  height: 100vh;
}

.name #B3 {
  background: transparent;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 2/3;
  grid-row: 4/8;
  width: 100%;
  height: 100vh;
}

.name #B4 {
  background: transparent;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 2/3;
  grid-row: 8/14;
  width: 100%;
  height: 100vh;
}

.name #C1 {
  background: transparent;
  border: 10px solid rgb(0, 0, 0);
  grid-column: 3/3;
  grid-row: 1/3;
  width: 100%;
  height: 100vh;
}

.name #C2 {
  background: rgb(255, 255, 255);
  border: 10px solid rgb(0, 0, 0);
  grid-column: 3/3;
  grid-row: 3/6;  
  width: 100%;
  height: 100vh;
}

.name #C3 {
  background: rgb(255, 255, 255);
  border: 10px solid rgb(0, 0, 0);
  grid-column: 3/3;
  grid-row: 4/8;
  width: 100%;
  height: 100vh;
}

.name #C4 {
  background: rgb(255, 255, 255);
  border: 10px solid rgb(0, 0, 0);
  grid-column: 3/3;
  grid-row: 10/14;  
  width: 100%;
  height: 100vh;
}



/* Breakpoint */

    @media (max-width: 600px) { 
      .name {
        display: block; 
        height: 100vh;
        }           
/*
      .name #A1 #A2 #A3 #1B #B2 #B3 #C1 #C2 #C3 {
          background-color: yellowgreen;
          color: pink;
          height: 100%;
*/
        }      
      }

/* End Breakpoint: 800px und grösser  */