.title_box {

  position: fixed;

  top: 0;
  left: 0;

  height: 10vh;
  min-height: 80px;
  max-height: 200px;

  width: 100%;
  min-width: 400px;

  align-content: center;

  background-color:rgb(67, 139, 210);
  z-index: 100;
}

.title_text {
    text-wrap: nowrap;
    font-size: 300%;

    margin: auto 1%;
}

.page_content {

  position: relative;

  display: grid;
  grid-auto-flow: dense;
  gap: 1% 4%;
  grid-template-columns: repeat(5, minmax(0, 15vw));
  grid-auto-rows: 15vw;
  overflow: visible;

  top: max(80px, 10vh);

  width: 100%;
  min-width: 400px;

  height: auto;

  margin-left: auto;
  margin-right: auto;
}

.grid_test{
    outline:1px solid blue;
    border-radius: 20px;
    aspect-ratio: 1/1;
}

.intro_box
{
    display: block;

    grid-column: span 3;
    grid-row: span 2;

    background-color:rgb(54, 126, 227);
    border-radius: 20px;

    padding: 10px;
    text-align: left top;
    text-wrap: wrap;

    overflow: hidden;
}


.intro_text{
    margin-top:  0px;
    font-size: min(3cqw, 4cqh);
    /* outline:1px solid blue; */
}

.links_box
{
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    gap: 10px 10px;

    grid-column: span 2;
    grid-row: span 1;

    background-color:rgb(45, 101, 156);
    /* outline:1px solid blue; */
    border-radius: 20px;

    padding: 10px;
    text-align: left top;
    text-wrap: wrap;

    overflow: hidden;
}

.logo {
    position: relative;
    height: auto;
    background-color: rgba(255, 255, 255, 0);
    width: 90%;
}


.eye_box{
    border-radius: 20px;
    overflow: hidden;
    background-color:black;

    grid-column: span 2;
    grid-row: span 2;
}

.eye_box_right{
    border-radius: 20px;
    background-color:black;

    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio:1/1;
}

.mouth_box{
    border-radius: 20px;
    background-color:black;

    grid-column: span 2;
    grid-row: span 1;
}

.black_box{
    background-color: black;
    border-radius: 20px;
}

/* #myCanvas{
    width: 90%;
    height: 90%;
    margin-top: 4%;
    margin-left: 4%;
    background-color: aliceblue;
} */

.background-swapper{
    border-radius:20px;
    background-color:rgb(45, 101, 156);
    
    aspect-ratio: 1/1;

    display: flex;
}

#expand-hover{
    transition:
        transform .1s;
}

#expand-hover:hover{
    transform:scale(1.1) rotate(5deg);
}

.quote_box{
    border-radius:20px;
    background-color:rgb(54, 126, 227);

    padding:10px;

    grid-column: span 3;
    grid-row: span 1;
}

.map_box{
    background-color:slategray;
    border-radius:20px;
    overflow: hidden;
    aspect-ratio: 1/1;

    grid-column: span 4;
    grid-row: span 4;
}

.map_frame{
    width: 100%;
    height: 100%;
}