@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/

@font-face {
    font-family: 'Your Font Name';
    src: url('../fonts/yourfontname/yourfontname-roman.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Your Font Name';
    src: url('../fonts/yourfontname/yourfontname-italic.woff2');
    font-weight: normal;
    font-style: italic;
    font-display: block;
}



/* VARIABLES */

:root {
  /* Color values */
  --color-background: rgba(255,255,255,1);
  --color-text: rgba(0,0,0,1);
  --color-text-link: rgba(0,0,255,0.8);
  --color-text-link-hover: rgba(0,0,255,0.4);
  /* Font values */
  --font-family: 'Your Font Name', 'Helvetica', 'Arial', sans-serif;
  --font-size: 24px;
  /* Margin value */
  --margin: 1rem;
}



/* GENERAL STYLES */

html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
}

body {
  position:relative;
  background-color: var(--color-background);
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  width:100%;
  height:auto;
  overflow-y:auto;
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}


h1{
  /* h1 style */
}

h2{
  /* h2 style */
}

h3{
  /* h3 style */
}

h4, h5, h6{
  /* h4-h5-h6 style */
}

p{
  /* paragraph style */
}

ol, ul{
  /* ordered list and unordered list styles */
}

blockquote{
  /* blockquote element style */
}

hr{
  /* horizontal rule style */
}



/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding: var(--margin);
}

/* navigation */
 
nav{
  
}

/* content */

main{
 
}

summary{
  
}






/* UTILITY CLASSES */

/* hide desktop mobile etc */

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}





/* WEBSITE MEDIA QUERIES */

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */
/* style this one first and then use the subsequent ones in a cascading way (from general to specific) */

@media (max-width: 779px) {

  /* your 'mobile' overriding css properties here */



  /* utility classes, mobile */

  .desktop-only{
    display:none;
  }

  .mobile-only{
    display:block;
  }

}



/* use this query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */

@media (max-width: 339px) {

  /* your overriding css properties here */

}



/* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */

@media (max-width: 779px) and (orientation: landscape) {

   /* your overriding css properties here */

}



/* use this query to apply style for 'small' desktop screens */

@media (min-width: 780px) and (max-width: 992px) {

  /* your overriding css properties here */

}