#About {
    margin-left:5%;
    margin-right:5%;
    margin-top:2%;
    margin-bottom:0;
}

#backArrow {
    position:absolute;
    float:left;
    top:10px;
    left:10px;
}

a:link {
    text-decoration:none;
}

@media all and (max-width: 1040px) { /* mobile; why so large? */
    #About {
        font-size:55px;
    }
    .accordion {
	font-size:55px;
    }
    .panel {
	font-size:55px;
    }

    #sword, #letter {
	width:100%;
    }
}
      
@media all and (min-width: 1040px) {
    #About {
        font-size:30px;
    }
    .accordion {
	font-size:30px;
    }
    .panel {
	font-size:30px;
    }
}

#wellContainer_UNUSED {
    margin:0;
    text-align:center;
}

#well {
    margin-top:-5%;
    margin-bottom:2%;
    padding:0;
    width:30%;
    object-position:center top;
}

#sword, #letter {
    width: 100%;
}

.accordion {
    background-color: #eef;
    color: #111;
    cursor: pointer;
    padding:1%;
    width: 100%;
    border: 1px solid gray;
    border-radius:10px;
    text-align: left;
    outline: none;
    transition: 0.2s;
}

.active  {
  background-color: #ccd;
}

.panel {
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;

    margin-left:5%;
    margin-right:5%;
}