body {
    margin:0;
    font-family: 'Courier New', Courier, monospace;
}
#header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: rgb(243, 243, 243);
    border-bottom: 1px solid #e0e0e0;
    height: 180px;
}

#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color:white;
}

#footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: rgb(243, 243, 243);
    border-top: 1px solid #e0e0e0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.footer-padding {
    width: 100%;
    height: 100px;
}

a {
    text-decoration: none;
    margin: 10px;
}

#header-text {
    font-size: 45px;
    font-weight: 600;
    color:#323232;
}

h3 {
    background: -webkit-linear-gradient(45deg, #000000, #ebcc44,   #c04040 80%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.first {
    display: flex;
    justify-content: space-around;
}

#size{
    background-color: rgb(26, 25, 25);
    color: white;
    margin-bottom: 50px;
    border-radius: 5px;
}

#header img {
    width: 70px;
    margin-right: 15px;
}

#size rect {
    fill:white;
}

#size text {
    font-size: 12px;
    font-family: sans-serif;
}


#size circle {
    fill: white;
    opacity: 0.8;
}


#price {
    background-color: rgb(26, 25, 25);
    color: white;
    margin-left: 10px;
    margin-bottom: 50px;
    border-radius: 5px;
}

#price text {
    font-size: 12px;
    font-family: sans-serif;
    color: white;
}

#map {
    background-color: #acacac;
    margin-bottom: 50px;
    border-radius: 5px;
}

#map path {
    stroke: white;
    stroke-opacity: 0.4;
}

.line-path {
    fill: none;
    stroke: maroon;
    stroke-width: 5;
    stroke-linejoin: round;
}

.area-path {
    fill: maroon;
    opacity: 5;
    stroke-linejoin: round;
}


.button-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.first-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.first-box-header {
    display: flex;
    align-items: center;
}

.first-box-header select {
    margin-left: 10px;
}

.second-box{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.country:hover {
    fill: maroon;
}

#tree {
   background-color: rgb(26, 25, 25);
   color: white; 
   margin-right: 10px;
   margin-bottom: 50px;
   border-radius: 5px;
}

#tree path {
    fill:none;
    stroke:rgb(181, 41, 41);
}

#tree path:hover {
    fill:none;
    stroke: white;
    stroke-width: 5px;
}

#tree text {
    text-shadow:
    -1px -1px 3px white,
    -1px  1px 3px white,
    1px -1px 3px white,
    1px -1px 3px white;
    pointer-events: none;

}

#collapsible {
   background-color: rgb(26, 25, 25);
   color: white; 
   margin-bottom: 50px;
   border-radius: 5px;
}


.third-box {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}


.change-button {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 1.2rem;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  user-select: none;
  outline: none;
  margin-left:10px;
  background-color: #f1f1f1;
}

.change-button:hover {
   background-color: #d9d9d9;
}

.change-button:active {
    background-color: #999999;
}