#column-one {
    overflow-y: hidden;
    background-color: #cccccc;
}

/* sets up layout for oracle frame */
#oracle-content-frame {
    margin-top: -10px;
    display: grid;
    height: 98%;
    grid-template-columns: 26% 46.5% 24%;
    gap: 10px;
    padding: 5px 10px 0px 10px;
}

svg{
    height: auto;
    background-color: white;
    box-shadow: 5px 5px;
    border: 1px solid black;
}

button {
    /* background: white;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit; */
}


/* left styles */

#oracle-left {
    display: grid;
    grid-template-rows: 50% 50%;
    margin-right: 1em;
}

#oracle-cardSelector {
    width: 100%;
}

.card-selector {
    margin: 10px;
}

.card-selector {
    fill: red;
    opacity: 0;
}

.card-selector-close {
    fill: red;
    opacity: 0;
}

/* suit selector styles */
#oracle-suitSelector {
    width: 100%;
}
/* end of suit selctor styles */

/* end left styles */

/* center styles */
#oracle-center {
    background-color: white;
    box-shadow: 5px 5px;
    border-radius: 20px;
    border: 1px solid black;
}

.center-card-display-area {
    margin-top: 2%;
    margin: 5%;
    height: 93%;
    width: 90%;
    border-radius: 20px;
}

figure {
    display: none;
}

.center-card-NameArea {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    margin: 5%;
    margin-top: -2%;
    height: 8%;
    width: 90%;
    border-radius: 20px;
    text-align: center;
}

canvas {
    width: 100%;
    height: 100%;
}

figure img {
    width: 100%;
    height: 80%;
    border-radius: 20px;
}

/* end center styles */

/* right styles */
#oracle-right {
    display: grid;
    grid-template-rows: 3rem 65% 35%;
    margin-left: 1em;
}

#oracle-infoArea {
    width: 100%;
}

/* info area styles */
#info-area-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 3rem;

}

#info-area-self-button {
    background-image:url('../img/oracle/icons/self-icon.png');
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

#info-area-tech-button {
    background-image:url('../img/oracle/icons/tech-icon.png');
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

#info-area-cosmos-button {
    background-image:url('../img/oracle/icons/cosmos-icon.png');
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

#info-area-gravity-button {
    background-image:url('../img/oracle/icons/gravity-icon.png');
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

#info-area-display {
    width: 100%;
    height: 95%;
    margin: auto;
    background-color: white;
    padding: 1%;
    box-sizing: border-box;
    border: 1px solid black;
}

.info-area-self-display {
    width: 95%;
    height: 95%;
    margin: auto;
    /* display: block; */
}

.info-area-tech-display {
    width: 95%;
    height: 95%;
    margin: auto;
    display: none;
}

.info-area-cosmos-display {
    width: 95%;
    height: 95%;
    margin: auto;
    display: none;
    
}

.info-area-gravity-display {
    width: 95%;
    height: 95%;
    margin: auto;
    display: none;
}

.info-area-text-boxes {
    display: none;
    position: relative;
    font-size: .9em;
}

.info-area-self-display-top-text {
    padding-top: 7px;
}   

.info-area-display-bottom-text {
    position: absolute;
    bottom: 0;
    left: 0;
}   

/* navigator styles */
#oracle-navigator {
    width: 100%;
    height: 92%;
}

#oracle-nav-buttons {
    width: 70%; 
    height: 75%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

#oracle-nav-buttons button {
    background-color: white;
}

button:disabled {
    opacity: .5;
}

#oracle-nav-suit-switcher {
    background-image: url("../img/oracle/icons/oracle-card-center.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.oracle-nav-images {
    height: 25%;
}

#oracle-secondary-buttons {
    display: grid;
    grid-template-rows: 1fr 1fr;
    margin-top: -35%;
    margin-left: 75%;
    width: 25%;
    height: 40%;
}

.oracle-secondary-nav button {
    height: 50px;
}

.arrow {
    font-size: 2.2em;
    display: block;
}
/*arrow styles */
#oracle-navTop {
    background-image: url("../img/oracle/icons/oracle-card-up.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#oracle-navRight {
    background-image: url("../img/oracle/icons/oracle-card-right.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#oracle-navBottom {
    background-image: url("../img/oracle/icons/oracle-card-down.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#oracle-navLeft {
    background-image: url("../img/oracle/icons/oracle-card-left.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#oracle-navTopLeft {
    background-image: url("../img/oracle/icons/oracle-card-leftup.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#oracle-navTopRight {
    background-image: url("../img/oracle/icons/oracle-card-rightup.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#oracle-navBottomLeft {
    background-image: url("../img/oracle/icons/oracle-card-leftdown.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#oracle-navBottomRight {
    background-image: url("../img/oracle/icons/oracle-card-rightdown.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/*end of arrow styles*/

#oracle-return-to-home {
    margin-bottom: 5%;
    background-image: url("../img/oracle/icons/oracle-card-home.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#oracle-return-to-last {

    background-image: url("../img/oracle/icons/oracle-card-return.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}