.cell {
    text-align: center;
    color: white;
    font-size: large;
}

.tool-list {
    background-color: rgb(100, 100, 50);
    height: inherit;
}

.heading {
    color: rgb(245, 200, 140);
    text-align: center;
    font-size: x-large;
}

/* RULES FOR CAROUSEL */
/*We do this because the carousel needs to be 100% width 
in order for the aspect ratio trick to work*/
.carousel-container {
    /* max-width: 2000; */
    width: 100%;
}
  
  
  /*This is the actual carousel. Overflow hidden acts as a mask*/
  
.carousel {
position: relative;
width: 100%;
/*Width of image is 980px. Height is 570px.*/
padding-top: calc(0.3 * 100%);
overflow: hidden;
}

.carousel-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* .left-arrow {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
height: 100%;
width: 147px;
cursor: pointer;
} */

/* .left-arrow:hover {
background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

.left-arrow:hover .chevron,
.right-arrow:hover .chevron {
border-color: #e6e6e6;
} */

/* .right-arrow {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
height: 100%;
width: 147px;
cursor: pointer;
} */

/* .right-arrow:hover {
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
} */

/* .chevron {
width: 25px;
height: 25px;
border: solid rgba(255, 255, 255, 0.5);
border-width: 10px 10px 0 0;
}

.chevron.right {
transform: rotate(45deg);
}

.chevron.left {
transform: rotate(-135deg);
} */

/* .circle-container {
position: absolute;
display: flex;
justify-content: center;
align-items: start;
bottom: 0;
left: 0;
width: 100%;
height: 45px;
} */

/* .circle {
border: 1px solid white;
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}

.circle-fill {
background-color: white;
} */

.text-container {
position: absolute;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
bottom: 45px;
left: 0;
width: 100%;
color: white;
text-shadow: 1px 1px black;
text-align: center;
}


.text-container p:nth-child(1) {
margin: 10px 100px;
font-size: 1.5em;
}

.text-container p:nth-child(2) {
margin: 10px 100px 20px 100px;
}

.carousel-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Animations */
@keyframes toRight {
0% {
    left: 0;
}
100% {
    left: 100%;
}
}

@keyframes toLeft {
0% {
    left: 0;
}
100% {
    left: -100%;
}
}

@keyframes comeRight {
0% {
    left: 100%;
}
100% {
    left: 0;
}
}

@keyframes comeLeft {
0% {
    left: -100%;
}
100% {
    left: 0;
}
}