/*
 colors:
 rgb(33, 26, 29)
rgb(124, 9, 38);
rgb(237, 31, 51)
 rgb(255, 117, 117)
rgb(247, 246, 235)
 rgb(214,212,203)
*/

body {
    background: rgb(33, 26, 29);
    font-family: Calibri, Helvetica Neue, Arial, Helvetica, sans-serif, 'Times New Roman', Arial;
    color: rgb(33, 26, 29);
    padding: 0px;
    margin: 0px;
 }

 header {
     background: rgb(214,212,203);
    padding: 20px;
     color:rgb(237, 31, 51);
 }

 h1 {
    font-size: 50px;
    margin: 0px;
    padding: 0px;
 }

section {
    padding: 20px;
    display: flex;
    flex-direction: row;
    background: rgb(247, 246, 235);
    color: rgb(33, 26, 29);
    font-weight: bold;
    font-size: 15px;
}
            
.button {
     background: rgb(237, 31, 51);
    border-radius: 10px;
    border: none;
    font-size: 25px;
    cursor: pointer;
    transition-duration: 0.5s;
    font-weight: bold;
    padding: 30px 20px;
}

.button:hover {
    background: rgb(255, 117, 117);
 }

 .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    color: rgb(124, 9, 38);
 }

.button span:after {
    content: '»';
    position: absolute;
     opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
    color: rgb(237, 31, 51);
 }

.button:hover span {
    padding-right: 25px;
    color: rgb(237, 31, 51);
 }

.button:hover span:after {
    opacity: 1;
    right: 0;
 }

 .button-link {
    display: inline-block;
    background: rgb(237, 31, 51);
    border-radius: 10px;
    border: none;
    font-size: 20px; 
   font-weight: bold;
    color: rgb(124, 9, 38);
    padding: 30px 40px;
    cursor: pointer;
    transition-duration: 0.5s;
    text-decoration: none;
    position: relative;
    font-size: 25px;
}

 .button-link:hover {
    background: rgb(255, 117, 117);
    color: rgb(237, 31, 51);
 }

.button-link span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    color: inherit;
 }

  .button-link span:after {
    content: '»';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
    color: rgb(237, 31, 51);
}

.button-link:hover span {
    padding-right: 25px;
}

.button-link:hover span:after {
    opacity: 1;
    right: 0;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

li {
    display: inline-block;
    margin: 5px;
    padding: 0px;
}

a {
    text-decoration: none;
    color: rgb(237, 31, 51);
    transition-duration: 0.25s;

 }

 a:hover {
    color: rgb(255, 117, 117);
    }

#flashcard {
    display: inline-block;
    background: rgb(237, 31, 51);
    border-radius: 10px;
    border: none;
    font-size: 20px; 
   font-weight: bold;
    color: rgb(124, 9, 38);
    padding: 30px 40px;
    cursor: pointer;
    transition-duration: 0.5s;
    text-decoration: none;
    position: relative;
    font-size: 25px;
}