/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    Globals
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
* {
   box-sizing: border-box;
   margin: 0;
   scroll-behavior: smooth;
}

body {
   background-image: url("./img/background.jpg");
   background-position: center;
   background-size: cover;
   background-attachment: fixed;
   background-color: #05171e;
   color: #fefefe;
   font-family: Verdana, Tahoma, sans-serif;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

.max-content {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
   
}

.container {
   display: flex;
   justify-content: space-around;
   align-content: center;
   align-items: center;
}

h1 {
   text-align: center;
   font-size: 40px;
   margin-block-start: 0;
   padding-top: 20px;
}

h3 {
   text-align: center;
   font-size: 16px;
}

.d_none {
   display: none;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    Header
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
header {
   background-color: #0d2d33;
   text-align: left;
   align-content: center;
   height: 120px;
}

header img {
   width: 60px;
   margin-left: 20px;
   margin-right: 20px;
}

.header-content {
   padding-left: 20px;
   font-size: 48px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.header-text {
   display: flex;
   align-items: center;
   font-family: "Pokemon_Solid", Arial, Helvetica, sans-serif;
}
.search-content {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.search-field {
   width: 200px;
   height: 30px;
   border-radius: 10px;
   margin-right: 20px;
   padding-left: 10px;
   cursor: text;
}

.warning-message {
   color: red;
   font-size: 16px;
   margin-top: 5px;
   margin-right: 20px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    Main Content
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
main {
   flex: 1;
   position: relative;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    Footer
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
footer {
   background-color: #0d3331;
   position: relative;
   bottom: 0;
   left: 0;
   right: 0;
   height: 120px;
   align-content: center;
   display: flex;
   align-items: center;
}

footer a {
   color: #fefefe;
}

.footer-text {
   color: white;
   font-size: 12px;
   text-align: center;
}

footer img {
   width: 30px;
   height: 30px;
}

footer img:hover {
   transform: scale(0.9);
   filter: drop-shadow(0px 0px 5px gold);
}
