@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: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    src: url('https://radiant-bonbon-2169e2.netlify.app/assets/fonts/yourfontname/yourfontname-roman.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Your Font Name';
    src: url('https://radiant-bonbon-2169e2.netlify.app/assets/fonts/yourfontname/yourfontname-italic.woff2');
    font-weight: normal;
    font-style: italic;
    font-display: block;
}



/* GENERAL STYLES */

html {
  font-size: 24px;
  font-family: 'Your Font Name', 'Helvetica', 'Arial', sans-serif;
  color: black;
  background-color: white;

  
}
.page-wrapper {
  text-align: center;

  
  body {
    font-family: 'Courier New', Courier, monospace;
 }

 .page-wrapper {
    text-align: center;
    padding: 20px;
 }
 nav {
  display: flex;
  justify-content: center; 
  gap: 15px; /* Adds space between buttons */
  margin-top: 80px;
}

nav a {
  display: flex; 
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  width: 300px; 
  height: 300px; 
  text-decoration: none;
  background-color: #747e03; 
  color: white;
  border-radius: 10px; 
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  overflow: hidden; 
}

}

 nav a:hover {
    background-color: #3c6b02; 
    transform: scale(1.05);
 }

 nav a:active {
    background-color: #0a9b08; 
 }
 


body {
  position:relative;
  background-color: white;
  font-size: 24px;
  font-family: 'Your Font Name', 'Helvetica', 'Arial', sans-serif;
  color: rgb(192, 202, 237);
  
  width:100%;
  height:auto;
  overflow-y:auto;
  text-align: center;
}

a {
  color: rgb(222, 182, 6);
  text-decoration: underline;

  text-align: center;

}

a:hover {
  color: rgb(248, 78, 200);
  text-decoration: underline;
  text-align: center;
}



h1{
font-family: 'Courier New', Courier, monospace;
font-size: 24pt;
color: rgb(27, 29, 50);
text-align: center;


}

h2{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: rgb(23, 4, 72);
  font-size: 18pt;
  text-align: center;
}

h3{
  /* h3 style */
}

p{
  font: size 24pt
;
  color: rgb(255, 255, 255);
  text-align: center;
}

/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding: 1rem;
}




/* WEBSITE MEDIA QUERIES */

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */

@media (max-width: 100px) {

  /* your 'mobile' overriding css properties here, remember about the 'cascade' */



}