/* CSS Document */

/*
    dev.css
    
    2023-06-19
     > Move to @media screen and (orientation:landscape)
     > Move html {font-size: 32px;} et al to here from header.css.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;800&family=Oswald:wght@600&family=Quicksand:wght@700&family=Roboto:wght@400;900&display=swap');
    
:root {
    --colour01: #dd6e42;
    --colour02: #e8dab2;
    --colour03: #4f6d7a;
    --colour04: #c0d6df;
    --colour05: #eaeaea;
    
    --bkCol01: #08639d;
    --bkCol02: #31b6d3;
    --bkCol03: #5dbfd8;
    --bkCol04: #88cadb;
    --bkCol05: #cbe2ea;
    --bkCol06: #0293c6;
    --bkCol07: #02a6c7;
    
    --colLogoTag: #88cadb;
    
}
/*    
    Moved from header.css.
*/    
body, body * {
    margin: 0;
    box-sizing: border-box;
}
/*    
    2025-04-27
    No background colour on Opera mobile.  Added now.
*/ 
body {
    font-family: 'Montserrat', sans-serif;
    background-color: white;
}
html {
    font-size: 32px;
}
@media screen and (orientation:landscape) {
    html {
        font-size: 16px;
    }
}


/*    
    /Moved from header.css.
*/ 

/*    
    MAIN
*/
main {
  min-height: 80vh;
  color: var(--colText);
}
main, main > *, .imgWrapper, .imgWrapper * { /* Without the >, this can stop list decoration for some reason. */
  display: flex;
  flex-direction: column;
}
#container {
  align-items: center;
  gap: 1rem;
}
#container > * {
  padding-left: 1rem;
  padding-right: 1rem;
}
.bgImg {
  /*  padding: 1rem;*/
}
.imgWrapper {
  background-color: var(--colourband);
  width: 100%;
  align-items: flex-end;
}
.imgWrapper img {
  height: 50vh;
}


.italiced {
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 900;
  text-align: center;
  font-family: serif;
}
.boxed p {
  margin: 0;
}
.boxed ul {
  list-style: square;
}
.boxed li {
  display: list-item;
}
.boxed {
  border: 0.2rem solid var(--colText);
  padding: 1rem;
  margin: 1rem;
  color: var(--colText);
  font-size: 1.5rem;
}
#mainBox {
  font-size: 1.8rem;
  line-height: 1.3;
}
.para {
  font-size: 1.5rem;
}
.roundRect {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border: 0.2rem solid;
  border-radius: 0.7rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.roundRect p {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 72px;
}
@media (min-width: 1300px) { /* Do not move this to DT only CSS. */
    .imgWrapper img {
    padding-right: 5rem;
    }
    .just-cont {
    display: grid;
    }
    .boxed{
        width: 70vw;
    }
}