/* 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." */

/* This is what a comment looks like in CSS! */
/* CSS is how you style the HTML elements of your website. You can change colors, fonts, and
   the positioning of your HTML content. To learn how to do something, just try searching Google
   like "css change link color". */
   
/*header style */
/* set correct box model */
@font-face {
  font-family: 'Kosmos';
  src: url('fonts/kosmos/PLANK.TTF') format("truetype");
}
  @font-face {
  font-family: 'Digital';
  src: url('fonts/digital/digital7.TTF') format("truetype");
}
 @font-face {
  font-family: 'Dotmatrix';
  src: url('fonts/dot/dotmatrix.TTF') format("truetype");
}
@font-face {
  font-family: 'Coolvetica';
  src: url('fonts/cool/CoolveticaRg.otf') format("truetype");
}

a { color: #9b5de5;
}

.header {
  font-size:2.5rem;
  letter-spacing:2px;
  font-family:Digital;
  text-align: center;
  padding: 0px;
  margin: 0px;
  height: auto;
}
.headertitle {
  font-size:6rem;
  font-family:Kosmos;
  color: black
}
nav {
  display: flex;  /* Allow children to be positioned with formatting */
  justify-content: space-between;  /* Horizontally distribute children */
  align-items: center;  /* Vertically align children */
  width: 102vw;
  left:-2rem;
  position:relative;
  height: 3rem;  /* 1rem = computed font size (usually 16px) */
  background: black;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  color: white;
}

nav a:hover {
  color: #9b5de5;
}
/*main website style */
/* set correct box model */
* {
    box-sizing: border-box;
}

.subtitletext {
color:#118ab2;
font-family:Dotmatrix;
}

.linktext {
color:#118ab2;
font-family:Dotmatrix;
}

body {
  background-color: white;
  color: white;
  font-family: Coolvetica;
  margin: 0px;
}
  
.bordered {
  border: 5px dotted #118ab2;
  margin: 5px;
  padding: 10px;
  border-radius:20px;
}

.fit img {
  width: 100%;
  height: auto;
}

.centered {
  text-align: center;
}

/* flexbox container */
.holy-grail-flexbox {
  display:flex;
  flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
  width:100%;
  padding-top:1rem;
  padding-right:1rem;
  padding-left:1rem;
}

/* background colors */
.header {
  background: url("/images/sunset.png");
  background-repeat: no-repeat;
  background-position: center top
}
.main-content {
  background: black;
}
.left-sidebar {
  background: url("/images/csirac.png");;
}
.right-sidebar {
  background: url("/images/csirac.png");;
}
.footer {
  background: black
}

/* tablet breakpoint */
@media (min-width:768px) {
  .left-sidebar,
  .right-sidebar {
    width:50%;
  }
}

          
        
          
        
/* desktop breakpoint */
@media (min-width:1024px) {
  .header {
    order:-2; /* header first */
  }
  .left-sidebar {
    /* left sidebar second (first in second row) */
    order:-1; 
  }
  .main-content {
    width:50%;
  }
  .left-sidebar,
  .right-sidebar {
    width:25%;
  }
}

.menu-item {
   font-family:Dotmatrix;
  padding-left:10px;
   padding-right:10px;
}