/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #473463;
  /*background-color: #66C5CC;*/
  color: black;
  font-family: Verdana;
  margin: 0;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 20px;
  margin-bottom: 30px;
}

.rectangle {
    background-color: #efbbc6;
    color: #5C002E;
    align-content: center;
    text-align: center;
    /*box-shadow: 10px 10px 0px #FE88B1;*/
    border-style: solid;
    border-color: #CD6B8A;
}

#rectangle-title {
    height: 100px;
    width: 100wh;
    margin-bottom: 30px;
    box-shadow: 10px 10px 0px #CD6B8A;
}

.logo-img {
    padding-top: 10px;
    max-height: 60px;
    
}

.logo-font {
    color: #CD6B8A;
    font-size: xx-large;
    font-family: 'Dico', sans-serif;
}


.rectangle-button {
    background-color: #EFBBC6;
    color: #5C002E;
    align-content: center;
    text-align: center;
    font-weight: bold;
    border-style: solid;
    border-color: #CD6B8A;
    box-shadow: 5px 5px 0px #CD6B8A;
    flex: 1;
    margin-bottom: 20px;
    margin-right: 10px;
    min-height: 58px;
    max-height: 58px;
    padding: 5px;
}

.rectangle-button:hover {
    background-color: #473463;
    color: #EFBBC6;
    transition-duration: 0.2s;
    /*border-color: #EFBBC6;
    box-shadow: 5px 5px 0px #EFBBC6;*/
}

.rectangle-button-selected {
    background-color: #473463;
    color: #EFBBC6;
    align-content: center;
    text-align: center;
    font-weight: bold;
    border-style: solid;
    border-color: #CD6B8A;
    box-shadow: 5px 5px 0px #CD6B8A;
    flex: 1;
    margin-bottom: 20px;
    margin-right: 10px;
    min-height: 58px;
    max-height: 58px;
    padding: 5px;
}

.invisible-rectangle {
    height: 50px;
    width: 10px;
}

#wrap-body {
    width: 100wh;
    height: fit-content;
    min-height: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#sidebar-menu {
    width: 15%;
    display: flex;
    flex-direction: column;
}

#wrap-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#wrap-content {
    width: 83%;
    height: fit-content;
    background-color: #efbbc6;
    color: #5C002E;
    border-style: solid;
    border-color: #cd6b8a;
    box-shadow: 10px 10px 0px #CD6B8A;
    padding-bottom: 20px;
    
    /*padding-left: 2%;*/
}

#textbox {
    padding-top: 5px;
    margin-bottom: 30px;
    padding-left: 2.5%;
    width: 95%;
    color: #5C002E;
}

#wrap-content-with-img {
    display: flex;
    flex-direction: row;
}

#witch-img {
    height: 200px;
    margin-top: 15px;
    margin-right: 15px;

}

.text-content {
    white-space: pre-line;
    margin-top: 0%;
}

.page-title {
    font-family: Dico;
    font-size: 50px;
    font-weight: bold;
    margin-top: 2%;
    margin-bottom: -2%;
}

#img-row {
    display: flex;
    flex-direction: row;
    height: 31px;
}

#img-blinkie {
    height: 31px;
    margin-right: 5px;
}

.playbutton {
    background-color: #EFBBC6;
    color: #5C002E;
    align-content: center;
    text-align: center;
    font-weight: bold;
    border-style: solid;
    border-color: #CD6B8A;
    box-shadow: 5px 5px 0px #CD6B8A;
    margin-bottom: 20px;
    margin-right: 10px;
    height: 50px;
    width: 80px;
    padding: 5px;
    margin-top: 10px;
}

.playbutton:hover {
    background-color: #473463;
    color: #EFBBC6;
    transition-duration: 0.2s;
    /*border-color: #EFBBC6;
    box-shadow: 5px 5px 0px #EFBBC6;*/
}

#flag-img {
    height: 50px;
    margin-right: 10px;
}