/* Northbox code v1.0 */

/*COLOUR SCHEME*/
:root {
  /*scan A*/
  --Ablack: #3f444bff;
  --Aorange1: #b55130ff;
  --Aorange2: #c57452ff;
  --Aorange3: #ddbba6ff;
  --Awhite1: #f1ede1ff;
  --Awhite2: #fcfcfcff;
  /*scan B*/
  --Bblack: #464646ff;
  --Borange1: #d3a58bff;
  --Borange2: #d4b49eff;
  --Borange3: #e2d2c2ff;
  --Bwhite: #eff1efff;
  /*variables*/
  --black: var(--Ablack);
  --dark-color: var(--Aorange1);
  --mid-color: var(--Aorange2);
  --light-color: var(--Aorange3);
  --bg-color: var(--Awhite1);
}



/*HEADER BOX*/
.header {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--light-color);
  width: 825px;
  height: 200px;
  outline: 3px solid var(--mid-color);
  border-radius: 3px;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--Ablack);
  mask: url(web-elements/wonky-globe.png) center / 1000px no-repeat;
  -webkit-mask: url(web-elements/wonky-globe.png) center / 1000px no-repeat;
  opacity: 0.5;
  border-radius: inherit;
  z-index: 0;
}

.header * {
  z-index: 1;
}



/*TITLE+LOGO*/
.header-top {
  display: flex;
  align-items: center;
  gap: 0px;
}
.header-top h1{
  color:var(--mid-color);
  margin: 0;
  font-size: 100px;
  line-height: 100px;
  font-family: 'Bungee','Bookman Old Style', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.header-top img {
  height: 100px;
  margin: 20px;
  padding-left: 5px;
}



/*NAVIGATION BAR*/
.header-bot {
  display: flex;
  justify-content: center;
  gap: 35px;
}

.header-bot a{
  padding: 15px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: bold;
  text-decoration: none;
  background-color: var(--bg-color);
  outline: 3px solid var(--mid-color);
  border-radius: 3px;
}

/* dropdown button */
.dropbtn {
  padding: 15px;
  border: none;
  font: inherit;
  text-decoration: none;
  background-color: var(--bg-color);
  display: inline-block;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 10;
}

/* dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bg-color);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px var(--black);
  z-index: 1;
  outline: 3px solid var(--mid-color);
  border-radius: 3px;
}

/* links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  outline: none;
}

/* change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--light-color);}

/* show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: var(--light-color);}

/* change the background color of navigation when hovered */
.header-bot a:hover {background-color: var(--light-color);}



/*MAIN CONTAINER*/

.main-container {
  display: flex;
  gap: 3px;
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--mid-color);
  width:825px;
  height:auto;
  outline: 3px solid var(--mid-color);
  border-radius: 3px;
}


.left-part {
  flex:2.5;
  background-color: var(--bg-color);
  border-radius: 3px;
  padding: 15px;
}

.article p{
  margin-bottom: 20px;
}

.footnotes {
  font-size: small;
}

.right-part {
  flex:1;
  background-color: var(--bg-color);
  border-radius: 3px;
  padding: 15px;
}

.right-box {
  background-color: var(--light-color);
}

.window-body{
  padding: 7.5px;
  max-height: 20.5vh;
  overflow-y: auto;
  font-size: small;
}

.title {
  color:var(--black);
  font-weight: bold;
  background:var(--mid-color);
  font:12px ;
  padding:5px;
  text-align: center;
  border-radius: 3px;
}


.bottom-part {
  text-align: center;
}

.bottom-part img{
  width: 300px;
  padding: 50px;
  display: block;
  margin: 0 auto;
}



/*TEXT*/

body {
  padding: 5%;
  margin: 0;
  font-size: 1rem;
  background-color: var(--bg-color);
  color: var(--black);
  font-family: 'Bookman Old Style', 'Arial Narrow', Arial, sans-serif;
}

h2 {
  color: var(--mid-color);
}

h3 {
  color: var(--black);
}

h3 img{
  width: 13px;
  rotate: 180deg;
  padding-left: 5px;
}

dl strong{
  font-size: large;
}

dd{
  margin-top: 5px;
}

dt {
  margin-top: 10px;
}

.tags {
  font-size: small;
}



/*LINKS*/

a:link {
  color: var(--mid-color);
}

a:visited {
  color: var(--Borange1);
}

a:hover {
  text-decoration: none;
}



/*IMAGES*/

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/* buttonz */
button {
  padding-left: 7.5px;
  padding-right: 7.5px;
  padding-bottom: 2.5px;
  padding-top: 2.5px;
  font-size: inherit;
  border:solid var(--mid-color);
  border-radius: 3px;
  font: inherit;
  color: inherit;
  background-color: var(--light-color);
}

button:hover {background-color: var(--light-color);}

.window-body button:hover {background-color: var(--bg-color);}