/* Basic Styles: */
body {
    background-color: rgb(187, 255, 255);
    text-align: center;
    font-family: Georgia, Times, 'Times New Roman', serif;
}
nav {
    background-color: LightSkyBlue;
}
footer {
    background-color: #f2f2f2;
    padding: 20px;
}
footer {
    background-color: LightSkyBlue;
}
h1 {
    font-size: 30px
}
iframe{
    border-radius: 20px;
}

/* Give cards a special gradient and style */
#card {
    background: radial-gradient(rgb(227, 255, 255),rgb(81, 255, 255));
    border-radius: 20px;
    border-style: solid;
    border-color: rgb(51, 133, 255);
    padding: 15px;
    display: flex;
    align-items: center;
    margin: 1%;
}

/* Give images a consistent size and style */
#img {
    width: 50%;
    border-radius: 30px;
    align-self: center;
    border-style: solid;
    border-color: skyblue;
    background-color: rgb(102, 191, 255);
    padding: 5px;
}

/* Give buttons a style along with a special, reversing transition */
#button {
    transition: transform 0.5s ease-in-out, border-color 0.5s ease-in-out;
    background: radial-gradient(rgb(82, 215, 255),rgb(36, 204, 255));
    margin: 5px 1px 5px 5px;
}
/* Trigger the transition when mouse is hovered over the button */
#button:hover {
    transform: scale(1.1);
    background: radial-gradient(rgb(216, 245, 255),rgb(74, 213, 255));
    border-color: rgb(1, 88, 220);
}

/* Give the header a cool background image of a GIF, use flex to center properly with a set height */
header{
    color: #0046c0;
    display: flex;
    background-image: url("https://i.pinimg.com/originals/ef/b1/01/efb101b93d77eebfb2293bafd51fd699.gif");
    height: 300px;
}

/* Style the div element containing the title of the webpage, centered on the header */
#head {
    background: radial-gradient(rgb(191, 237, 255),rgb(63, 204, 255));
    border-radius: 30px;
    margin: auto;
    padding: 10px;
}

/* Center the div elements of the columns within the div element containing the title of the webpage */
#symbol{
    display: flex;
    align-items: center;
    justify-content: center;
}